diff --git a/Sources/Luminare/Components/DividedVStack.swift b/Sources/Luminare/Components/Auxiliary/DividedVStack.swift
similarity index 86%
rename from Sources/Luminare/Components/DividedVStack.swift
rename to Sources/Luminare/Components/Auxiliary/DividedVStack.swift
index 0826a20..21b454b 100644
--- a/Sources/Luminare/Components/DividedVStack.swift
+++ b/Sources/Luminare/Components/Auxiliary/DividedVStack.swift
@@ -4,21 +4,27 @@
 //
 //  Created by Kai Azim on 2024-04-02.
 //
-// Thank you https://movingparts.io/variadic-views-in-swiftui
+//  Thanks to https://movingparts.io/variadic-views-in-swiftui
 
 import SwiftUI
 
-public struct DividedVStack<Content: View>: View {
+public struct DividedVStack<Content>: View where Content: View {
     let spacing: CGFloat?
     let applyMaskToItems: Bool
     let showDividers: Bool
-    var content: Content
+    
+    @ViewBuilder let content: () -> Content
 
-    public init(spacing: CGFloat? = nil, applyMaskToItems: Bool = true, showDividers: Bool = true, @ViewBuilder content: () -> Content) {
+    public init(
+        spacing: CGFloat? = nil,
+        applyMaskToItems: Bool = true,
+        showDividers: Bool = true,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
         self.spacing = spacing
         self.applyMaskToItems = applyMaskToItems
         self.showDividers = showDividers
-        self.content = content()
+        self.content = content
     }
 
     public var body: some View {
@@ -29,7 +35,7 @@ public struct DividedVStack<Content: View>: View {
                 showDividers: showDividers
             )
         ) {
-            content
+            content()
         }
     }
 }
@@ -38,7 +44,6 @@ struct DividedVStackLayout: _VariadicView_UnaryViewRoot {
     let spacing: CGFloat
     let applyMaskToItems: Bool
     let showDividers: Bool
-
     let innerPadding: CGFloat = 4
 
     init(spacing: CGFloat?, applyMaskToItems: Bool, showDividers: Bool) {
@@ -88,8 +93,8 @@ public struct LuminareCroppedSectionItem: ViewModifier {
     let innerPadding: CGFloat = 4
     let innerCornerRadius: CGFloat = 2
 
-    let isFirstChild: Bool
-    let isLastChild: Bool
+    private let isFirstChild: Bool
+    private let isLastChild: Bool
 
     public init(isFirstChild: Bool, isLastChild: Bool) {
         self.isFirstChild = isFirstChild
@@ -134,3 +139,14 @@ public struct LuminareCroppedSectionItem: ViewModifier {
         }
     }
 }
+
+#Preview {
+    LuminareSection {
+        DividedVStack {
+            ForEach(37..<43) { num in
+                Text("\(num)")
+            }
+        }
+    }
+    .padding()
+}
diff --git a/Sources/Luminare/Components/LuminareButtonStyle.swift b/Sources/Luminare/Components/Auxiliary/LuminareButtonStyle.swift
similarity index 85%
rename from Sources/Luminare/Components/LuminareButtonStyle.swift
rename to Sources/Luminare/Components/Auxiliary/LuminareButtonStyle.swift
index 95d2c90..246a629 100644
--- a/Sources/Luminare/Components/LuminareButtonStyle.swift
+++ b/Sources/Luminare/Components/Auxiliary/LuminareButtonStyle.swift
@@ -9,9 +9,11 @@ import SwiftUI
 
 public struct LuminareButtonStyle: ButtonStyle {
     @Environment(\.isEnabled) private var isEnabled: Bool
+    
     let innerCornerRadius: CGFloat = 2
     let elementMinHeight: CGFloat = 34
-    @State var isHovering: Bool = false
+    
+    @State private var isHovering: Bool = false
 
     public init() {}
 
@@ -45,8 +47,10 @@ public struct LuminareButtonStyle: ButtonStyle {
 
 public struct LuminareDestructiveButtonStyle: ButtonStyle {
     @Environment(\.isEnabled) private var isEnabled: Bool
+    
     let innerCornerRadius: CGFloat = 2
     let elementMinHeight: CGFloat = 34
+    
     @State var isHovering: Bool = false
 
     public init() {}
@@ -81,8 +85,10 @@ public struct LuminareDestructiveButtonStyle: ButtonStyle {
 
 public struct LuminareCosmeticButtonStyle: ButtonStyle {
     @Environment(\.isEnabled) private var isEnabled: Bool
+    
     let innerCornerRadius: CGFloat = 2
     let elementMinHeight: CGFloat = 34
+    
     @State var isHovering: Bool = false
     let icon: Image
 
@@ -126,14 +132,18 @@ public struct LuminareCosmeticButtonStyle: ButtonStyle {
 
 public struct LuminareCompactButtonStyle: ButtonStyle {
     @Environment(\.isEnabled) private var isEnabled: Bool
+    
     let elementMinHeight: CGFloat = 34
     let elementExtraMinHeight: CGFloat = 25
     let extraCompact: Bool
+    let borderlessWhileNotHovering: Bool
+    
     @State var isHovering: Bool = false
     let cornerRadius: CGFloat = 8
 
-    public init(extraCompact: Bool = false) {
+    public init(extraCompact: Bool = false, borderlessWhileNotHovering: Bool = false) {
         self.extraCompact = extraCompact
+        self.borderlessWhileNotHovering = borderlessWhileNotHovering
     }
 
     public func makeBody(configuration: Configuration) -> some View {
@@ -141,10 +151,7 @@ public struct LuminareCompactButtonStyle: ButtonStyle {
             .padding(.horizontal, extraCompact ? 0 : 12)
             .frame(maxWidth: .infinity, maxHeight: .infinity)
             .background(backgroundForState(isPressed: configuration.isPressed))
-            .background {
-                RoundedRectangle(cornerRadius: cornerRadius)
-                    .strokeBorder(.quaternary, lineWidth: 1)
-            }
+            .background(border())
             .fixedSize(horizontal: extraCompact, vertical: extraCompact)
             .clipShape(.rect(cornerRadius: cornerRadius))
             .onHover { hover in
@@ -156,15 +163,35 @@ public struct LuminareCompactButtonStyle: ButtonStyle {
             .frame(minHeight: extraCompact ? elementExtraMinHeight : elementMinHeight)
             .opacity(isEnabled ? 1 : 0.5)
     }
+    
+    @ViewBuilder private func border() -> some View {
+        Group {
+            if isHovering || !borderlessWhileNotHovering {
+                RoundedRectangle(cornerRadius: cornerRadius)
+                    .strokeBorder(.quaternary, lineWidth: 1)
+            } else {
+                RoundedRectangle(cornerRadius: cornerRadius)
+                    .strokeBorder(.clear, lineWidth: 1)
+            }
+        }
+    }
 
-    private func backgroundForState(isPressed: Bool) -> some View {
+    @ViewBuilder private func backgroundForState(isPressed: Bool) -> some View {
         Group {
             if isPressed {
                 Rectangle().foregroundStyle(.quaternary)
             } else if isHovering {
-                Rectangle().foregroundStyle(.quaternary.opacity(0.7))
+                if borderlessWhileNotHovering {
+                    Rectangle().foregroundStyle(.quinary)
+                } else {
+                    Rectangle().foregroundStyle(.quaternary.opacity(0.7))
+                }
             } else {
-                Rectangle().foregroundStyle(.quinary)
+                if borderlessWhileNotHovering {
+                    Rectangle().foregroundStyle(.clear)
+                } else {
+                    Rectangle().foregroundStyle(.quinary)
+                }
             }
         }
     }
diff --git a/Sources/Luminare/Components/Auxiliary/LuminareInfoView.swift b/Sources/Luminare/Components/Auxiliary/LuminareInfoView.swift
new file mode 100644
index 0000000..ac963cf
--- /dev/null
+++ b/Sources/Luminare/Components/Auxiliary/LuminareInfoView.swift
@@ -0,0 +1,101 @@
+//
+//  LuminareInfoView.swift
+//
+//
+//  Created by Kai Azim on 2024-06-02.
+//
+
+import SwiftUI
+
+public struct LuminareInfoView<Content>: View where Content: View {
+    let color: Color
+    let arrowEdge: Edge
+    
+    @ViewBuilder private let content: () -> Content
+    
+    @State private var isShowingDescription: Bool = false
+    @State private var isHovering: Bool = false
+    @State private var hoverTimer: Timer?
+    
+    public init(
+        color: Color = .accentColor,
+        arrowEdge: Edge = .bottom,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.color = color
+        self.arrowEdge = arrowEdge
+        self.content = content
+    }
+
+    public init(
+        _ key: LocalizedStringKey,
+        color: Color = .accentColor,
+        arrowEdge: Edge = .bottom
+    ) where Content == Text {
+        self.init(color: color, arrowEdge: arrowEdge) {
+            Text(key)
+        }
+    }
+    
+    public init() where Content == EmptyView {
+        self.init {
+            EmptyView()
+        }
+    }
+
+    public var body: some View {
+        VStack {
+            Circle()
+                .foregroundStyle(color)
+                .frame(width: 4, height: 4)
+                .padding(.leading, 4)
+                .padding(12)
+                .contentShape(.circle)
+                .padding(-12)
+                .onHover { hovering in
+                    isHovering = hovering
+
+                    if isHovering {
+                        hoverTimer = Timer.scheduledTimer(withTimeInterval: 0.25, repeats: false) { _ in
+                            isShowingDescription = true
+                        }
+                    } else {
+                        hoverTimer?.invalidate()
+                        isShowingDescription = false
+                    }
+                }
+
+                .popover(isPresented: $isShowingDescription, arrowEdge: arrowEdge) {
+                    content()
+                        .multilineTextAlignment(.center)
+                }
+
+            Spacer()
+        }
+    }
+}
+
+#Preview {
+    LuminareSection {
+        LuminareCompose {
+        } label: {
+            Text("Pops to bottom")
+        } info: {
+            LuminareInfoView {
+                Text("An info description")
+                    .padding()
+            }
+        }
+        
+        LuminareCompose {
+        } label: {
+            Text("Pops to trailing")
+        } info: {
+            LuminareInfoView(color: .violet, arrowEdge: .trailing) {
+                Text("An info description")
+                    .padding()
+            }
+        }
+    }
+    .padding()
+}
diff --git a/Sources/Luminare/Components/Color Picker/ColorHueSliderView.swift b/Sources/Luminare/Components/Color Picker/ColorHueSliderView.swift
index 27be997..394ec70 100644
--- a/Sources/Luminare/Components/Color Picker/ColorHueSliderView.swift	
+++ b/Sources/Luminare/Components/Color Picker/ColorHueSliderView.swift	
@@ -14,7 +14,7 @@ struct ColorHueSliderView: View {
     @State private var selectionCornerRadius: CGFloat = 0
     @State private var selectionWidth: CGFloat = 0
 
-    // Gradient for the color spectrum slider
+    // gradient for the color spectrum slider
     private let colorSpectrumGradient = Gradient(
         colors: stride(from: 0.0, through: 1.0, by: 0.01)
             .map {
@@ -109,3 +109,10 @@ struct ColorHueSliderView: View {
         return 15 * edgeFactor
     }
 }
+
+#Preview {
+    LuminareSection {
+        ColorHueSliderView(selectedColor: .constant(.accentColor))
+    }
+    .padding()
+}
diff --git a/Sources/Luminare/Components/Color Picker/ColorPickerModalView.swift b/Sources/Luminare/Components/Color Picker/ColorPickerModalView.swift
index 1146637..b2a01c1 100644
--- a/Sources/Luminare/Components/Color Picker/ColorPickerModalView.swift	
+++ b/Sources/Luminare/Components/Color Picker/ColorPickerModalView.swift	
@@ -7,17 +7,26 @@
 
 import SwiftUI
 
-// View for the color popup as a whole
-struct ColorPickerModalView: View {
+public typealias RGBColorNames<R, G, B> = (
+    red: R,
+    green: G,
+    blue: B
+)
+
+
+// view for the color popup as a whole
+struct ColorPickerModalView<R, G, B>: View where R: View, G: View, B: View {
+    typealias ColorNames = RGBColorNames<R, G, B>
+    
     @Binding var color: Color
     @Binding var hexColor: String
     @State private var redComponent: Double = 0
     @State private var greenComponent: Double = 0
     @State private var blueComponent: Double = 0
 
-    let colorNames: (red: LocalizedStringKey, green: LocalizedStringKey, blue: LocalizedStringKey)
+    let colorNames: ColorNames
 
-    // Main view containing all components of the color picker
+    // main view containing all components of the color picker
     var body: some View {
         Group {
             LuminareSection(disablePadding: true, showDividers: false) {
@@ -57,34 +66,40 @@ struct ColorPickerModalView: View {
         }
     }
 
-    // View for RGB input fields
+    // view for RGB input fields
     private var RGBInputFields: some View {
         HStack(spacing: 8) {
-            RGBInputField(label: colorNames.red, value: $redComponent)
-                .onChange(of: redComponent) { _ in
-                    setColor(updateColorFromRGB())
-                }
-
-            RGBInputField(label: colorNames.green, value: $greenComponent)
-                .onChange(of: greenComponent) { _ in
-                    setColor(updateColorFromRGB())
-                }
-
-            RGBInputField(label: colorNames.blue, value: $blueComponent)
-                .onChange(of: blueComponent) { _ in
-                    setColor(updateColorFromRGB())
-                }
+            RGBInputField(value: $redComponent) {
+                colorNames.red
+            }
+            .onChange(of: redComponent) { _ in
+                setColor(updateColorFromRGB())
+            }
+            
+            RGBInputField(value: $greenComponent) {
+                colorNames.green
+            }
+            .onChange(of: greenComponent) { _ in
+                setColor(updateColorFromRGB())
+            }
+            
+            RGBInputField(value: $blueComponent) {
+                colorNames.blue
+            }
+            .onChange(of: blueComponent) { _ in
+                setColor(updateColorFromRGB())
+            }
         }
     }
 
-    // Set the color based on the source of change
+    // set the color based on the source of change
     private func setColor(_ newColor: Color) {
         withAnimation(LuminareConstants.fastAnimation) {
             color = newColor
         }
     }
 
-    // Update the color from RGB components
+    // update the color from RGB components
     private func updateColorFromRGB() -> Color {
         Color(
             red: redComponent / 255.0,
@@ -93,7 +108,7 @@ struct ColorPickerModalView: View {
         )
     }
 
-    // Update components when the color changes
+    // update components when the color changes
     private func updateComponents(newValue: Color) {
         hexColor = newValue.toHex()
         let rgb = newValue.toRGB()
@@ -102,3 +117,18 @@ struct ColorPickerModalView: View {
         blueComponent = rgb.blue
     }
 }
+
+#Preview {
+    LuminareSection {
+        ColorPickerModalView(
+            color: .constant(.accentColor),
+            hexColor: .constant("ffffff"),
+            colorNames: (
+                red: Text("Red"),
+                green: Text("Green"),
+                blue: Text("Blue")
+            ))
+    }
+    .padding()
+    .frame(width: 300, height: 375)
+}
diff --git a/Sources/Luminare/Components/Color Picker/ColorSaturationBrightnessView.swift b/Sources/Luminare/Components/Color Picker/ColorSaturationBrightnessView.swift
index f145bc7..3a155a6 100644
--- a/Sources/Luminare/Components/Color Picker/ColorSaturationBrightnessView.swift	
+++ b/Sources/Luminare/Components/Color Picker/ColorSaturationBrightnessView.swift	
@@ -7,7 +7,7 @@
 
 import SwiftUI
 
-// View for adjusting the lightness of a selected color
+// view for adjusting the lightness of a selected color
 struct ColorSaturationBrightnessView: View {
     @Binding var selectedColor: Color
 
@@ -74,12 +74,12 @@ struct ColorSaturationBrightnessView: View {
         }
     }
 
-    // Update the position of the circle based on user interaction
+    // update the position of the circle based on user interaction
     private func updateColor(_ location: CGPoint, _ viewSize: CGSize) {
         let adjustedX = max(0, min(location.x, viewSize.width))
         let adjustedY = max(0, min(location.y, viewSize.height))
 
-        // Only adjust brightness if dragging, to avoid overwriting with white or black
+        // only adjust brightness if dragging, to avoid overwriting with white or black
         if isDragging {
             let saturation = (adjustedX / viewSize.width)
             let brightness = 1 - (adjustedY / viewSize.height)
@@ -96,7 +96,7 @@ struct ColorSaturationBrightnessView: View {
         }
     }
 
-    // Initialize the position of the circle based on the current color
+    // initialize the position of the circle based on the current color
     private func updateCirclePosition(_ viewSize: CGSize) {
         let hsb = selectedColor.toHSB()
 
@@ -143,3 +143,10 @@ struct ColorPickerCircle: View {
             .animation(LuminareConstants.animation, value: [isHovering, isDragging])
     }
 }
+
+#Preview {
+    LuminareSection {
+        ColorSaturationBrightnessView(selectedColor: .constant(.accentColor))
+    }
+    .padding()
+}
diff --git a/Sources/Luminare/Components/Color Picker/LuminareColorPicker.swift b/Sources/Luminare/Components/Color Picker/LuminareColorPicker.swift
index fb1aa1c..b5fc08d 100644
--- a/Sources/Luminare/Components/Color Picker/LuminareColorPicker.swift	
+++ b/Sources/Luminare/Components/Color Picker/LuminareColorPicker.swift	
@@ -7,22 +7,38 @@
 
 import SwiftUI
 
-public struct LuminareColorPicker: View {
+public struct LuminareColorPicker<R, G, B, F>: View
+where R: View, G: View, B: View, F: ParseableFormatStyle, F.FormatInput == String, F.FormatOutput == String {
+    public typealias ColorNames = RGBColorNames<R, G, B>
+    
     @Binding var currentColor: Color
 
     @State private var text: String
     @State private var showColorPicker = false
-    let colorNames: (red: LocalizedStringKey, green: LocalizedStringKey, blue: LocalizedStringKey)
-    let formatStrategy: StringFormatStyle.HexStrategy
+    private let colorNames: ColorNames
+    private let format: F
 
     public init(
-        color: Binding<Color>, colorNames: (red: LocalizedStringKey, green: LocalizedStringKey, blue: LocalizedStringKey),
-        formatStrategy: StringFormatStyle.HexStrategy = .uppercasedWithWell
+        color: Binding<Color>,
+        colorNames: ColorNames,
+        format: F
     ) {
         self._currentColor = color
         self._text = State(initialValue: color.wrappedValue.toHex())
         self.colorNames = colorNames
-        self.formatStrategy = formatStrategy
+        self.format = format
+    }
+    
+    public init(
+        color: Binding<Color>,
+        colorNames: ColorNames,
+        parseStrategy: StringFormatStyle.Strategy = .hex(.lowercasedWithWell)
+    ) where F == StringFormatStyle {
+        self.init(
+            color: color,
+            colorNames: colorNames,
+            format: .init(parseStrategy: parseStrategy)
+        )
     }
 
     public var body: some View {
@@ -30,16 +46,17 @@ public struct LuminareColorPicker: View {
             LuminareTextField(
                 "Hex Color",
                 value: .init($text),
-                format: StringFormatStyle(parseStrategy: .hex(formatStrategy)),
-                onSubmit: {
-                    if let newColor = Color(hex: text) {
-                        currentColor = newColor
-                        text = newColor.toHex()
-                    } else {
-                        text = currentColor.toHex() // revert to last valid color
-                    }
-                }
+                format: format
             )
+            .onSubmit {
+                if let newColor = Color(hex: text) {
+                    currentColor = newColor
+                    text = newColor.toHex()
+                } else {
+                    // revert to last valid color
+                    text = currentColor.toHex()
+                }
+            }
             .modifier(LuminareBordered())
 
             Button {
@@ -62,3 +79,18 @@ public struct LuminareColorPicker: View {
         }
     }
 }
+
+// preview this as app to show the modal panel
+#Preview {
+    LuminareColorPicker(
+        color: .constant(.accentColor),
+        colorNames: (
+            red: Text("Red"),
+            green: Text("Green"),
+            blue: Text("Blue")
+        ),
+        parseStrategy: .hex(.custom(true, "$"))
+    )
+    .monospaced()
+    .padding()
+}
diff --git a/Sources/Luminare/Components/Color Picker/RGBInputField.swift b/Sources/Luminare/Components/Color Picker/RGBInputField.swift
index 5adb191..6a04966 100644
--- a/Sources/Luminare/Components/Color Picker/RGBInputField.swift	
+++ b/Sources/Luminare/Components/Color Picker/RGBInputField.swift	
@@ -7,14 +7,14 @@
 
 import SwiftUI
 
-// Custom input field for RGB values
-struct RGBInputField: View {
-    var label: LocalizedStringKey
+// custom input field for RGB values
+struct RGBInputField<Label>: View where Label: View {
     @Binding var value: Double
+    @ViewBuilder let label: () -> Label
 
     var body: some View {
         VStack(alignment: .leading, spacing: 4) {
-            Text(label)
+            label()
                 .foregroundStyle(.secondary)
 
             Color.clear
@@ -33,3 +33,12 @@ struct RGBInputField: View {
         }
     }
 }
+
+#Preview {
+    LuminareSection {
+        RGBInputField(value: .constant(42.0)) {
+            Text("Red")
+        }
+    }
+    .padding()
+}
diff --git a/Sources/Luminare/Components/Compose/LuminareCompose.swift b/Sources/Luminare/Components/Compose/LuminareCompose.swift
new file mode 100644
index 0000000..5941fc2
--- /dev/null
+++ b/Sources/Luminare/Components/Compose/LuminareCompose.swift
@@ -0,0 +1,166 @@
+//
+//  LuminareCompose.swift
+//  
+//
+//  Created by KrLite on 2024/10/25.
+//
+
+import SwiftUI
+
+struct LuminareCompose<Label, Content, Info>: View where Label: View, Content: View, Info: View {
+    let elementMinHeight: CGFloat
+    let horizontalPadding: CGFloat
+    let spacing: CGFloat?
+    let disabled: Bool
+    
+    @ViewBuilder private let content: () -> Content
+    @ViewBuilder private let label: () -> Label
+    @ViewBuilder private let info: () -> LuminareInfoView<Info>
+    
+    public init(
+        elementMinHeight: CGFloat = 34, horizontalPadding: CGFloat = 8,
+        spacing: CGFloat? = nil,
+        disabled: Bool = false,
+        @ViewBuilder content: @escaping () -> Content,
+        @ViewBuilder label: @escaping () -> Label,
+        @ViewBuilder info: @escaping () -> LuminareInfoView<Info>
+    ) {
+        self.elementMinHeight = elementMinHeight
+        self.horizontalPadding = horizontalPadding
+        self.spacing = spacing
+        self.disabled = disabled
+        self.label = label
+        self.content = content
+        self.info = info
+    }
+    
+    public init(
+        elementMinHeight: CGFloat = 34, horizontalPadding: CGFloat = 8,
+        spacing: CGFloat? = nil,
+        disabled: Bool = false,
+        @ViewBuilder content: @escaping () -> Content,
+        @ViewBuilder label: @escaping () -> Label
+    ) where Info == EmptyView {
+        self.init(
+            elementMinHeight: elementMinHeight, horizontalPadding: horizontalPadding,
+            spacing: spacing, disabled: disabled
+        ) {
+            content()
+        } label: {
+            label()
+        } info: {
+            LuminareInfoView()
+        }
+    }
+    
+    public init(
+        _ key: LocalizedStringKey,
+        elementMinHeight: CGFloat = 34, horizontalPadding: CGFloat = 8,
+        spacing: CGFloat? = nil,
+        disabled: Bool = false,
+        @ViewBuilder content: @escaping () -> Content,
+        @ViewBuilder info: @escaping () -> LuminareInfoView<Info>
+    ) where Label == Text {
+        self.init(
+            elementMinHeight: elementMinHeight, horizontalPadding: horizontalPadding,
+            spacing: spacing, disabled: disabled
+        ) {
+            content()
+        } label: {
+            Text(key)
+        } info: {
+            info()
+        }
+    }
+    
+    public init(
+        _ key: LocalizedStringKey,
+        elementMinHeight: CGFloat = 34, horizontalPadding: CGFloat = 8,
+        spacing: CGFloat? = nil,
+        disabled: Bool = false,
+        @ViewBuilder content: @escaping () -> Content
+    ) where Label == Text, Info == EmptyView {
+        self.init(
+            key,
+            elementMinHeight: elementMinHeight, horizontalPadding: horizontalPadding,
+            spacing: spacing, disabled: disabled
+        ) {
+            content()
+        } info: {
+            LuminareInfoView()
+        }
+    }
+    
+    public init(
+        elementMinHeight: CGFloat = 34, horizontalPadding: CGFloat = 8,
+        spacing: CGFloat? = nil,
+        disabled: Bool = false,
+        infoKey: LocalizedStringKey,
+        @ViewBuilder content: @escaping () -> Content,
+        @ViewBuilder label: @escaping () -> Label
+    ) where Info == Text {
+        self.init(
+            elementMinHeight: elementMinHeight, horizontalPadding: horizontalPadding,
+            spacing: spacing, disabled: disabled,
+            content: content, label: label
+        ) {
+            LuminareInfoView(infoKey)
+        }
+    }
+    
+    public init(
+        _ key: LocalizedStringKey,
+        elementMinHeight: CGFloat = 34, horizontalPadding: CGFloat = 8,
+        spacing: CGFloat? = nil,
+        disabled: Bool = false,
+        infoKey: LocalizedStringKey,
+        @ViewBuilder content: @escaping () -> Content,
+        @ViewBuilder info: @escaping () -> LuminareInfoView<Info>
+    ) where Label == Text, Info == Text {
+        self.init(
+            elementMinHeight: elementMinHeight, horizontalPadding: horizontalPadding,
+            spacing: spacing, disabled: disabled,
+            infoKey: infoKey,
+            content: content
+        ) {
+            Text(key)
+        }
+    }
+    
+    var body: some View {
+        HStack(spacing: spacing) {
+            HStack(spacing: 0) {
+                label()
+                
+                if Info.self != EmptyView.self {
+                    info()
+                }
+            }
+            .fixedSize(horizontal: false, vertical: true)
+            
+            Spacer()
+            
+            content()
+                .disabled(disabled)
+        }
+        .padding(.horizontal, horizontalPadding)
+        .frame(minHeight: elementMinHeight)
+    }
+}
+
+#Preview {
+    LuminareSection {
+        LuminareCompose("Label") {
+            Button {
+                
+            } label: {
+                Text("Test")
+                    .frame(height: 30)
+                    .padding(.horizontal, 8)
+            }
+            .buttonStyle(LuminareCompactButtonStyle(extraCompact: true))
+        }
+        .padding(.trailing, -4)
+    }
+    .padding()
+}
diff --git a/Sources/Luminare/Components/Compose/LuminareSliderPickerCompose.swift b/Sources/Luminare/Components/Compose/LuminareSliderPickerCompose.swift
new file mode 100644
index 0000000..e9cf874
--- /dev/null
+++ b/Sources/Luminare/Components/Compose/LuminareSliderPickerCompose.swift
@@ -0,0 +1,189 @@
+//
+//  LuminareSliderPickerCompose.swift
+//
+//
+//  Created by Kai Azim on 2024-04-14.
+//
+
+import SwiftUI
+
+public struct LuminareSliderPickerCompose<Label, Content, Info, V>: View
+where Label: View, Content: View, Info: View, V: Equatable {
+    private let height: CGFloat
+    private let horizontalPadding: CGFloat
+    
+    @ViewBuilder private let label: () -> Label
+    @ViewBuilder private let content: (V) -> Content
+    @ViewBuilder private let info: () -> LuminareInfoView<Info>
+
+    private let options: [V]
+    @Binding private var selection: V
+
+    public init(
+        _ options: [V], selection: Binding<V>,
+        height: CGFloat = 70,
+        horizontalPadding: CGFloat = 8,
+        @ViewBuilder label: @escaping () -> Label,
+        @ViewBuilder content: @escaping (V) -> Content,
+        @ViewBuilder info: @escaping () -> LuminareInfoView<Info>
+    ) {
+        self.height = height
+        self.horizontalPadding = horizontalPadding
+        self.label = label
+        self.content = content
+        self.info = info
+        self.options = options
+        self._selection = selection
+    }
+    
+    public init(
+        _ key: LocalizedStringKey,
+        _ options: [V], selection: Binding<V>,
+        height: CGFloat = 70,
+        horizontalPadding: CGFloat = 8,
+        @ViewBuilder content: @escaping (V) -> Content,
+        @ViewBuilder info: @escaping () -> LuminareInfoView<Info>
+    ) where Label == Text {
+        self.init(
+            options, selection: selection,
+            height: height,
+            horizontalPadding: horizontalPadding
+        ) {
+            Text(key)
+        } content: { value in
+            content(value)
+        } info: {
+            info()
+        }
+    }
+    
+    public init(
+        _ key: LocalizedStringKey,
+        _ options: [V], selection: Binding<V>,
+        height: CGFloat = 70,
+        horizontalPadding: CGFloat = 8,
+        contentKey: @escaping (V) -> LocalizedStringKey,
+        @ViewBuilder info: @escaping () -> LuminareInfoView<Info>
+    ) where Label == Text, Content == Text {
+        self.init(
+            key,
+            options, selection: selection,
+            height: height,
+            horizontalPadding: horizontalPadding
+        ) { value in
+            Text(contentKey(value))
+        } info: {
+            info()
+        }
+    }
+    
+    public init(
+        _ options: [V], selection: Binding<V>,
+        height: CGFloat = 70,
+        horizontalPadding: CGFloat = 8,
+        @ViewBuilder label: @escaping () -> Label,
+        @ViewBuilder content: @escaping (V) -> Content
+    ) where Info == EmptyView {
+        self.init(
+            options, selection: selection,
+            height: height,
+            horizontalPadding: horizontalPadding
+        ) {
+            label()
+        } content: { value in
+            content(value)
+        } info: {
+            LuminareInfoView()
+        }
+    }
+    
+    public init(
+        _ key: LocalizedStringKey,
+        _ options: [V], selection: Binding<V>,
+        height: CGFloat = 70,
+        horizontalPadding: CGFloat = 8,
+        @ViewBuilder content: @escaping (V) -> Content
+    ) where Label == Text, Info == EmptyView {
+        self.init(
+            options, selection: selection,
+            height: height,
+            horizontalPadding: horizontalPadding
+        ) {
+            Text(key)
+        } content: { value in
+            content(value)
+        }
+    }
+    
+    public init(
+        _ key: LocalizedStringKey,
+        _ options: [V], selection: Binding<V>,
+        height: CGFloat = 70,
+        horizontalPadding: CGFloat = 8,
+        contentKey: @escaping (V) -> LocalizedStringKey
+    ) where Label == Text, Content == Text, Info == EmptyView {
+        self.init(
+            key,
+            options, selection: selection,
+            height: height,
+            horizontalPadding: horizontalPadding
+        ) { value in
+            Text(contentKey(value))
+        }
+    }
+
+    public var body: some View {
+        VStack {
+            LuminareCompose(horizontalPadding: horizontalPadding) {
+                content(selection)
+                    .contentTransition(.numericText())
+                    .multilineTextAlignment(.trailing)
+                    .monospaced()
+                    .padding(4)
+                    .padding(.horizontal, 4)
+                    .background {
+                        ZStack {
+                            Capsule()
+                                .strokeBorder(.quaternary, lineWidth: 1)
+                            
+                            Capsule()
+                                .foregroundStyle(.quinary.opacity(0.5))
+                        }
+                    }
+                    .fixedSize()
+                    .clipShape(.capsule)
+            } label: {
+                label()
+            }
+
+            Slider(
+                value: Binding<Double>(
+                    get: {
+                        Double(options.firstIndex(where: { $0 == selection }) ?? 0)
+                    },
+                    set: { newIndex in
+                        selection = options[Int(newIndex)]
+                    }
+                ),
+                in: 0...Double(options.count - 1),
+                step: 1
+            )
+            .padding(.horizontal, horizontalPadding)
+        }
+        .padding(.horizontal, horizontalPadding)
+        .frame(height: height)
+        .animation(LuminareConstants.animation, value: selection)
+    }
+}
+
+#Preview {
+    LuminareSection {
+        LuminareSliderPickerCompose(
+            "Slider picker",
+            ["0", "1", "e", "i", "π"], selection: .constant("i")
+        ) { value in
+            Text("\(value)")
+        }
+    }
+    .padding()
+}
diff --git a/Sources/Luminare/Components/Compose/LuminareToggleCompose.swift b/Sources/Luminare/Components/Compose/LuminareToggleCompose.swift
new file mode 100644
index 0000000..116d8a6
--- /dev/null
+++ b/Sources/Luminare/Components/Compose/LuminareToggleCompose.swift
@@ -0,0 +1,107 @@
+//
+//  LuminareToggleCompose.swift
+//
+//
+//  Created by Kai Azim on 2024-04-02.
+//
+
+import SwiftUI
+
+public struct LuminareToggleCompose<Label, Info>: View where Label: View, Info: View {
+    let elementMinHeight: CGFloat
+    let horizontalPadding: CGFloat
+    let disabled: Bool
+    @ViewBuilder private let label: () -> Label
+    @ViewBuilder private let info: () -> LuminareInfoView<Info>
+    
+    @Binding var value: Bool
+
+    public init(
+        isOn value: Binding<Bool>,
+        elementMinHeight: CGFloat = 34, horizontalPadding: CGFloat = 8,
+        disabled: Bool = false,
+        @ViewBuilder label: @escaping () -> Label,
+        @ViewBuilder info: @escaping () -> LuminareInfoView<Info>
+    ) {
+        self.elementMinHeight = elementMinHeight
+        self.horizontalPadding = horizontalPadding
+        self.disabled = disabled
+        self.label = label
+        self.info = info
+        self._value = value
+    }
+    
+    public init(
+        isOn value: Binding<Bool>,
+        elementMinHeight: CGFloat = 34, horizontalPadding: CGFloat = 8,
+        disabled: Bool = false,
+        @ViewBuilder label: @escaping () -> Label
+    ) where Info == EmptyView {
+        self.init(
+            isOn: value,
+            elementMinHeight: elementMinHeight, horizontalPadding: horizontalPadding,
+            disabled: disabled
+        ) {
+            label()
+        } info: {
+            LuminareInfoView()
+        }
+    }
+    
+    public init(
+        _ key: LocalizedStringKey,
+        isOn value: Binding<Bool>,
+        elementMinHeight: CGFloat = 34, horizontalPadding: CGFloat = 8,
+        disabled: Bool = false,
+        @ViewBuilder info: @escaping () -> LuminareInfoView<Info>
+    ) where Label == Text {
+        self.init(
+            isOn: value,
+            elementMinHeight: elementMinHeight, horizontalPadding: horizontalPadding,
+            disabled: disabled
+        ) {
+            Text(key)
+        } info: {
+            info()
+        }
+    }
+    
+    public init(
+        _ key: LocalizedStringKey,
+        isOn value: Binding<Bool>,
+        elementMinHeight: CGFloat = 34, horizontalPadding: CGFloat = 8,
+        disabled: Bool = false
+    ) where Label == Text, Info == EmptyView {
+        self.init(
+            key, 
+            isOn: value,
+            elementMinHeight: elementMinHeight, horizontalPadding: horizontalPadding,
+            disabled: disabled
+        ) {
+            LuminareInfoView()
+        }
+    }
+
+    public var body: some View {
+        LuminareCompose(
+            elementMinHeight: elementMinHeight, horizontalPadding: horizontalPadding,
+            disabled: disabled
+        ) {
+            Toggle("", isOn: $value.animation(LuminareConstants.animation))
+                .labelsHidden()
+                .controlSize(.small)
+                .toggleStyle(.switch)
+        } label: {
+            label()
+        } info: {
+            info()
+        }
+    }
+}
+
+#Preview {
+    LuminareSection {
+        LuminareToggleCompose("Toggle compose", isOn: .constant(true))
+    }
+    .padding()
+}
diff --git a/Sources/Luminare/Components/LuminareValueAdjuster.swift b/Sources/Luminare/Components/Compose/LuminareValueAdjusterCompose.swift
similarity index 53%
rename from Sources/Luminare/Components/LuminareValueAdjuster.swift
rename to Sources/Luminare/Components/Compose/LuminareValueAdjusterCompose.swift
index f814103..a876e77 100644
--- a/Sources/Luminare/Components/LuminareValueAdjuster.swift
+++ b/Sources/Luminare/Components/Compose/LuminareValueAdjusterCompose.swift
@@ -1,5 +1,5 @@
 //
-//  LuminareValueAdjuster.swift
+//  LuminareValueAdjusterCompose.swift
 //
 //
 //  Created by Kai Azim on 2024-04-02.
@@ -7,7 +7,8 @@
 
 import SwiftUI
 
-public struct LuminareValueAdjuster<V>: View where V: Strideable, V: BinaryFloatingPoint, V.Stride: BinaryFloatingPoint {
+public struct LuminareValueAdjusterCompose<Label, Info, Suffix, V>: View
+where Label: View, Info: View, Suffix: View, V: Strideable & BinaryFloatingPoint, V.Stride: BinaryFloatingPoint {
     public enum ControlSize {
         case regular
         case compact
@@ -20,53 +21,57 @@ public struct LuminareValueAdjuster<V>: View where V: Strideable, V: BinaryFloat
         }
     }
 
-    let horizontalPadding: CGFloat = 8
+    private let horizontalPadding: CGFloat
+    private let disabled: Bool
 
-    let formatter: NumberFormatter
-    var totalRange: V {
+    private let formatter: NumberFormatter
+    private var totalRange: V {
         sliderRange.upperBound - sliderRange.lowerBound
     }
 
-    @State var isShowingTextBox = false
+    @State private var isShowingTextBox = false
 
-    // Focus
     enum FocusedField {
         case textbox
     }
 
-    @FocusState var focusedField: FocusedField?
-
-    let title: LocalizedStringKey
-    let infoView: LuminareInfoView?
-    @Binding var value: V
-    let sliderRange: ClosedRange<V>
-    let suffix: LocalizedStringKey?
-    var step: V
-    let upperClamp: Bool
-    let lowerClamp: Bool
-    let controlSize: LuminareValueAdjuster.ControlSize
-
-    let decimalPlaces: Int
+    @FocusState private var focusedField: FocusedField?
+
+    @ViewBuilder private let label: () -> Label
+    @ViewBuilder private let suffix: () -> Suffix
+    @ViewBuilder private let info: () -> LuminareInfoView<Info>
+    
+    @Binding private var value: V
+    private let sliderRange: ClosedRange<V>
+    private var step: V
+    private let upperClamp: Bool
+    private let lowerClamp: Bool
+    private let controlSize: LuminareValueAdjusterCompose.ControlSize
+    private let decimalPlaces: Int
+    
     @State var eventMonitor: AnyObject?
 
-    // TODO: MAX DIGIT SPACING FOR LABEL
+    // TODO: max digit spacing for label
     public init(
-        _ title: LocalizedStringKey,
-        info: LuminareInfoView? = nil,
         value: Binding<V>,
         sliderRange: ClosedRange<V>,
-        suffix: LocalizedStringKey? = nil,
+        horizontalPadding: CGFloat = 8,
+        disabled: Bool = false,
         step: V? = nil,
         lowerClamp: Bool = false,
         upperClamp: Bool = false,
-        controlSize: LuminareValueAdjuster.ControlSize = .regular,
-        decimalPlaces: Int = 0
+        controlSize: LuminareValueAdjusterCompose.ControlSize = .regular,
+        decimalPlaces: Int = 0,
+        @ViewBuilder label: @escaping () -> Label,
+        @ViewBuilder suffix: @escaping () -> Suffix,
+        @ViewBuilder info: @escaping () -> LuminareInfoView<Info>
     ) {
-        self.title = title
-        self.infoView = info
+        self.label = label
+        self.suffix = suffix
+        self.info = info
+        
         self._value = value
         self.sliderRange = sliderRange
-        self.suffix = suffix
         self.lowerClamp = lowerClamp
         self.upperClamp = upperClamp
         self.controlSize = controlSize
@@ -81,32 +86,126 @@ public struct LuminareValueAdjuster<V>: View where V: Strideable, V: BinaryFloat
         } else {
             self.step = 1
         }
+        
+        self.horizontalPadding = horizontalPadding
+        self.disabled = disabled
+    }
+    
+    public init(
+        value: Binding<V>,
+        sliderRange: ClosedRange<V>,
+        step: V? = nil,
+        lowerClamp: Bool = false,
+        upperClamp: Bool = false,
+        controlSize: LuminareValueAdjusterCompose.ControlSize = .regular,
+        decimalPlaces: Int = 0,
+        @ViewBuilder label: @escaping () -> Label,
+        @ViewBuilder suffix: @escaping () -> Suffix
+    ) where Info == EmptyView {
+        self.init(
+            value: value,
+            sliderRange: sliderRange,
+            step: step,
+            lowerClamp: lowerClamp,
+            upperClamp: upperClamp,
+            controlSize: controlSize,
+            decimalPlaces: decimalPlaces
+        ) {
+            label()
+        } suffix: {
+            suffix()
+        } info: {
+            LuminareInfoView()
+        }
+    }
+    
+    public init(
+        _ key: LocalizedStringKey,
+        _ suffixKey: LocalizedStringKey,
+        value: Binding<V>,
+        sliderRange: ClosedRange<V>,
+        horizontalPadding: CGFloat = 8,
+        disabled: Bool = false,
+        step: V? = nil,
+        lowerClamp: Bool = false,
+        upperClamp: Bool = false,
+        controlSize: LuminareValueAdjusterCompose.ControlSize = .regular,
+        decimalPlaces: Int = 0,
+        @ViewBuilder info: @escaping () -> LuminareInfoView<Info>
+    ) where Label == Text, Suffix == Text {
+        self.init(
+            value: value,
+            sliderRange: sliderRange,
+            horizontalPadding: horizontalPadding,
+            disabled: disabled,
+            step: step,
+            lowerClamp: lowerClamp,
+            upperClamp: upperClamp,
+            controlSize: controlSize,
+            decimalPlaces: decimalPlaces
+        ) {
+            Text(key)
+        } suffix: {
+            Text(suffixKey)
+        } info: {
+            info()
+        }
+    }
+    
+    public init(
+        _ key: LocalizedStringKey,
+        _ suffixKey: LocalizedStringKey,
+        value: Binding<V>,
+        sliderRange: ClosedRange<V>,
+        horizontalPadding: CGFloat = 8,
+        disabled: Bool = false,
+        step: V? = nil,
+        lowerClamp: Bool = false,
+        upperClamp: Bool = false,
+        controlSize: LuminareValueAdjusterCompose.ControlSize = .regular,
+        decimalPlaces: Int = 0
+    ) where Label == Text, Suffix == Text, Info == EmptyView {
+        self.init(
+            key,
+            suffixKey,
+            value: value,
+            sliderRange: sliderRange,
+            horizontalPadding: horizontalPadding,
+            disabled: disabled,
+            step: step,
+            lowerClamp: lowerClamp,
+            upperClamp: upperClamp,
+            controlSize: controlSize,
+            decimalPlaces: decimalPlaces
+        ) {
+            LuminareInfoView()
+        }
     }
 
     public var body: some View {
         VStack {
             if controlSize == .regular {
-                HStack {
-                    titleView()
-
-                    Spacer()
-
-                    labelView()
+                LuminareCompose(horizontalPadding: horizontalPadding, disabled: disabled) {
+                    content()
+                } label: {
+                    label()
+                } info: {
+                    info()
                 }
 
-                sliderView()
+                slider()
             } else {
-                HStack(spacing: 12) {
-                    titleView()
-
-                    Spacer(minLength: 0)
-
+                LuminareCompose(horizontalPadding: horizontalPadding, spacing: 12, disabled: disabled) {
                     HStack(spacing: 12) {
-                        sliderView()
-
-                        labelView()
+                        slider()
+                        
+                        content()
                     }
                     .frame(width: 270)
+                } label: {
+                    label()
+                } info: {
+                    info()
                 }
             }
         }
@@ -116,18 +215,7 @@ public struct LuminareValueAdjuster<V>: View where V: Strideable, V: BinaryFloat
         .animation(LuminareConstants.animation, value: isShowingTextBox)
     }
 
-    func titleView() -> some View {
-        HStack(spacing: 0) {
-            Text(title)
-
-            if let infoView {
-                infoView
-            }
-        }
-        .fixedSize(horizontal: false, vertical: true)
-    }
-
-    func sliderView() -> some View {
+    func slider() -> some View {
         Slider(
             value: Binding(
                 get: {
@@ -143,7 +231,7 @@ public struct LuminareValueAdjuster<V>: View where V: Strideable, V: BinaryFloat
     }
 
     @ViewBuilder
-    func labelView() -> some View {
+    func content() -> some View {
         HStack {
             if isShowingTextBox {
                 TextField(
@@ -190,8 +278,8 @@ public struct LuminareValueAdjuster<V>: View where V: Strideable, V: BinaryFloat
                 .buttonStyle(PlainButtonStyle())
             }
 
-            if let suffix {
-                Text(suffix)
+            if Suffix.self != EmptyView.self {
+                suffix()
                     .padding(.leading, -6)
             }
         }
@@ -275,3 +363,20 @@ private extension Comparable {
         min(max(self, limits.lowerBound), limits.upperBound)
     }
 }
+
+#Preview {
+    LuminareSection {
+        LuminareValueAdjusterCompose(
+            value: .constant(42),
+            sliderRange: 0...128,
+            step: 1,
+            lowerClamp: true, 
+            upperClamp: false
+        ) {
+            Text("Value Adjuster")
+        } suffix: {
+            Text("suffix")
+        }
+    }
+    .padding()
+}
diff --git a/Sources/Luminare/Components/LuminareCompactPicker.swift b/Sources/Luminare/Components/LuminareCompactPicker.swift
new file mode 100644
index 0000000..e8eaded
--- /dev/null
+++ b/Sources/Luminare/Components/LuminareCompactPicker.swift
@@ -0,0 +1,102 @@
+//
+//  LuminareCompactPicker.swift
+//  Luminare
+//
+//  Created by KrLite on 2024/10/26.
+//
+
+import SwiftUI
+
+public struct LuminareCompactPicker<Content, V>: View
+where Content: View, V: Hashable & Equatable {
+    let elementMinHeight: CGFloat
+    let horizontalPadding: CGFloat
+    let cornerRadius: CGFloat
+    let borderless: Bool
+    
+    @Binding private var selection: V
+    @ViewBuilder private let content: () -> Content
+    
+    @State var isHovering: Bool = false
+    
+    public init(
+        selection: Binding<V>,
+        elementMinHeight: CGFloat = 30, horizontalPadding: CGFloat = 4,
+        cornerRadius: CGFloat = 8,
+        borderless: Bool = true,
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self._selection = selection
+        self.elementMinHeight = elementMinHeight
+        self.horizontalPadding = horizontalPadding
+        self.cornerRadius = cornerRadius
+        self.borderless = borderless
+        self.content = content
+    }
+
+    public var body: some View {
+        Picker("", selection: $selection) {
+            content()
+        }
+        .labelsHidden()
+        .pickerStyle(.menu)
+        .buttonStyle(.borderless)
+        .padding(.trailing, -2)
+        .onHover { hover in
+            withAnimation(LuminareConstants.fastAnimation) {
+                isHovering = hover
+            }
+        }
+        .frame(minHeight: elementMinHeight)
+        .padding(.horizontal, horizontalPadding)
+        .background {
+            if isHovering {
+                RoundedRectangle(cornerRadius: cornerRadius)
+                    .strokeBorder(.quaternary, lineWidth: 1)
+            } else if borderless {
+                RoundedRectangle(cornerRadius: cornerRadius)
+                    .strokeBorder(.clear, lineWidth: 1)
+            } else {
+                RoundedRectangle(cornerRadius: cornerRadius)
+                    .strokeBorder(.quaternary.opacity(0.7), lineWidth: 1)
+            }
+        }
+        .background {
+            if isHovering {
+                Rectangle()
+                    .foregroundStyle(.quinary)
+            } else {
+                Rectangle()
+                    .foregroundStyle(.clear)
+            }
+        }
+        .clipShape(.rect(cornerRadius: cornerRadius))
+        .animation(LuminareConstants.fastAnimation, value: isHovering)
+    }
+}
+
+#Preview {
+    LuminareSection {
+        LuminareCompose("Picker") {
+            LuminareCompactPicker(selection: .constant(42), borderless: false) {
+                ForEach(0..<200) { num in
+                    Text("\(num)")
+                }
+            }
+        }
+        .padding(.trailing, -4)
+        
+        LuminareCompose("Button") {
+            Button {
+                
+            } label: {
+                Text("Test")
+                    .frame(height: 30)
+                    .padding(.horizontal, 8)
+            }
+            .buttonStyle(LuminareCompactButtonStyle(extraCompact: true))
+        }
+        .padding(.trailing, -4)
+    }
+    .padding()
+}
diff --git a/Sources/Luminare/Components/LuminareInfoView.swift b/Sources/Luminare/Components/LuminareInfoView.swift
deleted file mode 100644
index 99fd21b..0000000
--- a/Sources/Luminare/Components/LuminareInfoView.swift
+++ /dev/null
@@ -1,54 +0,0 @@
-//
-//  LuminareInfoView.swift
-//
-//
-//  Created by Kai Azim on 2024-06-02.
-//
-
-import SwiftUI
-
-public struct LuminareInfoView: View {
-    let color: Color
-    let description: LocalizedStringKey
-    @State var isShowingDescription: Bool = false
-    @State var isHovering: Bool = false
-
-    @State var hoverTimer: Timer?
-
-    public init(_ description: LocalizedStringKey, _ color: Color = .blue) {
-        self.color = color
-        self.description = description
-    }
-
-    public var body: some View {
-        VStack {
-            Circle()
-                .foregroundStyle(color)
-                .frame(width: 4, height: 4)
-                .padding(.leading, 4)
-                .padding(12)
-                .contentShape(.circle)
-                .padding(-12)
-                .onHover { hovering in
-                    isHovering = hovering
-
-                    if isHovering {
-                        hoverTimer = Timer.scheduledTimer(withTimeInterval: 0.25, repeats: false) { _ in
-                            isShowingDescription = true
-                        }
-                    } else {
-                        hoverTimer?.invalidate()
-                        isShowingDescription = false
-                    }
-                }
-
-                .popover(isPresented: $isShowingDescription, arrowEdge: .bottom) {
-                    Text(description)
-                        .multilineTextAlignment(.center)
-                        .padding(8)
-                }
-
-            Spacer()
-        }
-    }
-}
diff --git a/Sources/Luminare/Components/LuminareList.swift b/Sources/Luminare/Components/LuminareList.swift
index 435dd19..08e615d 100644
--- a/Sources/Luminare/Components/LuminareList.swift
+++ b/Sources/Luminare/Components/LuminareList.swift
@@ -7,106 +7,347 @@
 
 import SwiftUI
 
-public struct LuminareList<ContentA, ContentB, V, ID>: View where ContentA: View, ContentB: View, V: Hashable, ID: Hashable {
-    @Environment(\.tintColor) var tintColor
-    @Environment(\.clickedOutsideFlag) var clickedOutsideFlag
-
-    let header: LocalizedStringKey?
-    @Binding var items: [V]
-    @Binding var selection: Set<V>
-    let addAction: () -> ()
-    let content: (Binding<V>) -> ContentA
-    let emptyView: () -> ContentB
+public struct LuminareList<Header, ContentA, ContentB, Footer, V, ID>: View
+where Header: View, ContentA: View, ContentB: View, Footer: View, V: Hashable, ID: Hashable {
+    @Environment(\.tintColor) private var tintColor
+    @Environment(\.clickedOutsideFlag) private var clickedOutsideFlag
+
+    @Binding private var items: [V]
+    @Binding private var selection: Set<V>
+    private let addAction: () -> ()
+    
+    @ViewBuilder private let content: (Binding<V>) -> ContentA
+    @ViewBuilder private let emptyView: () -> ContentB
+    @ViewBuilder private let header: () -> Header
+    @ViewBuilder private let footer: () -> Footer
 
     @State private var firstItem: V?
     @State private var lastItem: V?
-    let id: KeyPath<V, ID>
+    private let id: KeyPath<V, ID>
 
-    let addText: LocalizedStringKey
-    let removeText: LocalizedStringKey
+    private let addText: LocalizedStringKey
+    private let removeText: LocalizedStringKey
 
-    @State var canRefreshSelection = true
-    let cornerRadius: CGFloat = 2
-    let lineWidth: CGFloat = 1.5
-    @State var eventMonitor: AnyObject?
+    @State private var canRefreshSelection = true
+    @State private var eventMonitor: AnyObject?
 
     public init(
-        _ header: LocalizedStringKey? = nil,
         items: Binding<[V]>,
-        selection: Binding<Set<V>>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
         addAction: @escaping () -> (),
         @ViewBuilder content: @escaping (Binding<V>) -> ContentA,
         @ViewBuilder emptyView: @escaping () -> ContentB,
-        id: KeyPath<V, ID>,
-        addText: LocalizedStringKey,
-        removeText: LocalizedStringKey
+        @ViewBuilder header: @escaping () -> Header,
+        @ViewBuilder footer: @escaping () -> Footer
     ) {
-        self.header = header
         self._items = items
         self._selection = selection
         self.addAction = addAction
-        self.content = content
-        self.emptyView = emptyView
         self.id = id
         self.addText = addText
         self.removeText = removeText
+        self.content = content
+        self.emptyView = emptyView
+        self.header = header
+        self.footer = footer
     }
-
+    
     public init(
-        _ header: LocalizedStringKey? = nil,
-        addText: LocalizedStringKey,
-        removeText: LocalizedStringKey,
+        _ headerKey: LocalizedStringKey,
+        _ footerKey: LocalizedStringKey,
         items: Binding<[V]>,
-        selection: Binding<Set<V>>,
-        id: KeyPath<V, ID>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
+        addAction: @escaping () -> (),
         @ViewBuilder content: @escaping (Binding<V>) -> ContentA,
-        @ViewBuilder emptyView: @escaping () -> ContentB,
-        addAction: @escaping () -> ()
-    ) {
+        @ViewBuilder emptyView: @escaping () -> ContentB
+    ) where Header == Text, Footer == Text {
         self.init(
-            header,
             items: items,
-            selection: selection,
+            selection: selection, id: id,
+            addText: addText, removeText: removeText,
             addAction: addAction,
             content: content,
             emptyView: emptyView,
-            id: id,
-            addText: addText,
-            removeText: removeText
+            header: {
+                Text(headerKey)
+            },
+            footer: {
+                Text(footerKey)
+            }
         )
     }
-
+    
     public init(
-        _ header: LocalizedStringKey? = nil,
-        addText: LocalizedStringKey,
-        removeText: LocalizedStringKey,
         items: Binding<[V]>,
-        selection: Binding<Set<V>>,
-        id: KeyPath<V, ID>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
+        addAction: @escaping () -> (),
         @ViewBuilder content: @escaping (Binding<V>) -> ContentA,
-        addAction: @escaping () -> ()
+        @ViewBuilder header: @escaping () -> Header,
+        @ViewBuilder footer: @escaping () -> Footer
     ) where ContentB == EmptyView {
         self.init(
-            header,
-            addText: addText,
-            removeText: removeText,
             items: items,
-            selection: selection,
-            id: id,
+            selection: selection, id: id, 
+            addText: addText, removeText: removeText,
+            addAction: addAction,
+            content: content,
+            emptyView: {
+                EmptyView()
+            },
+            header: header,
+            footer: footer
+        )
+    }
+    
+    public init(
+        _ headerKey: LocalizedStringKey,
+        _ footerKey: LocalizedStringKey,
+        items: Binding<[V]>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
+        addAction: @escaping () -> (),
+        @ViewBuilder content: @escaping (Binding<V>) -> ContentA
+    ) where Header == Text, ContentB == EmptyView, Footer == Text {
+        self.init(
+            items: items,
+            selection: selection, id: id,
+            addText: addText, removeText: removeText,
+            addAction: addAction,
+            content: content,
+            header: {
+                Text(headerKey)
+            },
+            footer: {
+                Text(footerKey)
+            }
+        )
+    }
+    
+    public init(
+        items: Binding<[V]>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
+        addAction: @escaping () -> (),
+        @ViewBuilder content: @escaping (Binding<V>) -> ContentA,
+        @ViewBuilder emptyView: @escaping () -> ContentB,
+        @ViewBuilder header: @escaping () -> Header
+    ) where Footer == EmptyView {
+        self.init(
+            items: items,
+            selection: selection, id: id,
+            addText: addText, removeText: removeText,
+            addAction: addAction,
+            content: content,
+            emptyView: emptyView,
+            header: header,
+            footer: {
+                EmptyView()
+            }
+        )
+    }
+    
+    public init(
+        headerKey: LocalizedStringKey,
+        items: Binding<[V]>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
+        addAction: @escaping () -> (),
+        @ViewBuilder content: @escaping (Binding<V>) -> ContentA,
+        @ViewBuilder emptyView: @escaping () -> ContentB
+    ) where Header == Text, Footer == EmptyView {
+        self.init(
+            items: items,
+            selection: selection, id: id,
+            addText: addText, removeText: removeText,
+            addAction: addAction,
+            content: content,
+            emptyView: emptyView,
+            header: {
+                Text(headerKey)
+            }
+        )
+    }
+    
+    public init(
+        items: Binding<[V]>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
+        addAction: @escaping () -> (),
+        @ViewBuilder content: @escaping (Binding<V>) -> ContentA,
+        @ViewBuilder header: @escaping () -> Header
+    ) where ContentB == EmptyView, Footer == EmptyView {
+        self.init(
+            items: items,
+            selection: selection, id: id,
+            addText: addText, removeText: removeText,
+            addAction: addAction,
+            content: content,
+            emptyView: {
+                EmptyView()
+            },
+            header: header
+        )
+    }
+    
+    public init(
+        headerKey: LocalizedStringKey,
+        items: Binding<[V]>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
+        addAction: @escaping () -> (),
+        @ViewBuilder content: @escaping (Binding<V>) -> ContentA
+    ) where Header == Text, ContentB == EmptyView, Footer == EmptyView {
+        self.init(
+            items: items,
+            selection: selection, id: id,
+            addText: addText, removeText: removeText,
+            addAction: addAction,
+            content: content,
+            header: {
+                Text(headerKey)
+            }
+        )
+    }
+    
+    public init(
+        items: Binding<[V]>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
+        addAction: @escaping () -> (),
+        @ViewBuilder content: @escaping (Binding<V>) -> ContentA,
+        @ViewBuilder emptyView: @escaping () -> ContentB,
+        @ViewBuilder footer: @escaping () -> Footer
+    ) where Header == EmptyView {
+        self.init(
+            items: items,
+            selection: selection, id: id,
+            addText: addText, removeText: removeText,
+            addAction: addAction,
+            content: content,
+            emptyView: emptyView,
+            header: {
+                EmptyView()
+            },
+            footer: footer
+        )
+    }
+    
+    public init(
+        footerKey: LocalizedStringKey,
+        items: Binding<[V]>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
+        addAction: @escaping () -> (),
+        @ViewBuilder content: @escaping (Binding<V>) -> ContentA,
+        @ViewBuilder emptyView: @escaping () -> ContentB
+    ) where Header == EmptyView, Footer == Text {
+        self.init(
+            items: items,
+            selection: selection, id: id,
+            addText: addText, removeText: removeText,
+            addAction: addAction,
+            content: content,
+            emptyView: emptyView,
+            footer: {
+                Text(footerKey)
+            }
+        )
+    }
+    
+    public init(
+        items: Binding<[V]>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
+        addAction: @escaping () -> (),
+        @ViewBuilder content: @escaping (Binding<V>) -> ContentA,
+        @ViewBuilder footer: @escaping () -> Footer
+    ) where Header == EmptyView, ContentB == EmptyView {
+        self.init(
+            items: items,
+            selection: selection, id: id,
+            addText: addText, removeText: removeText,
+            addAction: addAction,
             content: content,
             emptyView: {
                 EmptyView()
             },
-            addAction: addAction
+            footer: footer
+        )
+    }
+    
+    public init(
+        footerKey: LocalizedStringKey,
+        items: Binding<[V]>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
+        addAction: @escaping () -> (),
+        @ViewBuilder content: @escaping (Binding<V>) -> ContentA
+    ) where Header == EmptyView, ContentB == EmptyView, Footer == Text {
+        self.init(
+            items: items,
+            selection: selection, id: id,
+            addText: addText, removeText: removeText,
+            addAction: addAction,
+            content: content,
+            footer: {
+                Text(footerKey)
+            }
+        )
+    }
+    
+    public init(
+        items: Binding<[V]>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
+        addAction: @escaping () -> (),
+        @ViewBuilder content: @escaping (Binding<V>) -> ContentA,
+        @ViewBuilder emptyView: @escaping () -> ContentB
+    ) where Header == EmptyView, Footer == EmptyView {
+        self.init(
+            items: items,
+            selection: selection, id: id,
+            addText: addText, removeText: removeText,
+            addAction: addAction,
+            content: content,
+            emptyView: emptyView,
+            header: {
+                EmptyView()
+            },
+            footer: {
+                EmptyView()
+            }
+        )
+    }
+    
+    public init(
+        items: Binding<[V]>,
+        selection: Binding<Set<V>>, id: KeyPath<V, ID>,
+        addText: LocalizedStringKey, removeText: LocalizedStringKey,
+        addAction: @escaping () -> (),
+        @ViewBuilder content: @escaping (Binding<V>) -> ContentA
+    ) where Header == EmptyView, ContentB == EmptyView, Footer == EmptyView {
+        self.init(
+            items: items,
+            selection: selection, id: id,
+            addText: addText, removeText: removeText,
+            addAction: addAction,
+            content: content,
+            emptyView: {
+                EmptyView()
+            }
         )
     }
 
     public var body: some View {
-        LuminareSection(header, disablePadding: true) {
+        LuminareSection(disablePadding: true) {
             HStack(spacing: 2) {
                 Button(addText) {
                     addAction()
                 }
+                .buttonStyle(LuminareButtonStyle())
 
                 Button(removeText) {
                     if !selection.isEmpty {
@@ -143,13 +384,14 @@ public struct LuminareList<ContentA, ContentB, V, ID>: View where ContentA: View
                             items: $items,
                             selection: $selection,
                             item: item,
-                            content: content,
                             firstItem: $firstItem,
                             lastItem: $lastItem,
-                            canRefreshSelection: $canRefreshSelection
+                            canRefreshSelection: $canRefreshSelection,
+                            content: content
                         )
                     }
-                    // .onDelete(perform: deleteItems) // deleteItems crashes Loop, need to be investigated further
+                    // TODO: `deleteItems` crashes Loop, need to be investigated further
+                    // .onDelete(perform: deleteItems)
                     .onMove { indices, newOffset in
                         withAnimation(LuminareConstants.animation) {
                             items.move(fromOffsets: indices, toOffset: newOffset)
@@ -166,6 +408,10 @@ public struct LuminareList<ContentA, ContentB, V, ID>: View where ContentA: View
                 .scrollDisabled(true)
                 .listStyle(.plain)
             }
+        } header: {
+            header()
+        } footer: {
+            footer()
         }
         .onChange(of: clickedOutsideFlag) { _ in
             withAnimation(LuminareConstants.animation) {
@@ -191,6 +437,7 @@ public struct LuminareList<ContentA, ContentB, V, ID>: View where ContentA: View
         }
     }
 
+    // TODO: investigate this
     // #warning("onDelete & deleteItems WILL crash on macOS 14.5, but it's fine on 14.4 and below.")
     // private func deleteItems(at offsets: IndexSet) {
     //  withAnimation {
@@ -234,10 +481,10 @@ public struct LuminareList<ContentA, ContentB, V, ID>: View where ContentA: View
 }
 
 struct LuminareListItem<Content, V>: View where Content: View, V: Hashable {
-    @Environment(\.tintColor) var tintColor
+    @Environment(\.tintColor) private var tintColor
 
-    @Binding var item: V
-    let content: (Binding<V>) -> Content
+    @Binding private var item: V
+    @ViewBuilder private let content: (Binding<V>) -> Content
 
     @Binding var items: [V]
     @Binding var selection: Set<V>
@@ -246,31 +493,31 @@ struct LuminareListItem<Content, V>: View where Content: View, V: Hashable {
     @Binding var lastItem: V?
     @Binding var canRefreshSelection: Bool
 
-    @State var isHovering = false
+    @State private var isHovering = false
 
     let cornerRadius: CGFloat = 2
     let maxLineWidth: CGFloat = 1.5
-    @State var lineWidth: CGFloat = .zero
+    @State private var lineWidth: CGFloat = .zero
 
     let maxTintOpacity: CGFloat = 0.15
-    @State var tintOpacity: CGFloat = .zero
+    @State private var tintOpacity: CGFloat = .zero
 
     init(
         items: Binding<[V]>,
         selection: Binding<Set<V>>,
         item: Binding<V>,
-        @ViewBuilder content: @escaping (Binding<V>) -> Content,
         firstItem: Binding<V?>,
         lastItem: Binding<V?>,
-        canRefreshSelection: Binding<Bool>
+        canRefreshSelection: Binding<Bool>,
+        @ViewBuilder content: @escaping (Binding<V>) -> Content
     ) {
         self._items = items
         self._selection = selection
         self._item = item
-        self.content = content
         self._firstItem = firstItem
         self._lastItem = lastItem
         self._canRefreshSelection = canRefreshSelection
+        self.content = content
     }
 
     var body: some View {
@@ -480,3 +727,23 @@ extension NSTableView {
         selectionHighlightStyle = .none
     }
 }
+
+#Preview {
+    LuminareList(
+        items: .constant([37, 42, 1, 0]),
+        selection: .constant([0, 42]),
+        id: \.self,
+        addText: .init("Add"),
+        removeText: .init("Remove")
+    ) {
+    } content: { num in
+        Text("\(num.wrappedValue)")
+    } emptyView: {
+        Text("Empty")
+    } header: {
+        Text("Header")
+    } footer: {
+        Text("Footer")
+    }
+    .padding()
+}
diff --git a/Sources/Luminare/Components/LuminarePicker.swift b/Sources/Luminare/Components/LuminarePicker.swift
index e827796..d8257e4 100644
--- a/Sources/Luminare/Components/LuminarePicker.swift
+++ b/Sources/Luminare/Components/LuminarePicker.swift
@@ -11,8 +11,9 @@ public protocol LuminarePickerData {
     var selectable: Bool { get }
 }
 
-public struct LuminarePicker<Content, V>: View where Content: View, V: Equatable {
-    @Environment(\.tintColor) var tintColor
+public struct LuminarePicker<Content, V>: View 
+where Content: View, V: Equatable {
+    @Environment(\.tintColor) private var tintColor
 
     let cornerRadius: CGFloat = 12
     let innerPadding: CGFloat = 4
@@ -25,9 +26,9 @@ public struct LuminarePicker<Content, V>: View where Content: View, V: Equatable
     @Binding var selectedItem: V
     @State var internalSelection: V
 
-    let roundTop: Bool
-    let roundBottom: Bool
-    let content: (V) -> Content
+    private let roundTop: Bool
+    private let roundBottom: Bool
+    @ViewBuilder private let content: (V) -> Content
 
     public init(
         elements: [V],
@@ -74,12 +75,13 @@ public struct LuminarePicker<Content, V>: View where Content: View, V: Equatable
                 .frame(minHeight: 150)
             }
         }
-        // This will improve animation performance
+        // this improves animation performance
         .onChange(of: internalSelection) { _ in
             withAnimation(LuminareConstants.animation) {
                 selectedItem = internalSelection
             }
         }
+        .buttonStyle(LuminareButtonStyle())
     }
 
     @ViewBuilder func pickerButton(i: Int, j: Int) -> some View {
@@ -123,35 +125,44 @@ public struct LuminarePicker<Content, V>: View where Content: View, V: Equatable
     }
 
     func getShape(i: Int, j: Int) -> some InsettableShape {
-        if j == 0, i == 0, roundTop { // Top left
+        // top left
+        if j == 0, i == 0, roundTop {
             UnevenRoundedRectangle(
                 topLeadingRadius: cornerRadius - innerPadding,
                 bottomLeadingRadius: (rowsIndex == 0 && roundBottom) ? cornerRadius - innerPadding : innerCornerRadius,
                 bottomTrailingRadius: innerCornerRadius,
                 topTrailingRadius: (columnsIndex == 0) ? cornerRadius - innerPadding : innerCornerRadius
             )
-        } else if j == 0, i == rowsIndex, roundBottom { // Bottom left
+        }
+        // bottom left
+        else if j == 0, i == rowsIndex, roundBottom {
             UnevenRoundedRectangle(
                 topLeadingRadius: innerCornerRadius,
                 bottomLeadingRadius: cornerRadius - innerPadding,
                 bottomTrailingRadius: (columnsIndex == 0) ? cornerRadius - innerPadding : innerCornerRadius,
                 topTrailingRadius: innerCornerRadius
             )
-        } else if j == columnsIndex, i == 0, roundTop { // Top right
+        }
+        // top right
+        else if j == columnsIndex, i == 0, roundTop {
             UnevenRoundedRectangle(
                 topLeadingRadius: innerCornerRadius,
                 bottomLeadingRadius: innerCornerRadius,
                 bottomTrailingRadius: (rowsIndex == 0 && roundBottom) ? cornerRadius - innerPadding : innerCornerRadius,
                 topTrailingRadius: cornerRadius - innerPadding
             )
-        } else if j == columnsIndex, i == rowsIndex, roundBottom { // Bottom right
+        }
+        // bottom right
+        else if j == columnsIndex, i == rowsIndex, roundBottom {
             UnevenRoundedRectangle(
                 topLeadingRadius: innerCornerRadius,
                 bottomLeadingRadius: innerCornerRadius,
                 bottomTrailingRadius: cornerRadius - innerPadding,
                 topTrailingRadius: innerCornerRadius
             )
-        } else {
+        }
+        // regular
+        else {
             UnevenRoundedRectangle(
                 topLeadingRadius: innerCornerRadius,
                 bottomLeadingRadius: innerCornerRadius,
@@ -170,3 +181,20 @@ extension Array {
             }
     }
 }
+
+#Preview {
+    LuminareSection {
+        Text("Pick Your Lucky Number")
+            .bold()
+            .font(.title3)
+            .padding()
+        
+        LuminarePicker(
+            elements: Array(30..<50),
+            selection: .constant(42)
+        ) { num in
+            Text("\(num)")
+        }
+    }
+    .padding()
+}
diff --git a/Sources/Luminare/Components/LuminareSection.swift b/Sources/Luminare/Components/LuminareSection.swift
index db77906..9e7648f 100644
--- a/Sources/Luminare/Components/LuminareSection.swift
+++ b/Sources/Luminare/Components/LuminareSection.swift
@@ -7,35 +7,192 @@
 
 import SwiftUI
 
-public struct LuminareSection<Content: View>: View {
-    let headerSpacing: CGFloat = 8
-    let cornerRadius: CGFloat = 12
-    let innerPadding: CGFloat = 4
-
-    let header: LocalizedStringKey?
+public struct LuminareSection<Header, Content, Footer>: View where Header: View, Content: View, Footer: View {
     let disablePadding: Bool
     let showDividers: Bool
     let noBorder: Bool
-    let content: () -> Content
+    
+    let headerSpacing: CGFloat
+    let footerSpacing: CGFloat
+    let cornerRadius: CGFloat
+    let innerPadding: CGFloat
+    
+    @ViewBuilder let content: () -> Content
+    @ViewBuilder let header: () -> Header
+    @ViewBuilder let footer: () -> Footer
 
-    public init(_ header: LocalizedStringKey? = nil, disablePadding: Bool = false, showDividers: Bool = true, noBorder: Bool = false, @ViewBuilder _ content: @escaping () -> Content) {
-        self.header = header
+    public init(
+        disablePadding: Bool = false,
+        showDividers: Bool = true,
+        noBorder: Bool = false,
+        headerSpacing: CGFloat = 8, footerSpacing: CGFloat = 8,
+        cornerRadius: CGFloat = 12, innerPadding: CGFloat = 4,
+        @ViewBuilder content: @escaping () -> Content,
+        @ViewBuilder header: @escaping () -> Header,
+        @ViewBuilder footer: @escaping () -> Footer
+    ) {
         self.disablePadding = disablePadding
         self.showDividers = showDividers
         self.noBorder = noBorder
+        self.headerSpacing = headerSpacing
+        self.footerSpacing = footerSpacing
+        self.cornerRadius = cornerRadius
+        self.innerPadding = innerPadding
         self.content = content
+        self.header = header
+        self.footer = footer
+    }
+    
+    public init(
+        _ headerKey: LocalizedStringKey,
+        _ footerKey: LocalizedStringKey,
+        disablePadding: Bool = false,
+        showDividers: Bool = true,
+        noBorder: Bool = false,
+        headerSpacing: CGFloat = 8, footerSpacing: CGFloat = 8,
+        cornerRadius: CGFloat = 12, innerPadding: CGFloat = 4,
+        @ViewBuilder content: @escaping () -> Content
+    ) where Header == Text, Footer == Text {
+        self.init(
+            disablePadding: disablePadding,
+            showDividers: showDividers,
+            noBorder: noBorder,
+            headerSpacing: headerSpacing, footerSpacing: footerSpacing,
+            cornerRadius: cornerRadius, innerPadding: innerPadding
+        ) {
+            content()
+        } header: {
+            Text(headerKey)
+        } footer: {
+            Text(footerKey)
+        }
+    }
+    
+    public init(
+        disablePadding: Bool = false,
+        showDividers: Bool = true,
+        noBorder: Bool = false,
+        headerSpacing: CGFloat = 8, footerSpacing: CGFloat = 8,
+        cornerRadius: CGFloat = 12, innerPadding: CGFloat = 4,
+        @ViewBuilder content: @escaping () -> Content,
+        @ViewBuilder header: @escaping () -> Header
+    ) where Footer == EmptyView {
+        self.init(
+            disablePadding: disablePadding,
+            showDividers: showDividers,
+            noBorder: noBorder,
+            headerSpacing: headerSpacing, footerSpacing: footerSpacing,
+            cornerRadius: cornerRadius, innerPadding: innerPadding
+        ) {
+            content()
+        } header: {
+            header()
+        } footer: {
+            EmptyView()
+        }
+    }
+    
+    public init(
+        headerKey: LocalizedStringKey,
+        disablePadding: Bool = false,
+        showDividers: Bool = true,
+        noBorder: Bool = false,
+        headerSpacing: CGFloat = 8, footerSpacing: CGFloat = 8,
+        cornerRadius: CGFloat = 12, innerPadding: CGFloat = 4,
+        @ViewBuilder content: @escaping () -> Content
+    ) where Header == Text, Footer == EmptyView {
+        self.init(
+            disablePadding: disablePadding,
+            showDividers: showDividers,
+            noBorder: noBorder,
+            headerSpacing: headerSpacing, footerSpacing: footerSpacing,
+            cornerRadius: cornerRadius, innerPadding: innerPadding
+        ) {
+            content()
+        } header: {
+            Text(headerKey)
+        }
+    }
+    
+    public init(
+        disablePadding: Bool = false,
+        showDividers: Bool = true,
+        noBorder: Bool = false,
+        headerSpacing: CGFloat = 8, footerSpacing: CGFloat = 8,
+        cornerRadius: CGFloat = 12, innerPadding: CGFloat = 4,
+        @ViewBuilder content: @escaping () -> Content,
+        @ViewBuilder footer: @escaping () -> Footer
+    ) where Header == EmptyView {
+        self.init(
+            disablePadding: disablePadding,
+            showDividers: showDividers,
+            noBorder: noBorder,
+            headerSpacing: headerSpacing, footerSpacing: footerSpacing,
+            cornerRadius: cornerRadius, innerPadding: innerPadding
+        ) {
+            content()
+        } header: {
+            EmptyView()
+        } footer: {
+            footer()
+        }
+    }
+    
+    public init(
+        footerKey: LocalizedStringKey,
+        disablePadding: Bool = false,
+        showDividers: Bool = true,
+        noBorder: Bool = false,
+        headerSpacing: CGFloat = 8, footerSpacing: CGFloat = 8,
+        cornerRadius: CGFloat = 12, innerPadding: CGFloat = 4,
+        @ViewBuilder content: @escaping () -> Content
+    ) where Header == EmptyView, Footer == Text {
+        self.init(
+            disablePadding: disablePadding,
+            showDividers: showDividers,
+            noBorder: noBorder,
+            headerSpacing: headerSpacing, footerSpacing: footerSpacing,
+            cornerRadius: cornerRadius, innerPadding: innerPadding
+        ) {
+            content()
+        } footer: {
+            Text(footerKey)
+        }
+    }
+    
+    public init(
+        disablePadding: Bool = false,
+        showDividers: Bool = true,
+        noBorder: Bool = false,
+        headerSpacing: CGFloat = 8, footerSpacing: CGFloat = 8,
+        cornerRadius: CGFloat = 12, innerPadding: CGFloat = 4,
+        @ViewBuilder content: @escaping () -> Content
+    ) where Header == EmptyView, Footer == EmptyView {
+        self.init(
+            disablePadding: disablePadding,
+            showDividers: showDividers,
+            noBorder: noBorder,
+            headerSpacing: headerSpacing, footerSpacing: footerSpacing,
+            cornerRadius: cornerRadius, innerPadding: innerPadding
+        ) {
+            content()
+        } header: {
+            EmptyView()
+        } footer: {
+            EmptyView()
+        }
     }
 
     public var body: some View {
-        VStack(spacing: headerSpacing) {
-            if let header {
-                HStack {
-                    Text(header)
-                    Spacer()
-                }
-                .foregroundStyle(.secondary)
+        VStack(spacing: 0) {
+            if Header.self != EmptyView.self {
+                header()
+                    .foregroundStyle(.secondary)
+                
+                Spacer()
+                    .frame(height: headerSpacing)
             }
-
+            
             if noBorder {
                 content()
             } else {
@@ -50,6 +207,45 @@ public struct LuminareSection<Content: View>: View {
                         .strokeBorder(.quaternary, lineWidth: 1)
                 }
             }
+            
+            if Footer.self != EmptyView.self {
+                Spacer()
+                    .frame(height: footerSpacing)
+                
+                footer()
+                    .foregroundStyle(.secondary)
+            }
+
+        }
+    }
+}
+
+#Preview {
+    LuminareSection {
+        Text("Content")
+            .frame(height: 200)
+    } header: {
+        HStack(alignment: .bottom) {
+            Text("Header")
+            
+            Spacer()
+            
+            Button {
+                
+            } label: {
+                Text("Action")
+                    .font(.caption)
+                    .frame(height: 24)
+                    .padding(.horizontal, 8)
+            }
+            .buttonStyle(LuminareCompactButtonStyle(extraCompact: true))
+        }
+    } footer: {
+        HStack {
+            Text("Footer")
+            
+            Spacer()
         }
     }
+    .padding()
 }
diff --git a/Sources/Luminare/Components/LuminareSliderPicker.swift b/Sources/Luminare/Components/LuminareSliderPicker.swift
deleted file mode 100644
index 4b2e655..0000000
--- a/Sources/Luminare/Components/LuminareSliderPicker.swift
+++ /dev/null
@@ -1,79 +0,0 @@
-//
-//  LuminareSliderPicker.swift
-//
-//
-//  Created by Kai Azim on 2024-04-14.
-//
-
-import SwiftUI
-
-public struct LuminareSliderPicker<V>: View where V: Equatable {
-    let height: CGFloat = 70
-
-    let title: LocalizedStringKey
-
-    let options: [V]
-    @Binding var selection: V
-
-    let label: (V) -> LocalizedStringKey
-
-    let horizontalPadding: CGFloat = 8
-
-    public init(_ title: LocalizedStringKey, _ options: [V], selection: Binding<V>, label: @escaping (V) -> LocalizedStringKey) {
-        self.title = title
-        self.options = options
-        self._selection = selection
-        self.label = label
-    }
-
-    public var body: some View {
-        VStack {
-            HStack {
-                Text(title)
-
-                Spacer()
-
-                labelView()
-            }
-
-            Slider(
-                value: Binding<Double>(
-                    get: {
-                        Double(options.firstIndex(where: { $0 == selection }) ?? 0)
-                    },
-                    set: { newIndex in
-                        selection = options[Int(newIndex)]
-                    }
-                ),
-                in: 0...Double(options.count - 1),
-                step: 1
-            )
-        }
-        .padding(.horizontal, horizontalPadding)
-        .frame(height: height)
-        .animation(LuminareConstants.animation, value: selection)
-    }
-
-    @ViewBuilder
-    func labelView() -> some View {
-        HStack {
-            Text(label(selection))
-                .contentTransition(.numericText())
-                .multilineTextAlignment(.trailing)
-                .monospaced()
-                .padding(4)
-                .padding(.horizontal, 4)
-                .background {
-                    ZStack {
-                        Capsule()
-                            .strokeBorder(.quaternary, lineWidth: 1)
-
-                        Capsule()
-                            .foregroundStyle(.quinary.opacity(0.5))
-                    }
-                }
-                .fixedSize()
-                .clipShape(.capsule)
-        }
-    }
-}
diff --git a/Sources/Luminare/Components/LuminareTextField.swift b/Sources/Luminare/Components/LuminareTextField.swift
index fa7d5de..2c69762 100644
--- a/Sources/Luminare/Components/LuminareTextField.swift
+++ b/Sources/Luminare/Components/LuminareTextField.swift
@@ -7,26 +7,39 @@
 
 import SwiftUI
 
-public struct LuminareTextField<F>: View where F: ParseableFormatStyle, F.FormatOutput == String {
-    let elementMinHeight: CGFloat = 34
-    let horizontalPadding: CGFloat = 8
+public struct LuminareTextField<F>: View
+where F: ParseableFormatStyle, F.FormatOutput == String {
+    private let elementMinHeight: CGFloat
+    private let horizontalPadding: CGFloat
+    
+    @Binding private var value: F.FormatInput?
+    private let format: F
+    private let placeholder: LocalizedStringKey
 
-    @Binding var value: F.FormatInput?
-    var format: F
-    let placeholder: LocalizedStringKey
-    let onSubmit: (() -> ())?
+    @State private var monitor: Any?
 
-    @State var monitor: Any?
-
-    public init(_ placeholder: LocalizedStringKey, value: Binding<F.FormatInput?>, format: F, onSubmit: (() -> ())? = nil) {
+    public init(
+        _ placeholder: LocalizedStringKey,
+        value: Binding<F.FormatInput?>, format: F,
+        elementMinHeight: CGFloat = 34, horizontalPadding: CGFloat = 8
+    ) {
+        self.elementMinHeight = elementMinHeight
+        self.horizontalPadding = horizontalPadding
         self._value = value
         self.format = format
         self.placeholder = placeholder
-        self.onSubmit = onSubmit
     }
 
-    public init(_ placeholder: LocalizedStringKey, text: Binding<String>, onSubmit: (() -> ())? = nil) where F == StringFormatStyle {
-        self.init(placeholder, value: .init(text), format: StringFormatStyle(), onSubmit: onSubmit)
+    public init(
+        _ placeholder: LocalizedStringKey,
+        text: Binding<String>,
+        elementMinHeight: CGFloat = 34, horizontalPadding: CGFloat = 8
+    ) where F == StringFormatStyle {
+        self.init(
+            placeholder,
+            value: .init(text), format: StringFormatStyle(),
+            elementMinHeight: elementMinHeight, horizontalPadding: horizontalPadding
+        )
     }
 
     public var body: some View {
@@ -34,12 +47,6 @@ public struct LuminareTextField<F>: View where F: ParseableFormatStyle, F.Format
             .padding(.horizontal, horizontalPadding)
             .frame(minHeight: elementMinHeight)
             .textFieldStyle(.plain)
-            .onSubmit {
-                if let onSubmit {
-                    onSubmit()
-                }
-            }
-
             .onAppear {
                 guard monitor != nil else { return }
 
@@ -64,3 +71,10 @@ public struct LuminareTextField<F>: View where F: ParseableFormatStyle, F.Format
             }
     }
 }
+
+#Preview {
+    LuminareSection {
+        LuminareTextField("Text Field", text: .constant("Test"))
+    }
+    .padding()
+}
diff --git a/Sources/Luminare/Components/LuminareToggle.swift b/Sources/Luminare/Components/LuminareToggle.swift
deleted file mode 100644
index 0d54018..0000000
--- a/Sources/Luminare/Components/LuminareToggle.swift
+++ /dev/null
@@ -1,57 +0,0 @@
-//
-//  LuminareToggle.swift
-//
-//
-//  Created by Kai Azim on 2024-04-02.
-//
-
-import SwiftUI
-
-public struct LuminareToggle: View {
-    @Environment(\.tintColor) var tintColor
-
-    let elementMinHeight: CGFloat = 34
-    let horizontalPadding: CGFloat = 8
-
-    let title: LocalizedStringKey
-    let infoView: LuminareInfoView?
-    @Binding var value: Bool
-
-    let disabled: Bool
-    @State var isShowingDescription: Bool = false
-
-    public init(
-        _ title: LocalizedStringKey,
-        info: LuminareInfoView? = nil,
-        isOn value: Binding<Bool>,
-        disabled: Bool = false
-    ) {
-        self.title = title
-        self.infoView = info
-        self._value = value
-        self.disabled = disabled
-    }
-
-    public var body: some View {
-        HStack {
-            HStack(spacing: 0) {
-                Text(title)
-
-                if let infoView {
-                    infoView
-                }
-            }
-            .fixedSize(horizontal: false, vertical: true)
-
-            Spacer()
-
-            Toggle("", isOn: $value.animation(LuminareConstants.animation))
-                .labelsHidden()
-                .controlSize(.small)
-                .toggleStyle(.switch)
-                .disabled(disabled)
-        }
-        .padding(.horizontal, horizontalPadding)
-        .frame(minHeight: elementMinHeight)
-    }
-}
diff --git a/Sources/Luminare/Components/Popover/PopoverHolder.swift b/Sources/Luminare/Components/Popover/PopoverHolder.swift
index 7337b00..1183742 100644
--- a/Sources/Luminare/Components/Popover/PopoverHolder.swift
+++ b/Sources/Luminare/Components/Popover/PopoverHolder.swift
@@ -44,9 +44,9 @@ public struct PopoverHolder<Content: View>: NSViewRepresentable {
             super.init()
         }
 
-        // View is optional bevause it is not needed to close the popup
+        // view is optional bevause it is not needed to close the popup
         func setVisible(_ isPresented: Bool, in view: NSView? = nil) {
-            // If we're going to be closing the window
+            // if we're going to be closing the window
             guard isPresented else {
                 popover?.resignKey()
                 return
@@ -58,22 +58,22 @@ public struct PopoverHolder<Content: View>: NSViewRepresentable {
                 initializePopup()
                 guard let popover else { return }
 
-                // Popover size
+                // popover size
                 let targetSize = NSSize(width: 300, height: 300)
                 let extraPadding: CGFloat = 10
 
-                // Get coordinates to place popopver
+                // get coordinates to place popopver
                 guard let windowFrame = view.window?.frame else { return }
                 let viewBounds = view.bounds
-                var targetPoint = view.convert(viewBounds, to: nil).origin // Convert to window coordinates
+                var targetPoint = view.convert(viewBounds, to: nil).origin // convert to window coordinates
                 originalYPoint = targetPoint.y
 
-                // Correct popover position
+                // correct popover position
                 targetPoint.y += windowFrame.minY
                 targetPoint.x += windowFrame.minX
                 targetPoint.y -= targetSize.height + extraPadding
 
-                // Set position and show popover
+                // set position and show popover
                 popover.setContentSize(targetSize)
                 popover.setFrameOrigin(targetPoint)
                 popover.makeKeyAndOrderFront(nil)
diff --git a/Sources/Luminare/Utilities/StringFormatStyle.swift b/Sources/Luminare/Utilities/StringFormatStyle.swift
index c786a46..02b2f5e 100644
--- a/Sources/Luminare/Utilities/StringFormatStyle.swift
+++ b/Sources/Luminare/Utilities/StringFormatStyle.swift
@@ -33,6 +33,7 @@ public struct StringFormatStyle: Codable, Equatable, Hashable, ParseableFormatSt
     public enum HexStrategy: Codable, Equatable, Hashable, ParseStrategy {
         public typealias ParseInput = String
         public typealias ParseOutput = String
+        public typealias Lowercased = Bool
 
         /// `#42ab0E` -> `42ab0e`
         case lowercased
@@ -45,6 +46,9 @@ public struct StringFormatStyle: Codable, Equatable, Hashable, ParseableFormatSt
 
         /// `42ab0E` -> `#42AB0E`
         case uppercasedWithWell
+        
+        /// Customized case and prefix characters.
+        case custom(Lowercased, String)
 
         public func parse(_ value: String) throws -> String {
             switch self {
@@ -58,6 +62,8 @@ public struct StringFormatStyle: Codable, Equatable, Hashable, ParseableFormatSt
                 try "#" + Self.lowercased.parse(value)
             case .uppercasedWithWell:
                 try "#" + Self.uppercased.parse(value)
+            case .custom(let lowercased, let prefix):
+                try prefix + (lowercased ? Self.lowercased : Self.uppercased).parse(value)
             }
         }
     }