diff --git a/app/app-styles/app.css b/app/app-styles/app.css
index 87142a7..6c3ced7 100644
--- a/app/app-styles/app.css
+++ b/app/app-styles/app.css
@@ -121,3 +121,50 @@
   position: absolute;
   right: var(--spacing-5);
 }
+
+[class^="label-"] {
+  width: 160px;
+  height: 20px;
+  border-radius: 24px;
+  display: block;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.label-proposed {
+  color: var(--color-black);
+  background-color: rgb(191 218 220);
+}
+
+.label-exploring {
+  color: var(--color-white);
+  background-color: rgb(28 135 137);
+}
+
+.label-accepted {
+  color: var(--color-white);
+  background-color: var(--color-brand-hc-dark);
+}
+
+.label-ready-for-release {
+  color: var(--color-white);
+  background-color: rgb(133 13 67);
+}
+
+.label-released {
+  color: var(--color-white);
+  background-color: rgb(29 62 124);
+}
+
+.label-recommended {
+  color: var(--color-black);
+  background-color: rgb(80 233 187);
+}
+
+.label-discontinued, .label-closed {
+  color: var(--color-black);
+  background-color: rgb(239 216 9);
+}
+
+
diff --git a/app/router.js b/app/router.js
index 10cd1c9..3121820 100644
--- a/app/router.js
+++ b/app/router.js
@@ -17,6 +17,7 @@ Router.map(function () {
     this.route('discontinued');
     this.route('closed');
     this.route('ready-for-release');
+    this.route('library');
   });
   this.route('create-rfc');
   this.route('role-core-team');
diff --git a/app/routes/stages/library.js b/app/routes/stages/library.js
new file mode 100644
index 0000000..ed9fc80
--- /dev/null
+++ b/app/routes/stages/library.js
@@ -0,0 +1,8 @@
+import Route from '@ember/routing/route';
+
+export default class StagesLibraryRoute extends Route {
+  async model() {
+    return (await import('rfcs-app-toc-builder:index.json'))
+      .default;
+  }
+}
diff --git a/app/templates/application.gjs b/app/templates/application.gjs
index 7b35d54..6dd0127 100644
--- a/app/templates/application.gjs
+++ b/app/templates/application.gjs
@@ -30,7 +30,7 @@ import { NavigationNarrator } from 'ember-a11y-refocus';
             </li>
           </ul>
         </li>
-        <li class="toc-heading">RFC library</li>
+        <li class="toc-heading"><LinkTo @route="stages.library">RFC library</LinkTo></li>
         <li class="toc-item">
           <ul class="table-of-contents sub-table-of-contents">
             <li class="toc-item">
diff --git a/app/templates/stages/library.gjs b/app/templates/stages/library.gjs
new file mode 100644
index 0000000..07ce25c
--- /dev/null
+++ b/app/templates/stages/library.gjs
@@ -0,0 +1,16 @@
+import { pageTitle } from 'ember-page-title';
+import { LinkTo } from '@ember/routing';
+
+<template>
+  {{pageTitle "RFC library"}}
+  <div>
+    <h1>RFC library</h1>
+    <p>The table below shows all the RFCs in chronological order. If you are interested in more information you can click on the RFC or check out the specific stages.</p>
+    {{#each @model as |rfc|}}
+      <div class="rfc-card"><span>#{{rfc.number}}</span><div><LinkTo
+          @route="rfc"
+          @model={{rfc.link}}
+        >{{rfc.title}}</LinkTo></div><span class="label-{{rfc.stage}}">{{rfc.stage}}</span></div>
+    {{/each}}
+  </div>
+</template>
diff --git a/lib/toc-builder.js b/lib/toc-builder.js
index 795c67e..811d9fe 100644
--- a/lib/toc-builder.js
+++ b/lib/toc-builder.js
@@ -131,6 +131,18 @@ function loadFcpData(contentFolder, dataFolder) {
       result.push(fileContents);
     }
   }
+  // the source code for "virtual-module"
+  return `${JSON.stringify(result, null, 2)}`;
+}
+
+function loadIndexData(contentFolder, dataFolder) {
+  const data = loadRFCData(contentFolder, dataFolder);
+
+  const result = [];
+
+  for (let fileContents of data) {
+      result.push({number: fileContents.number, link: fileContents.rfcFile, title: fileContents.title,stage: fileContents.currentStage});
+  }
 
   // the source code for "virtual-module"
   return `${JSON.stringify(result, null, 2)}`;
@@ -168,6 +180,12 @@ export default function tocBuilder(contentFolder, dataFolder) {
         return loadFcpData(contentFolder, dataFolder);
       }
 
+      if (id.startsWith('rfcs-app-toc-builder:index.json')) {
+        this.addWatchFile(contentFolder);
+        this.addWatchFile(dataFolder);
+        return loadIndexData(contentFolder, dataFolder);
+      }
+
       return null;
     },
   };