diff --git a/components/[serviceName].tsx b/components/[serviceName].tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9d65cd7d7d0d9881a3e34e10d3e5f4b780707cdc
--- /dev/null
+++ b/components/[serviceName].tsx
@@ -0,0 +1,113 @@
+import NavHeader from '@/views/it-standards/Navigationheader'
+
+import { Header } from '@/views/it-standards/Service'
+
+import { ServiceContent } from '../types/ServiceContent'
+import { InfoBoxes } from '@/views/it-standards/InfoBoxes'
+
+import useContent from 'shared/use-content'
+import useImgPath from 'shared/use-img-path'
+
+const initializedUsedContent = useContent('standards')
+const { getImgPath } = useImgPath()
+
+export default function ({ contentString }) {
+    const content: ServiceContent = JSON.parse(contentString)
+    if (content.docsUrl !== undefined && content.docsUrl !== '') {
+        const documentationLinkItem = content.artefacts.filter((item) =>
+            item.name === 'artefaktDocumentation' && item.url === 'n.v.')[0]
+        if (documentationLinkItem !== undefined) {
+            documentationLinkItem.url = content.docsUrl
+        }
+    }
+
+    return (
+        <div className={'mx-auto max-w-screen-xl it-standard'}>
+            <div className="col-start-1 col-span-12 ">
+                <NavHeader />
+            </div>
+            <header className="lg:col-start-1 xl:col-start-1 lg:col-span-12 xl:col-span-12 flex flex-row pt-4 font-medium">
+                Föderaler IT-Standard - Detailansicht
+            </header>
+            <div className="flex">
+                <main className="lg:col-span-9 xl:col-span-9">
+                    <Header
+                        contact={{
+                            name: content.contactInformation.name,
+                            mail: content.contactInformation.mail,
+                        }}
+                        img={{
+                            src: getImgPath(content.logo.path),
+                            alt: content.logo.title,
+                        }}
+                        title={content?.name}
+                        description={content?.text}
+                        tags = {content.tags}
+                        developer={{
+                            name: content?.developer.name,
+                            link: content?.developer.url,
+                        }}
+                        statusLabel={content.status}
+                        documentationURL={content.docsUrl}
+                        sourceURL={content.sourceCodeUrl}
+                        resources={content.childResources}
+                    />
+                </main>
+                <div className="lg:block lg:col-span-2 xl:col-span-2 mt-8 p-2">
+
+                    <InfoBoxes
+                        productOwner={{
+                            name: content.productOwner.name,
+                            mail: content.productOwner.mail,
+                            link: content.productOwner.url,
+                            phone: content.productOwner.phone,
+                            contactform: content.productOwner.contactform,
+                        }}
+                        developer={{
+                            name: content.developer.name,
+                            mail: content.developer.mail,
+                            link: content.developer.url,
+                            phone: content.developer.phone,
+                            contactform: content.developer.contactform,
+                        }}
+                        contact={{
+                            name: content.contactInformation.name,
+                            mail: content.contactInformation.mail,
+                            link: content.contactInformation.url,
+                            phone: content.contactInformation.phone,
+                            contactform: content.contactInformation.contactform,
+                        }}
+                        supportInfo={content.supportInfo}
+                        artefacts={content.artefacts}
+                        combinedStandards={content.childResources}
+                        slugMaster={content.slugMaster}
+                        currentSlug={content.slug}
+                        lastUpdate={content.dateLastUpdate}
+                    />
+
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export async function getStaticProps({ params }) {
+    const content = initializedUsedContent.contentByServiceName(params.serviceName)
+    return {
+        props: {
+            contentString: JSON.stringify(content),
+        },
+    }
+}
+
+export async function getStaticPaths() {
+    const { contents } = useContent('standards')
+    const servicePaths = contents.map((content) => {
+        return { params: { serviceName: content.slug } }
+    })
+
+    return {
+        paths: servicePaths,
+        fallback: false,
+    }
+}