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..e6891081e3
--- /dev/null
+++ b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.stories.tsx
@@ -0,0 +1,51 @@
+/*
+ * 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"
+        },
+    ]
+};
\ No newline at end of file
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..62eb523a02
--- /dev/null
+++ b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.stories.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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..84f268681d
--- /dev/null
+++ b/packages/core-components/src/layout/BottomLink/BottomLink.stories.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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..ce6365c28e
--- /dev/null
+++ b/packages/core-components/src/layout/ContentHeader/ContentHeader.stories.tsx
@@ -0,0 +1,58 @@
+/*
+ * 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'
+};