diff --git a/docs/js/components/content/description.md b/docs/js/components/content/description.md
index 77668fe..ddce9f9 100644
--- a/docs/js/components/content/description.md
+++ b/docs/js/components/content/description.md
@@ -1,3 +1,3 @@
-A container for a set of non-interactable components.
+Content is a container for a set of non-interactable components.
 Used in a variety of places like <Detail/>, <Inline/> and <GridItem/>.
 By utilizing the power of React the content can also be made dynamic
\ No newline at end of file
diff --git a/docs/js/components/search_bar/description.md b/docs/js/components/search_bar/description.md
index 1ecfae1..dfce5b5 100644
--- a/docs/js/components/search_bar/description.md
+++ b/docs/js/components/search_bar/description.md
@@ -1 +1 @@
-Adds search bar above the content
\ No newline at end of file
+Adds search bar above the content. Text in search bar can be read and set 
\ No newline at end of file
diff --git a/example_plugins/plugins/ui_grid/gauntlet.toml b/example_plugins/plugins/ui_grid/gauntlet.toml
index a4d408f..56c6b83 100644
--- a/example_plugins/plugins/ui_grid/gauntlet.toml
+++ b/example_plugins/plugins/ui_grid/gauntlet.toml
@@ -21,6 +21,24 @@ type = 'view'
 description = ''
 # docs-code-segment:end
 
+# docs-code-segment:start more-columns
+[[entrypoint]]
+id = 'more-columns'
+name = 'Grid More Columns'
+path = 'src/more-columns.tsx'
+type = 'view'
+description = ''
+# docs-code-segment:end
+
+# docs-code-segment:start search-bar-set-search-text
+[[entrypoint]]
+id = 'search-bar-set-search-text'
+name = 'Grid Search Bar Set Search Text'
+path = 'src/search-bar-set-search-text.tsx'
+type = 'view'
+description = ''
+# docs-code-segment:end
+
 # docs-code-segment:start section
 [[entrypoint]]
 id = 'section'
@@ -75,5 +93,15 @@ type = 'view'
 description = ''
 # docs-code-segment:end
 
+
+# docs-code-segment:start content-horizontal-break
+[[entrypoint]]
+id = 'content-horizontal-break'
+name = 'Grid Content Horizontal Break'
+path = 'src/content-horizontal-break.tsx'
+type = 'view'
+description = ''
+# docs-code-segment:end
+
 [permissions]
 network = ["static.wikia.nocookie.net"]
diff --git a/example_plugins/plugins/ui_grid/src/content-horizontal-break.tsx b/example_plugins/plugins/ui_grid/src/content-horizontal-break.tsx
new file mode 100644
index 0000000..7a40967
--- /dev/null
+++ b/example_plugins/plugins/ui_grid/src/content-horizontal-break.tsx
@@ -0,0 +1,20 @@
+import { ReactElement } from "react";
+import { Grid } from "@project-gauntlet/api/components";
+
+export default function ContentHorizontalBreak(): ReactElement {
+    return (
+        <Grid>
+            <Grid.Item id="test">
+                <Grid.Item.Content>
+                    <Grid.Item.Content.Paragraph>
+                        C-3PO
+                    </Grid.Item.Content.Paragraph>
+                    <Grid.Item.Content.HorizontalBreak/>
+                    <Grid.Item.Content.Paragraph>
+                        BB-8
+                    </Grid.Item.Content.Paragraph>
+                </Grid.Item.Content>
+            </Grid.Item>
+        </Grid>
+    )
+}
\ No newline at end of file
diff --git a/example_plugins/plugins/ui_grid/src/content-image.tsx b/example_plugins/plugins/ui_grid/src/content-image.tsx
index fd71682..b07b68a 100644
--- a/example_plugins/plugins/ui_grid/src/content-image.tsx
+++ b/example_plugins/plugins/ui_grid/src/content-image.tsx
@@ -1,47 +1,14 @@
 import { ReactElement } from "react";
 import { Grid } from "@project-gauntlet/api/components";
 
-const items = [
-    {
-        title: "Naboo",
-        image: "https://static.wikia.nocookie.net/star-wars-canon/images/2/24/NabooFull-SW.png/revision/latest/scale-to-width-down/150?cb=20151218205422"
-    },
-    {
-        title: "Ryloth",
-        image: "https://static.wikia.nocookie.net/star-wars-canon/images/b/b7/Ryloth_Rebels.png/revision/latest/scale-to-width-down/150?cb=20161103040944"
-    },
-    {
-        title: "Tatooine",
-        image: "https://static.wikia.nocookie.net/star-wars-canon/images/b/b0/Tatooine_TPM.png/revision/latest/scale-to-width-down/150?cb=20151124205032"
-    },
-    {
-        title: "Dagobah",
-        image: "https://static.wikia.nocookie.net/star-wars-canon/images/4/48/Dagobah_ep3.jpg/revision/latest/scale-to-width-down/150?cb=20161103221846"
-    },
-    {
-        title: "Endor",
-        image: "https://static.wikia.nocookie.net/star-wars-canon/images/9/96/Endor-DB.png/revision/latest/scale-to-width-down/150?cb=20160711234205"
-    },
-    {
-        title: "Dathomir",
-        image: "https://static.wikia.nocookie.net/starwars/images/3/34/DathomirJFO.jpg/revision/latest/scale-to-width-down/150?cb=20200222032237"
-    },
-    {
-        title: "Dantooine",
-        image: "https://static.wikia.nocookie.net/starwars/images/a/a5/Dantooine_Resistance.jpg/revision/latest/scale-to-width-down/150?cb=20200120190043"
-    },
-]
-
 export default function ContentImageExample(): ReactElement {
     return (
         <Grid>
-            {items.map(value => (
-                <Grid.Item id={value.title} key={value.title} title={value.title}>
+                <Grid.Item id="tatooine" title="Tatooine">
                     <Grid.Item.Content>
-                        <Grid.Item.Content.Image source={{ url: value.image }}/>
+                        <Grid.Item.Content.Image source={{ url: "https://static.wikia.nocookie.net/star-wars-canon/images/b/b0/Tatooine_TPM.png/revision/latest/scale-to-width-down/150?cb=20151124205032" }}/>
                     </Grid.Item.Content>
                 </Grid.Item>
-            ))}
         </Grid>
     )
 }
\ No newline at end of file
diff --git a/example_plugins/plugins/ui_grid/src/more-columns.tsx b/example_plugins/plugins/ui_grid/src/more-columns.tsx
new file mode 100644
index 0000000..c3f8958
--- /dev/null
+++ b/example_plugins/plugins/ui_grid/src/more-columns.tsx
@@ -0,0 +1,29 @@
+import { ReactElement } from "react";
+import { Grid } from "@project-gauntlet/api/components";
+
+const items = [
+    "🥹",
+    "🤣",
+    "🥵",
+    "🤕",
+    "🫥",
+    "🤬",
+    "🥱",
+    "🤮",
+    "🙄",
+    "🤠"
+]
+
+export default function MoreColumnsExample(): ReactElement {
+    return (
+        <Grid columns={8}>
+            {items.map(value => (
+                <Grid.Item id={value} key={value}>
+                    <Grid.Item.Content>
+                        <Grid.Item.Content.Paragraph>{value}</Grid.Item.Content.Paragraph>
+                    </Grid.Item.Content>
+                </Grid.Item>
+            ))}
+        </Grid>
+    )
+}
\ No newline at end of file
diff --git a/example_plugins/plugins/ui_grid/src/search-bar-set-search-text.tsx b/example_plugins/plugins/ui_grid/src/search-bar-set-search-text.tsx
new file mode 100644
index 0000000..ac42644
--- /dev/null
+++ b/example_plugins/plugins/ui_grid/src/search-bar-set-search-text.tsx
@@ -0,0 +1,28 @@
+import { ReactElement, useState } from "react";
+import { Action, ActionPanel, Grid } from "@project-gauntlet/api/components";
+
+export default function SearchBarSetSearchTextExample(): ReactElement {
+    const [searchText, setSearchText] = useState<string | undefined>("");
+
+    return (
+        <Grid
+            actions={
+                <ActionPanel>
+                    <Action label="Set value" onAction={(id) => setSearchText(id)}/>
+                </ActionPanel>
+            }
+        >
+            <Grid.SearchBar placeholder="What knowledge do you seek...?"
+                            value={searchText}
+                            onChange={setSearchText}
+            />
+            <Grid.Item id="This will be the value in search bar">
+                <Grid.Item.Content>
+                    <Grid.Item.Content.Paragraph>
+                        Click me!
+                    </Grid.Item.Content.Paragraph>
+                </Grid.Item.Content>
+            </Grid.Item>
+        </Grid>
+    )
+}
diff --git a/example_plugins/plugins/ui_grid/src/section.tsx b/example_plugins/plugins/ui_grid/src/section.tsx
index 2ec9c59..9687bdc 100644
--- a/example_plugins/plugins/ui_grid/src/section.tsx
+++ b/example_plugins/plugins/ui_grid/src/section.tsx
@@ -3,16 +3,8 @@ import { Grid } from "@project-gauntlet/api/components";
 
 const theBlade1 = "https://static.wikia.nocookie.net/starwars/images/a/a4/The-Blade-1-final-cover.jpg/revision/latest/scale-to-width-down/150?cb=20221215195606"
 const theBlade2 = "https://static.wikia.nocookie.net/starwars/images/f/fd/The-Blade-2-Final-Cover.jpg/revision/latest/scale-to-width-down/150?cb=20230120033002"
-const theBlade3 = "https://static.wikia.nocookie.net/starwars/images/0/02/The-Blade-3-Final-Cover.jpg/revision/latest/scale-to-width-down/150?cb=20230227203337"
-const theBlade4 = "https://static.wikia.nocookie.net/starwars/images/6/6c/The-Blade-4-Final-Cover.jpg/revision/latest/scale-to-width-down/150?cb=20230321223753"
 
 const vader1 = "https://static.wikia.nocookie.net/starwars/images/9/9a/Darth_VaderDark_Lord_of_the_Sith.jpg/revision/latest/scale-to-width-down/150?cb=20190223230434"
-const vader2 = "https://static.wikia.nocookie.net/starwars/images/2/2e/Darth_Vader_2_cover_art.jpg/revision/latest/scale-to-width-down/150?cb=20190223234228"
-const vader3 = "https://static.wikia.nocookie.net/starwars/images/d/df/DarthVader2017-3.jpg/revision/latest/scale-to-width-down/150?cb=20190224013414"
-const vader4 = "https://static.wikia.nocookie.net/starwars/images/c/c9/Darthvader-dlots-4-final.jpg/revision/latest/scale-to-width-down/150?cb=20190226024707"
-const vader5 = "https://static.wikia.nocookie.net/starwars/images/a/ab/Darthvader-dlots-5.jpg/revision/latest/scale-to-width-down/150?cb=20170826121053"
-const vader6 = "https://static.wikia.nocookie.net/starwars/images/2/20/DarthVader-DLotS--Solicitation.jpg/revision/latest/scale-to-width-down/150?cb=20171001165404"
-const vader7 = "https://static.wikia.nocookie.net/starwars/images/f/fa/DarthVader2017-7.jpg/revision/latest/scale-to-width-down/150?cb=20190226233333"
 
 export default function SectionExample(): ReactElement {
     return (
@@ -28,16 +20,6 @@ export default function SectionExample(): ReactElement {
                         <Grid.Item.Content.Image source={{ url: theBlade2 }}/>
                     </Grid.Item.Content>
                 </Grid.Item>
-                <Grid.Item id="the-blade-3" title="The Blade 3">
-                    <Grid.Item.Content>
-                        <Grid.Item.Content.Image source={{ url: theBlade3 }}/>
-                    </Grid.Item.Content>
-                </Grid.Item>
-                <Grid.Item id="the-blade-4" title="The Blade 4">
-                    <Grid.Item.Content>
-                        <Grid.Item.Content.Image source={{ url: theBlade4 }}/>
-                    </Grid.Item.Content>
-                </Grid.Item>
             </Grid.Section>
             <Grid.Section title="Darth Vader">
                 <Grid.Item id="darth-vader-1" title="Darth Vader 1">
@@ -45,36 +27,6 @@ export default function SectionExample(): ReactElement {
                         <Grid.Item.Content.Image source={{ url: vader1 }}/>
                     </Grid.Item.Content>
                 </Grid.Item>
-                <Grid.Item id="darth-vader-2" title="Darth Vader 2">
-                    <Grid.Item.Content>
-                        <Grid.Item.Content.Image source={{ url: vader2 }}/>
-                    </Grid.Item.Content>
-                </Grid.Item>
-                <Grid.Item id="darth-vader-3" title="Darth Vader 3">
-                    <Grid.Item.Content>
-                        <Grid.Item.Content.Image source={{ url: vader3 }}/>
-                    </Grid.Item.Content>
-                </Grid.Item>
-                <Grid.Item id="darth-vader-4" title="Darth Vader 4">
-                    <Grid.Item.Content>
-                        <Grid.Item.Content.Image source={{ url: vader4 }}/>
-                    </Grid.Item.Content>
-                </Grid.Item>
-                <Grid.Item id="darth-vader-5" title="Darth Vader 5">
-                    <Grid.Item.Content>
-                        <Grid.Item.Content.Image source={{ url: vader5 }}/>
-                    </Grid.Item.Content>
-                </Grid.Item>
-                <Grid.Item id="darth-vader-6" title="Darth Vader 6">
-                    <Grid.Item.Content>
-                        <Grid.Item.Content.Image source={{ url: vader6 }}/>
-                    </Grid.Item.Content>
-                </Grid.Item>
-                <Grid.Item id="darth-vader-7" title="Darth Vader 7">
-                    <Grid.Item.Content>
-                        <Grid.Item.Content.Image source={{ url: vader7 }}/>
-                    </Grid.Item.Content>
-                </Grid.Item>
             </Grid.Section>
         </Grid>
     )
diff --git a/example_plugins/scenarios/ui_grid/content-horizontal-break/default.json b/example_plugins/scenarios/ui_grid/content-horizontal-break/default.json
new file mode 100644
index 0000000..904b00b
--- /dev/null
+++ b/example_plugins/scenarios/ui_grid/content-horizontal-break/default.json
@@ -0,0 +1,3 @@
+{
+  "type": "RequestViewRender"
+}
\ No newline at end of file
diff --git a/example_plugins/scenarios/ui_grid/more-columns/default.json b/example_plugins/scenarios/ui_grid/more-columns/default.json
new file mode 100644
index 0000000..904b00b
--- /dev/null
+++ b/example_plugins/scenarios/ui_grid/more-columns/default.json
@@ -0,0 +1,3 @@
+{
+  "type": "RequestViewRender"
+}
\ No newline at end of file