diff --git a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx
new file mode 100644
index 0000000000..e472ab5599
--- /dev/null
+++ b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { HeaderIconLinkRow } from '../HeaderIconLinkRow';
+import { IconLinkVerticalProps } from './IconLinkVertical';
+
+type Props = {
+  links: IconLinkVerticalProps[];
+};
+
+export default {
+  title: 'Data Display/HeaderIconLinkRow',
+  component: HeaderIconLinkRow,
+};
+
+export const Default = (args: Props) => <HeaderIconLinkRow {...args} />;
+Default.args = {
+  links: [
+    {
+      color: 'primary',
+      disabled: false,
+      href: 'https://google.com',
+      label: 'primary',
+      title: 'title',
+    },
+    {
+      color: 'secondary',
+      disabled: false,
+      href: 'https://google.com',
+      label: 'secondary',
+      title: 'title-2',
+    },
+  ],
+};
diff --git a/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx
new file mode 100644
index 0000000000..8d03e7359f
--- /dev/null
+++ b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { ResponseErrorPanel } from '../ResponseErrorPanel';
+import { ErrorPanelProps } from '../ErrorPanel';
+
+export default {
+  title: 'Data Display/ResponseErrorPanel',
+  component: ResponseErrorPanel,
+};
+
+export const Default = (args: ErrorPanelProps) => (
+  <ResponseErrorPanel {...args} />
+);
+Default.args = {
+  error: new Error('Error message from error object'),
+  defaultExpanded: false,
+};
+
+export const WithTitle = (args: ErrorPanelProps) => (
+  <ResponseErrorPanel {...args} />
+);
+WithTitle.args = {
+  error: new Error('test'),
+  defaultExpanded: false,
+  title: 'Title prop is passed',
+};
diff --git a/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx b/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx
new file mode 100644
index 0000000000..e05af86993
--- /dev/null
+++ b/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { BottomLink } from '../BottomLink';
+
+export default {
+  title: 'Layout/BottomLink',
+  component: BottomLink,
+};
+
+export const Default = (args: { link: string; title: string }) => (
+  <BottomLink {...args} />
+);
+Default.args = {
+  link: 'https://google.com',
+  title: 'This is bottom link',
+};
diff --git a/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx b/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx
new file mode 100644
index 0000000000..27df00e72c
--- /dev/null
+++ b/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { ReactNode } from 'react';
+import { ContentHeader } from '../ContentHeader';
+
+export default {
+  title: 'Layout/ContentHeader',
+  component: ContentHeader,
+};
+
+type ContentHeaderProps = {
+  title?: string;
+  titleComponent?: ReactNode;
+  description?: string;
+  textAlign?: 'left' | 'right' | 'center';
+};
+
+export const Default = (args: ContentHeaderProps) => (
+  <ContentHeader {...args}>
+    <div>Child of Content Header</div>
+  </ContentHeader>
+);
+Default.args = {
+  title: 'This is Content Header default aligned',
+  description: 'This is description',
+};
+
+export const Left = (args: ContentHeaderProps) => (
+  <ContentHeader {...args}>
+    <div>Child of Content Header</div>
+  </ContentHeader>
+);
+Left.args = {
+  title: 'This is Content Header left aligned',
+  description: 'This is description',
+  textAlign: 'left',
+};
+
+export const Right = (args: ContentHeaderProps) => (
+  <ContentHeader {...args}>
+    <div>Child of Content Header</div>
+  </ContentHeader>
+);
+Right.args = {
+  title: 'This is Content Header right aligned',
+  description: 'This is description',
+  textAlign: 'right',
+};
+
+export const Center = (args: ContentHeaderProps) => (
+  <ContentHeader {...args}>
+    <div>Child of Content Header</div>
+  </ContentHeader>
+);
+Center.args = {
+  title: 'This is Content Header center aligned',
+  description: 'This is description',
+  textAlign: 'center',
+};