diff --git a/blog/2024-07-23-webforj-v24.10/24.10.md b/blog/2024-07-23-webforj-v24.10/24.10.md
index 5fdb53294..3999bda82 100644
--- a/blog/2024-07-23-webforj-v24.10/24.10.md
+++ b/blog/2024-07-23-webforj-v24.10/24.10.md
@@ -80,7 +80,7 @@ The `ColumnsLayout` component has come to webforJ in `24.10`, and is designed to
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/columnslayout?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/columnslayout/ColumnsLayoutView.java'
-height = '300px'
+height = '450px'
 />
 
 In addition to dynamic column adjustments, `ColumnsLayout` supports customizable alignment and spacing options. The `ColumnsLayout` component is designed to be intuitive and easy to use. It includes built-in methods for setting column spans and positions, making it simple to create complex layouts with minimal effort.
diff --git a/docs/building-ui/composite-components.md b/docs/building-ui/composite-components.md
index 1454fc96a..2426e0101 100644
--- a/docs/building-ui/composite-components.md
+++ b/docs/building-ui/composite-components.md
@@ -87,5 +87,5 @@ This component is then instantiated and utilized in an Application, and allows f
 path='https://demo.webforj.com/webapp/controlsamples/compositedemo?' 
 cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/compositeDemo.css'
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/CompositeDemoView.java'
-height='500px'
+height='550px'
 />
diff --git a/docs/building-ui/elements.md b/docs/building-ui/elements.md
index 01197319a..ecd97e59a 100644
--- a/docs/building-ui/elements.md
+++ b/docs/building-ui/elements.md
@@ -15,6 +15,7 @@ The `Element` component cannot be extended, and is not the base component for al
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/elementinputdemo?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/element/ElementInputDemoView.java'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/element/elementInput.css'
 />
 
 ## Adding events
@@ -26,7 +27,8 @@ There are also additional options to further customize events by using the Event
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/elementinputevent?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/element/ElementInputEventView.java'
-height='175px'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/element/elementInputEvent.css'
+height='240px'
 />
 
 ## Component interaction
@@ -48,6 +50,7 @@ The `Element` component supports the composition of child components. Developers
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/elementinputtext?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/element/ElementInputTextView.java'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/element/elementInput.css'
 height='175px'
 />
 
@@ -97,7 +100,8 @@ In the demo below, an event is added to an HTML `Button`. This event is then fir
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/elementinputfunction?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/element/ElementInputFunctionView.java'
-height='175px'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/element/elementInput.css'
+height='240px'
 />
 
 ## Executing JavaScript
diff --git a/docs/components/columns-layout.md b/docs/components/columns-layout.md
index c99ebd64c..c2208b2f8 100644
--- a/docs/components/columns-layout.md
+++ b/docs/components/columns-layout.md
@@ -21,7 +21,7 @@ When first instantiated, the `ColumnsLayout` uses two columns to display items a
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/columnslayout?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/columnslayout/ColumnsLayoutView.java'
-height="350px"
+height="450px"
 />
 
 ## Breakpoints
@@ -148,7 +148,7 @@ In the following demonstration, notice that when the `"medium"` breakpoint is tr
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/columnslayoutspancolumn?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/columnslayout/ColumnsLayoutSpanColumnView.java'
-height="350px"
+height="375px"
 />
 
 :::tip Avoid collisions
@@ -175,7 +175,7 @@ Available `Alignment` options include:
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/columnslayoutalignment?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/columnslayout/ColumnsLayoutAlignmentView.java'
-height="350px"
+height="500px"
 />
 
 In the demo above, the `Submit` button has been given `ColumnsLayout.Alignment.END` to ensure that it appears at the end, or in this case to the right, of its column.
@@ -209,5 +209,5 @@ Building responsive and attractive layouts is possible using both the [`FlexLayo
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/columnslayoutform?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/columnslayout/ColumnsLayoutFormView.java'
-height="450px"
+height="700px"
 />
\ No newline at end of file
diff --git a/docs/components/flex-layout.md b/docs/components/flex-layout.md
index de0eee9d4..58ad0f7f8 100644
--- a/docs/components/flex-layout.md
+++ b/docs/components/flex-layout.md
@@ -105,7 +105,8 @@ It's important to note that the order property only affects the visual order of
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/flexorder?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/flexlayout/item/FlexOrderView.java'
-height="200px"
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/flexlayout/container/flexContainerBuilder.css'
+height="320px"
 />
 
 #### Self alignment
@@ -123,6 +124,7 @@ This property is especially useful when you need to align a specific item differ
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/flexselfalign?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/flexlayout/item/FlexSelfAlignView.java'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/flexlayout/container/flexContainerBuilder.css'
 height="350px"
 />
 
@@ -141,7 +143,7 @@ The following demo allows you to select one or more boxes and change the `Item B
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/flexbasis?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/flexlayout/FlexBasisView.java'
-height="250px"
+height="300px"
 />
 
 #### Flex grow / shrink
@@ -162,7 +164,8 @@ Similarly, when a container does not have enough space to accommodate its conten
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/flexlayout?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/flexlayout/FlexLayoutView.java'
-height="500px"
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/flexlayout/flexLayout.css'
+height="620px"
 />
 
 :::tip
diff --git a/docs/components/google-charts.md b/docs/components/google-charts.md
index c0c3e856b..70727a74e 100644
--- a/docs/components/google-charts.md
+++ b/docs/components/google-charts.md
@@ -31,6 +31,7 @@ The `GoogleChart` class is a comprehensive solution for embedding rich, interact
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/chart?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/googlecharts/ChartView.java'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/googlecharts/chart.css'
 height='300px'
 />
 
@@ -149,7 +150,7 @@ Invoke `redraw()` in scenarios such as:
 path='https://demo.webforj.com/webapp/controlsamples/chartredraw?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/googlecharts/ChartRedrawView.java'
 cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/googlecharts/chartRedraw.css'
-height='500px'
+height='650px'
 />
 
 <!-- tabs={['ChartDemoRedraw.java', 'redrawchart_styles.css']} -->
diff --git a/docs/components/lists/choice-box.md b/docs/components/lists/choice-box.md
index 8453e6e84..565732c48 100644
--- a/docs/components/lists/choice-box.md
+++ b/docs/components/lists/choice-box.md
@@ -12,12 +12,7 @@ slug: choicebox
 
 <ParentLink parent="List" />
 
-The `ChoiceBox` component is a user interface element designed to present users with a list of options or choices. Users can select a single option from this list, typically by clicking the `ChoiceBox`, which triggers the display of a dropdown list containing available choices. Users can also interact with the `ChoiceBox` with the arrow keys. When a user makes a selection, the chosen option is then displayed in the `ChoiceBox` button. 
-
-<!-- <AppLayoutViewer path='https://demo.webforj.com/webapp/controlsamples?class=componentdemos.choiceboxdemos.ChoiceBoxDemo' mobile='false'
-javaE='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/componentdemos/choiceboxdemos/ChoiceBoxDemo.java'
-cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/applayoutstyles/applayout_styles.css'
-/> -->
+The `ChoiceBox` component is a user interface element designed to present users with a list of options or choices. Users can select a single option from this list, typically by clicking the `ChoiceBox`, which triggers the display of a dropdown list containing available choices. Users can also interact with the `ChoiceBox` with the arrow keys. When a user makes a selection, the chosen option is then displayed in the `ChoiceBox` button.
 
 ## Usages
 `ChoiceBox` components are used for various purposes, such as selecting items from a menu, choosing from a list of categories, or picking options from predefined sets. They provide an organized and visually pleasing way for users to make selections, particularly when there are multiple options available. Common usages include:
@@ -68,7 +63,7 @@ Using a number that is less than or equal to 0 will result in unsetting this pro
 path='https://demo.webforj.com/webapp/controlsamples/choiceboxmaxrow?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/lists/choicebox/ChoiceboxMaxRowView.java'
 javaC='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/code_snippets/choicebox/MaxRow.txt'
-height='250px'
+height='450px'
 />
 
 ## Opening and closing
diff --git a/docs/components/lists/combo-box.md b/docs/components/lists/combo-box.md
index 5fe56ab13..73848d313 100644
--- a/docs/components/lists/combo-box.md
+++ b/docs/components/lists/combo-box.md
@@ -82,7 +82,7 @@ Using a number that is less than or equal to 0 will result in unsetting this pro
 path='https://demo.webforj.com/webapp/controlsamples/comboboxmaxrow?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/lists/combobox/ComboBoxMaxRowView.java'
 javaC='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/code_snippets/combobox/MaxRow.txt'
-height='250px'
+height='450px'
 />
 
 ## Opening and closing
diff --git a/docs/components/splitter.md b/docs/components/splitter.md
index a2b80921e..3dd603236 100644
--- a/docs/components/splitter.md
+++ b/docs/components/splitter.md
@@ -22,7 +22,6 @@ The `Splitter` component, designed to divide and resize content within your app,
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/splitterbasic?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/splitter/SplitterBasicView.java'
-urls={['https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/layout_demos/splitter/SplitterBox.java',]}
 height='300px'
 />
 
@@ -39,7 +38,6 @@ You can specify sizes using any valid CSS units, as shown below:
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/splitterminmax?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/splitter/SplitterMinMaxView.java'
-urls={['https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/layout_demos/splitter/SplitterBox.java',]}
 height='300px'
 />
 
@@ -52,7 +50,6 @@ To configure the orientation, use the supported orientations Enum to specify whe
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/splitterorientation?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/splitter/SplitterOrientationView.java'
-urls={['https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/layout_demos/splitter/SplitterBox.java',]}
 height='300px'
 />
 
@@ -63,7 +60,6 @@ To set the initial position of the divider bar in the `Splitter` component, use
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/splitterposition?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/splitter/SplitterPositionView.java'
-urls={['https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/layout_demos/splitter/SplitterBox.java',]}
 height='300px'
 />
 
@@ -76,7 +72,6 @@ To nest Splitter components, instantiate new `Splitter` instances and add them a
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/splitternested?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/splitter/SplitterNestedView.java'
-urls={['https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/layout_demos/splitter/SplitterBox.java',]}
 height='300px'
 />
 
@@ -93,7 +88,6 @@ To programmatically revert the `Splitter` back to default settings and dimension
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/splitterautosave?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/splitter/SplitterAutoSaveView.java'
-urls={['https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/java/layout_demos/splitter/SplitterBox.java',]}
 height='400px'
 />
 
diff --git a/docs/components/table/table_rendering.md b/docs/components/table/table_rendering.md
index f31ef1010..4548ea9a0 100644
--- a/docs/components/table/table_rendering.md
+++ b/docs/components/table/table_rendering.md
@@ -99,6 +99,7 @@ Below is an example of a `Table` that uses renderers to display rich content:
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/tablerichcontent?' 
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/table/TableRichContentView.java'
+cssURL='https://raw.githubusercontent.com/webforj/ControlSamples/main/src/main/resources/css/table/tableRichContent.css'
 urls={['https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/table/MusicRecord.java', 
 'https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/table/Service.java']}
 height='600px'
diff --git a/docs/components/toast.md b/docs/components/toast.md
index b351b401f..6445c76e5 100644
--- a/docs/components/toast.md
+++ b/docs/components/toast.md
@@ -95,7 +95,7 @@ toast.open();
 <ComponentDemo 
 path='https://demo.webforj.com/webapp/controlsamples/toastplacement?'
 javaE='https://raw.githubusercontent.com/webforj/webforj-docs-samples/refs/heads/main/src/main/java/com/webforj/samples/views/toast/ToastPlacementView.java'
-height='300px'
+height='320px'
 />
 
 By customizing the placement of your `Toast` notifications, you can ensure that users receive information in a way that is appropriate for any given app, screen layout, and context.