diff --git a/frontend/components/layout/ContentContainer.tsx b/frontend/components/layout/ContentContainer.tsx
new file mode 100644
index 000000000..eed06bf44
--- /dev/null
+++ b/frontend/components/layout/ContentContainer.tsx
@@ -0,0 +1,42 @@
+// SPDX-FileCopyrightText: 2023 Dusan Mijatovic (Netherlands eScience Center)
+// SPDX-FileCopyrightText: 2023 Netherlands eScience Center
+//
+// SPDX-License-Identifier: Apache-2.0
+
+type ContentContainerProps = {
+ element?: 'section' | 'article' | 'main' | 'div'
+ className?: string
+ children: JSX.Element | JSX.Element[]
+}
+
+export default function ContentContainer(props: ContentContainerProps) {
+ // basic container alignment - for lg + breakpoints
+ const classes = `px-4 lg:container lg:mx-auto ${props.className ?? ''}`
+
+ switch (props?.element) {
+ case 'section':
+ return (
+
+ )
+ case 'article':
+ return (
+
+ {props.children}
+
+ )
+ case 'main':
+ return (
+
+ {props.children}
+
+ )
+ default:
+ return (
+
+ {props.children}
+
+ )
+ }
+}
diff --git a/frontend/components/software/overview/SoftwareHighlights.tsx b/frontend/components/software/overview/SoftwareHighlights.tsx
index b6ae472db..6e03e3535 100644
--- a/frontend/components/software/overview/SoftwareHighlights.tsx
+++ b/frontend/components/software/overview/SoftwareHighlights.tsx
@@ -6,6 +6,7 @@
//
// SPDX-License-Identifier: Apache-2.0
+import ContentContainer from '~/components/layout/ContentContainer'
import {HighlightsCarousel} from './highlights/HighlightsCarousel'
import {SoftwareHighlight} from '~/components/admin/software-highlights/apiSoftwareHighlights'
@@ -20,6 +21,13 @@ export default function SoftwareHighlights({highlights}: { highlights: SoftwareH
return (
+
+
+ Software Highlights
+
+
)