diff --git a/core-web/libs/template-builder/.storybook/preview.ts b/core-web/libs/template-builder/.storybook/preview.ts
index e69de29bb2d1..72b57985c24f 100644
--- a/core-web/libs/template-builder/.storybook/preview.ts
+++ b/core-web/libs/template-builder/.storybook/preview.ts
@@ -0,0 +1,7 @@
+export const parameters = {
+    options: {
+        storySort: {
+            order: ['Template Builder', 'Components']
+        }
+    }
+};
diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/components/add-widget/add-widget.component.stories.ts b/core-web/libs/template-builder/src/lib/components/template-builder/components/add-widget/add-widget.component.stories.ts
index 81fdc9e5526e..8f37182e0659 100644
--- a/core-web/libs/template-builder/src/lib/components/template-builder/components/add-widget/add-widget.component.stories.ts
+++ b/core-web/libs/template-builder/src/lib/components/template-builder/components/add-widget/add-widget.component.stories.ts
@@ -2,10 +2,10 @@ import { moduleMetadata, Story, Meta } from '@storybook/angular';
 
 import { AddWidgetComponent } from './add-widget.component';
 
-import { rowIcon } from '../../assets/icons';
+import { rowIcon, colIcon } from '../../assets/icons';
 
 export default {
-    title: 'AddWidgetComponent',
+    title: 'Components/Add',
     component: AddWidgetComponent,
     decorators: [
         moduleMetadata({
@@ -18,16 +18,23 @@ const Template: Story<AddWidgetComponent> = (args: AddWidgetComponent) => ({
     props: args
 });
 
-export const Primary = Template.bind({});
+export const AddRow = Template.bind({});
+
+export const AddBox = Template.bind({});
 
 export const MaterialIcon = Template.bind({});
 
-Primary.args = {
+AddRow.args = {
     label: 'Add Row',
     icon: rowIcon
 };
 
-MaterialIcon.args = {
+AddBox.args = {
     label: 'Add Box',
+    icon: colIcon
+};
+
+MaterialIcon.args = {
+    label: 'Fallback Material Icon',
     icon: 'add'
 };
diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-box/template-builder-box.component.stories.ts b/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-box/template-builder-box.component.stories.ts
index bbe2d1c6a76c..d2790986cb48 100644
--- a/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-box/template-builder-box.component.stories.ts
+++ b/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-box/template-builder-box.component.stories.ts
@@ -7,7 +7,7 @@ import { ScrollPanelModule } from 'primeng/scrollpanel';
 import { TemplateBuilderBoxComponent } from './template-builder-box.component';
 
 export default {
-    title: 'TemplateBuilderBoxComponent',
+    title: 'Components/Box',
     component: TemplateBuilderBoxComponent,
     decorators: [
         moduleMetadata({
diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-row/template-builder-row.component.stories.ts b/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-row/template-builder-row.component.stories.ts
index f4a51b26518c..2ecdda852925 100644
--- a/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-row/template-builder-row.component.stories.ts
+++ b/core-web/libs/template-builder/src/lib/components/template-builder/components/template-builder-row/template-builder-row.component.stories.ts
@@ -7,7 +7,7 @@ import { DotIconModule } from '@dotcms/ui';
 import { TemplateBuilderRowComponent } from './template-builder-row.component';
 
 export default {
-    title: 'TemplateBuilderRowComponent',
+    title: 'Components/Row',
     component: TemplateBuilderRowComponent,
     decorators: [
         moduleMetadata({
diff --git a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.stories.ts b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.stories.ts
index 51b9d983540a..e6ad5c13129e 100644
--- a/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.stories.ts
+++ b/core-web/libs/template-builder/src/lib/components/template-builder/template-builder.component.stories.ts
@@ -12,7 +12,7 @@ import { TemplateBuilderComponent } from './template-builder.component';
 import { FULL_DATA_MOCK } from './utils/mocks';
 
 export default {
-    title: 'TemplateBuilderComponent',
+    title: 'Template Builder',
     component: TemplateBuilderComponent,
     decorators: [
         moduleMetadata({
@@ -34,8 +34,8 @@ const Template: Story<TemplateBuilderComponent> = (args: TemplateBuilderComponen
     props: args
 });
 
-export const Primary = Template.bind({});
+export const Base = Template.bind({});
 
-Primary.args = {
+Base.args = {
     templateLayout: { body: FULL_DATA_MOCK }
 };