diff --git a/gatsby/lobid/gatsby-config.js b/gatsby/lobid/gatsby-config.js
index 4673e468..ab847327 100644
--- a/gatsby/lobid/gatsby-config.js
+++ b/gatsby/lobid/gatsby-config.js
@@ -25,6 +25,12 @@ module.exports = {
         path: `${__dirname}/static/publication/`,
       }
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/static/product/`,
+      }
+    },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`
   ],
diff --git a/gatsby/lobid/gatsby-node.js b/gatsby/lobid/gatsby-node.js
index 513b52c5..67073d76 100644
--- a/gatsby/lobid/gatsby-node.js
+++ b/gatsby/lobid/gatsby-node.js
@@ -23,6 +23,8 @@ exports.createPages = async ({ graphql, actions }) => {
     context: { lang: "en" },
   });
 
+  // Pages for individual members listed in `membership`
+
   const {
     data: { members },
   } = await graphql(`
@@ -37,25 +39,37 @@ exports.createPages = async ({ graphql, actions }) => {
     }
   `);
 
-  const nodeArray = members.membership
-    .map(membership => membership.member.id)
+  const shortMemberIds = members.membership.map(m => m.member.id)
     .filter(id => id.indexOf("lobid.org/team") != -1)
     .map(id => id.slice(id.lastIndexOf("/") + 1, id.lastIndexOf("!#") - 1));
-  const unique = [...new Set(nodeArray)];
-  unique.forEach((member) => {
-    createPage({
-      path: `/team/${member}`,
-      component: path.resolve(`./src/templates/member.js`),
-      context: { id: member },
-    });
-  });
+  addPages(shortMemberIds, "team", "./src/templates/member.js", createPage);
+
+  // Pages for individual products listed in `makesOffer`
+
+  const {
+    data: { products },
+  } = await graphql(`
+  {
+    products: dataJson {
+      makesOffer {
+          id
+      }
+    }
+  }
+  `);
+
+  const shortProductIds = products.makesOffer.map(p => p.id)
+    .filter(id => id.indexOf("/") != -1)
+    .map(id => id.slice(id.lastIndexOf("/") + 1, id.lastIndexOf(".")));
+  addPages(shortProductIds, "product", "./src/templates/product.js", createPage);
+
 };
 
 // Create `fields.jsonFile` fields to link to static publication JSON files
 exports.onCreateNode = ({ node, getNode, actions }) => {
   const { createNodeField } = actions
   if (node.internal.type === "PublicationJson") {
-    
+
     const relativeFilePath = createFilePath({
       node,
       getNode,
@@ -68,4 +82,15 @@ exports.onCreateNode = ({ node, getNode, actions }) => {
       value: `/publication${relativeFilePath}.json`,
     })
   }
-}
\ No newline at end of file
+}
+
+function addPages(ids, prefix, template, createPage) {
+  const unique = [...new Set(ids)];
+  unique.forEach((member) => {
+    createPage({
+      path: `/${prefix}/${member}`,
+      component: path.resolve(template),
+      context: { id: member },
+    });
+  });
+}
diff --git a/gatsby/lobid/src/components/helpers.js b/gatsby/lobid/src/components/helpers.js
new file mode 100644
index 00000000..76899cd1
--- /dev/null
+++ b/gatsby/lobid/src/components/helpers.js
@@ -0,0 +1,3 @@
+export function simpleId(url) {
+    return url.slice(url.lastIndexOf("/") + 1, url.lastIndexOf("."));
+}
diff --git a/gatsby/lobid/src/components/member.html.js b/gatsby/lobid/src/components/member.html.js
index 49b42f9c..064aa6bc 100644
--- a/gatsby/lobid/src/components/member.html.js
+++ b/gatsby/lobid/src/components/member.html.js
@@ -3,6 +3,7 @@ import md5 from 'md5';
 
 import Header from "./header.html";
 import Footer from "./footer.html";
+import Publications from "./publications.html";
 
 import "./css/lobid.css";
 import "./css/bootstrap.min.css";
@@ -65,33 +66,7 @@ export class Member extends React.Component {
               <img alt={this.props.member.name.label} id="index-image" src={this.props.member.image || `https://gravatar.com/avatar/${md5(this.props.member.email)}?s=300&d=identicon`} />
             </div>
           </div>
-          {this.props.pubs.length > 0 &&
-            <div className="row">
-              <div className="col-md-12">
-                <p className="lead">{this.props.publications}</p>
-                <table className="table table-striped table-condensed">
-                  <thead>
-                    <tr><th width="10%" /><th width="65%" /><th width="12%" /><th width="10%" /><th width="3%" /></tr>
-                  </thead>
-                  <tbody>
-                    {this.props.pubs.map(publication =>
-                      <tr>
-                        <td><small>{publication.datePublished}</small></td>
-                        <td><a href={publication.id}>{publication.name.de || publication.name.en || publication.id}</a></td>
-                        <td>{publication.about && publication.about.map(a =>
-                          <p><small><span class="glyphicon glyphicon-tag" aria-hidden="true"></span></small>&nbsp;<a href={a.id}>{a.id.split("://")[1].split(".")[0]}</a></p>
-                        )}</td>
-                        <td align="right"><small><a href={"https://schema.org/" + publication.type}>{publication.type}</a></small></td>
-                        <td><a title="Beschreibung als JSON-LD anzeigen" href={publication.fields.jsonFile}><img height="20px" src={jsonLdPng} alt="JSON-LD" /></a></td>
-                      </tr>
-                    )}
-
-                  </tbody>
-                  <tfoot />
-                </table>
-              </div>
-            </div>
-          }
+          <Publications pubs={this.props.pubs} publications={this.props.publications} />
           <Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} />
         </div>
       </div>
diff --git a/gatsby/lobid/src/components/product.html.js b/gatsby/lobid/src/components/product.html.js
new file mode 100644
index 00000000..6e699b9e
--- /dev/null
+++ b/gatsby/lobid/src/components/product.html.js
@@ -0,0 +1,76 @@
+import React from "react";
+import md5 from 'md5';
+import { simpleId } from './helpers.js'
+
+import Header from "./header.html";
+import Footer from "./footer.html";
+import Publications from "./publications.html";
+
+import "./css/lobid.css";
+import "./css/bootstrap.min.css";
+import "./css/font-awesome.min.css";
+
+import jsonLdPng from "./images/json-ld.png";
+
+export class Product extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.props = props;
+  }
+
+  asLinks(field) {
+    return this.props.product[field] && <tr><td>{this.props[field]}</td><td>{this.props.product[field].map((link) =>
+      <div key={link.id}><a href={link.id}>{link.id.replace('https://', '').replace('http://', '')}</a><br /></div>
+    )}</td></tr>
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <p />
+        <Header
+          language={this.props.language}
+          languageLink={this.props.languageLink}
+          languageTooltip={this.props.languageTooltip}
+          publications={this.props.publications}
+          teamLink={this.props.teamLink}
+          contactPointId={this.props.contactPointId}
+        />
+        <div>
+          <div className="page-header">
+            <h1>
+              {this.props.product.name.label}
+              <small>
+                {this.props.product.slogan && [this.props.product.slogan].map(s => <span>&mdash; {s.label}</span>)}
+                <a title="Beschreibung als JSON-LD anzeigen" href={'/product/' + simpleId(this.props.product.id) + '.json'}><img className='json-ld-icon' src={jsonLdPng} alt="JSON-LD" /></a></small>
+            </h1>
+          </div>
+
+          <div className="row">
+            <div className="col-md-9">
+              <p className="lead">{this.props.product.description.label}</p>
+              <table className="table table-striped table-condensed">
+                <thead>
+                  <tr><th width="20%" /><th width="80%" /></tr>
+                </thead>
+                <tbody>
+                  <tr><td>Website</td><td><a href={this.props.product.id}>{this.props.product.id}</a></td></tr>
+                  {this.asLinks("hasPart")}
+                  {this.asLinks("isBasedOn")}
+                  {this.asLinks("isRelatedTo")}
+                </tbody>
+                <tfoot />
+              </table>
+            </div>
+            <div className="col-md-3">
+              <img alt={this.props.product.name.label} id="index-image" src={this.props.product.image || `https://gravatar.com/avatar/${md5(this.props.product.id)}?s=300&d=identicon`} />
+            </div>
+          </div>
+          <Publications pubs={this.props.pubs} publications={this.props.publications} />
+          <Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/gatsby/lobid/src/components/publications.html.js b/gatsby/lobid/src/components/publications.html.js
new file mode 100644
index 00000000..9a4ab6ec
--- /dev/null
+++ b/gatsby/lobid/src/components/publications.html.js
@@ -0,0 +1,36 @@
+import React from "react"
+import { simpleId } from './helpers.js'
+
+import jsonLdPng from "./images/json-ld.png";
+
+export default class Publications extends React.Component {
+  render() {
+    return (
+      this.props.pubs.length > 0 &&
+      <div className="row">
+        <div className="col-md-12">
+          <p className="lead">{this.props.publications}</p>
+          <table className="table table-striped table-condensed">
+            <thead>
+              <tr><th width="10%" /><th width="65%" /><th width="12%" /><th width="10%" /><th width="3%" /></tr>
+            </thead>
+            <tbody>
+              {this.props.pubs.map(publication =>
+                <tr key={publication.id}>
+                  <td><small>{publication.datePublished}</small></td>
+                  <td><a href={publication.id}>{publication.name.de || publication.name.en || publication.id}</a></td>
+                  <td>{publication.about && publication.about.map(a =>
+                    <p key={a.id}><small><span className="glyphicon glyphicon-tag" aria-hidden="true"></span></small>&nbsp;<a href={a.id}>{simpleId(a.id)}</a></p>
+                  )}</td>
+                  <td align="right"><small><a href={"https://schema.org/" + publication.type}>{publication.type}</a></small></td>
+                  <td><a title="Beschreibung als JSON-LD anzeigen" href={publication.fields.jsonFile}><img height="20px" src={jsonLdPng} alt="JSON-LD" /></a></td>
+                </tr>
+              )}
+            </tbody>
+            <tfoot />
+          </table>
+        </div>
+      </div>
+    )
+  }
+}
\ No newline at end of file
diff --git a/gatsby/lobid/src/components/team.html.js b/gatsby/lobid/src/components/team.html.js
index 7f390049..32583b92 100644
--- a/gatsby/lobid/src/components/team.html.js
+++ b/gatsby/lobid/src/components/team.html.js
@@ -1,5 +1,6 @@
 import React from "react";
 import md5 from 'md5';
+import { simpleId } from './helpers.js'
 
 import Header from "./header.html";
 import Footer from "./footer.html";
@@ -29,8 +30,8 @@ export class Team extends React.Component {
     return (
       <div id="former">
         {this.props.team.membership.filter(member => member.endDate)
-          .map((member) => [member, this.getDetails(member)]).map(([member, details]) =>
-            <div>
+          .map((member) => [member, this.getMemberDetails(member)]).map(([member, details]) =>
+            <div key={member.member.id}>
               {this.getImage(
                 (details && details.node.email) || member.member.id,
                 details && details.node.image)}
@@ -62,12 +63,15 @@ export class Team extends React.Component {
     );
   }
 
-  getDetails = (member) => {
+  getMemberDetails = (member) => {
     return this.props.members.filter(m => m.node.id === member.member.id)[0];
   }
 
+  getOfferDetails = (offer) => {
+    return this.props.products.filter(p => p.node.id === offer.id)[0];
+  }
+
   render() {
-    console.log('Header', Header);
     return (
       <div className="container">
         <p />
@@ -111,6 +115,7 @@ export class Team extends React.Component {
           <p>
             {this.props.team.contactPoint.map((contactPoint) =>
               <a
+                key={contactPoint.id}
                 target="_blank"
                 href={contactPoint.id}
                 rel="nofollow noopener noreferrer"
@@ -130,8 +135,8 @@ export class Team extends React.Component {
           <h2>{this.props.memberName}</h2>
 
           {this.props.team.membership.filter((member) => !member.endDate)
-            .map((member) => [member, this.getDetails(member)]).map(([member, details]) =>
-              <div>
+            .map((member) => [member, this.getMemberDetails(member)]).map(([member, details]) =>
+              <div key={member.member.id}>
                 {this.getImage(details.node.email, details.node.image)}
                 <p className="details">
                   {this.getName(details.node.id, details.node.name[this.props.lang])}{" "}<br />
@@ -162,18 +167,18 @@ export class Team extends React.Component {
 
           <h2>{this.props.makesOfferName}</h2>
 
-          {this.props.team.makesOffer.map((offer) =>
-            <p>
-              <a
-                target="_blank"
-                rel="nofollow noopener noreferrer"
-                href={offer.id}
-              >
-                {offer.id}
-              </a>
-              <br />
-              {offer.name}
-            </p>
+          {this.props.team.makesOffer
+           .map((offer) => [offer, this.getOfferDetails(offer)]).map(([offer, details]) =>
+            <div key={offer.id}>
+              {this.getImage(offer.id, details.node.image)}
+              <p className="details">
+                <a href={"/product/" + simpleId(offer.id)}>
+                  {offer.name}
+                </a>
+                <br />
+                {(details.node.slogan && details.node.slogan[this.props.lang]) || offer.name}
+              </p>
+            </div>
           )}
         </div>
         <Footer companyDetails={this.props.companyDetails} privacy={this.props.privacy} />
diff --git a/gatsby/lobid/src/templates/product.js b/gatsby/lobid/src/templates/product.js
new file mode 100644
index 00000000..976e9097
--- /dev/null
+++ b/gatsby/lobid/src/templates/product.js
@@ -0,0 +1,79 @@
+import React from "react";
+import { graphql } from "gatsby";
+import { Product } from "../components/product.html";
+
+export default function ProductPage({ data, location, pageContext }) {
+  const product = data.allFile.edges.slice(-1).pop().node.childProductJson
+  return (<Product
+    product={product}
+    pubs={data.allPublicationJson.edges
+      .map(edge => edge.node)
+      .filter(p => p.about && p.about.find(a => a.id.includes(pageContext.id)))
+      .sort((a, b) => b.datePublished.localeCompare(a.datePublished))
+    }
+    contactName="Kontakt"
+    publications="Publikationen"
+    language="English"
+    teamLink="/team-de"
+    hasPart="Besteht aus"
+    isBasedOn="Basiert auf"
+    isRelatedTo="Bezug"
+    companyDetails="Impressum"
+    privacy="Datenschutz"
+    contactPointId="mailto:semweb@hbz-nrw.de"
+  />);
+}
+
+export const query = graphql`
+  query ProductQuery($id: String!) {
+    allFile (filter: { name: { eq : $id }}) {
+      edges {
+        node {
+          childProductJson {
+            name {
+              label: de
+            }
+            slogan {
+              label: de
+            }
+            description {
+              label: de
+            }
+            id,
+            hasPart {
+              id
+            },
+            isBasedOn {
+              id
+            },
+            isRelatedTo {
+              id
+            }
+          }
+        }
+      }
+    }
+    allPublicationJson {
+      edges {
+        node {
+          id
+          type
+          creator {
+            id
+          }
+          name {
+            de
+            en
+          }
+          about {
+            id
+          }
+          datePublished
+          fields {
+            jsonFile
+          }
+        }
+      }
+    }
+  }
+`;
diff --git a/gatsby/lobid/src/templates/team.js b/gatsby/lobid/src/templates/team.js
index 0bab883b..620f316e 100644
--- a/gatsby/lobid/src/templates/team.js
+++ b/gatsby/lobid/src/templates/team.js
@@ -7,6 +7,7 @@ export default ({ data, location, pageContext }) => {
   <Team
     team={data.dataJson}
     members={data.allTeamJson.edges}
+    products={data.allProductJson.edges}
     lang={pageContext.lang}
     contactName={pageContext.lang==="de"?"Kontakt":"Contact"}
     subtitle={pageContext.lang==="de"?"Dateninfrastruktur für Bibliotheken":"Data infrastructure for libraries"}
@@ -80,5 +81,17 @@ export const query = graphql`
         }
       }
     }
+    allProductJson {
+      edges {
+        node {
+          id
+          slogan {
+            de
+            en
+          }
+          
+        }
+      }
+    }
   }
 `;
diff --git a/gatsby/lobid/static/product/lobid.json b/gatsby/lobid/static/product/lobid.json
new file mode 100644
index 00000000..c77d972e
--- /dev/null
+++ b/gatsby/lobid/static/product/lobid.json
@@ -0,0 +1,49 @@
+{
+  "@context": "https://schema.org",
+  "id": "https://lobid.org",
+  "type": [
+    "Product"
+  ],
+  "name": {
+    "en": "lobid",
+    "de": "lobid"
+  },
+  "slogan": {
+    "de": "Dateninfrastruktur für Bibliotheken",
+    "en": "Data infrastructure for libraries"
+  },
+  "description": {
+    "de": "lobid stellt Rechercheoberflächen und offene Programmierschnittstellen (APIs) zur Verfügung, die auf Linked Open Data (LOD) basieren. lobid wird vom Hochschulbibliothekszentrum des Landes NRW betrieben.",
+    "en": "lobid provides Linked Open Data (LOD) services for libraries, consisting of user interfaces (UIs) and application programming interfaces (APIs). lobid is run by the North Rhine-Westphalian Library Service Centre (hbz)."
+  },
+  "startDate": "2010-08",
+  "maintainer": {
+    "id": "http://stage.lobid.org/team#!",
+    "name": {
+      "de": "Offene Infrastruktur",
+      "en": "Open Infrastructure"
+    },
+    "type": "Organization"
+  },
+  "hasPart": [
+    {
+      "id": "https://lobid.org/resources"
+    },
+    {
+      "id": "https://lobid.org/gnd"
+    },
+    {
+      "id": "http://lobid.org/organisations"
+    }
+  ],
+  "isBasedOn": [
+    {
+      "id": "https://metafacture.org"
+    }
+  ],  
+  "isRelatedTo": [
+    {
+      "id": "https://github.com/hbz/lobid-resources/milestone/1"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/gatsby/lobid/static/product/metafacture.json b/gatsby/lobid/static/product/metafacture.json
new file mode 100644
index 00000000..203ba771
--- /dev/null
+++ b/gatsby/lobid/static/product/metafacture.json
@@ -0,0 +1,24 @@
+{
+  "@context": "https://schema.org",
+  "id": "https://metafacture.org",
+  "type": [
+    "Product"
+  ],
+  "name": {
+    "en": "Metafacture",
+    "de": "Metafacture"
+  },
+  "url": "https://metafacture.org",
+  "description": {
+    "en": "Metafacture is a toolkit for processing semi-structured data with a focus on library metadata. It provides a versatile set of tools for reading, writing and transforming data. Metafacture can be used as a stand-alone application or as a Java library in other applications. The name Metafacture is a portmanteau of the words meta data and manufacture.",
+    "de": "Metafacture is ein Toolkit für die Verarbeitung von (semi-)strukturierten Daten mit dem Fokus auf bibliothekarische Metadaten. Es bietet ein vielseitiges Set an Werkzeugen für das Auslesen, Schreiben und Transformieren von Daten. Metafacture kann als alleinstehende Applikaiton oder als Java Library in anderen Applikationen genutzt werden. Der Name Metafacture ist eine Zusammensetzung der Wörter Metadaten und manufacture (eng.: herstellen)."
+  },
+  "maintainer": {
+    "id": "http://stage.lobid.org/team#!",
+    "name": {
+      "de": "Offene Infrastruktur",
+      "en": "Open Infrastructure"
+    },
+    "type": "Organization"
+  }
+}
\ No newline at end of file
diff --git a/gatsby/lobid/static/product/nwbib.json b/gatsby/lobid/static/product/nwbib.json
new file mode 100644
index 00000000..b9287d32
--- /dev/null
+++ b/gatsby/lobid/static/product/nwbib.json
@@ -0,0 +1,31 @@
+{
+  "@context": "https://schema.org",
+  "id": "https://nwbib.de",
+  "type": [
+    "Product"
+  ],
+  "name": {
+    "de": "Nordrhein-Westfälische Bibliographie",
+    "en": "Bibliography of North Rhine-Westfalia"
+  },
+  "alternateName": [
+    "NWBib"
+  ],
+  "description": {
+    "de": " Die Nordrhein-Westfälische Bibliographie (NWBib) verzeichnet die Literatur über das Land Nordrhein-Westfalen, seine Regionen, Orte und Persönlichkeiten, Literatur aus allen Lebens- und Wissensbereichen in Geschichte und Gegenwart. ",
+    "en": "The North-Rhine Westphalian Bibliography (NWBib) is a regional bibliography that records literature about North-Rhine Westphalia (NRW), its regions, places and people"
+  },
+  "isBasedOn": [
+    {
+      "id": "https://lobid.org"
+    }
+  ],
+  "maintainer": {
+    "id": "http://stage.lobid.org/team#!",
+    "name": {
+      "de": "Offene Infrastruktur",
+      "en": "Open Infrastructure"
+    },
+    "type": "Organization"
+  }
+}
\ No newline at end of file
diff --git a/gatsby/lobid/static/product/skohub.json b/gatsby/lobid/static/product/skohub.json
new file mode 100644
index 00000000..122ae2f4
--- /dev/null
+++ b/gatsby/lobid/static/product/skohub.json
@@ -0,0 +1,23 @@
+{
+  "id": "https://skohub.io",
+  "type": [
+    "Product"
+  ],
+  "name": {
+    "en": "SkoHub",
+    "de": "SkoHub"
+  },
+  "url": "https://skohub.io",
+  "description": {
+    "en": "SkoHub supports a novel approach for finding content on the web. The general idea is to extend the scope of Knowledge Organization Systems (KOS) to also act as communication hubs for publishers and information seekers. In effect, SkoHub allows to follow specific subjects in order to be notified when new content about that subject is published.",
+    "de": "SkoHub unterstützt einen neuen Zugang, um Inhalte im Netz zu finden. Die allgemeine Idee von SkoHub ist die Reichweite von Knowledge Organization Systems (KOS) so zu erweitern, dass sie auch  als communication hub (?) zwischen Metadatenbereitsteller:innen und Imformationssuchende eingesetzt werden können. In der Tat, ermöglicht SkoHub das Folgen bestimmter Themen, um benachrichtigt zu werden, wenn neue Inhalte veröffentlicht werden."
+  },
+  "maintainer": {
+    "id": "http://stage.lobid.org/team#!",
+    "name": {
+      "de": "Offene Infrastruktur",
+      "en": "Open Infrastructure"
+    },
+    "type": "Organization"
+  }
+}
\ No newline at end of file