diff --git a/TOOLS/ce/src/main/resources/template.html b/TOOLS/ce/src/main/resources/template.html
index 63e0793cea..c369e39654 100644
--- a/TOOLS/ce/src/main/resources/template.html
+++ b/TOOLS/ce/src/main/resources/template.html
@@ -1,58 +1,100 @@
 <!DOCTYPE html>
 <html lang="de">
+
 <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
     <title>The OPAL Framework $version</title>
     <meta content="The OPAL Framework $version" name="description"/>
     <meta content="The OPAL Framework $version" name="keywords"/>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
-    <link href="lib/index.css" media="screen" type="text/css" rel="stylesheet"/>
-    <link href="lib/template.css" media="screen" type="text/css" rel="stylesheet"/>
-    <link href="lib/print.css" media="print" type="text/css" rel="stylesheet"/>
-    <link href="lib/diagrams.css" media="screen" type="text/css" rel="stylesheet" id="diagrams-css"/>
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+    <script type="text/javascript" src="scripts/theme.js"></script>
+    <link rel="stylesheet" href="styles/theme/bundle.css">
+    <link rel="stylesheet" href="styles/theme/components/bundle.css">
+    <link rel="stylesheet" href="styles/theme/components/button/bundle.css">
+    <link rel="stylesheet" href="styles/theme/layout/bundle.css">
+    <link rel="stylesheet" href="styles/nord-light.css">
+    <link rel="stylesheet" href="styles/dotty-icons.css">
+    <link rel="stylesheet" href="styles/filter-bar.css">
+    <link rel="stylesheet" href="styles/code-snippets.css">
+    <link rel="stylesheet" href="styles/searchbar.css">
+    <link rel="stylesheet" href="styles/social-links.css">
+    <link rel="stylesheet" href="styles/versions-dropdown.css">
+    <link rel="stylesheet" href="styles/content-contributors.css">
+    <link rel="stylesheet" href="styles/fontawesome.css">
+    <link rel="stylesheet" href="styles/apistyles.css">
+    <script>var pathToRoot = "";</script>
+
     <style>
         body {
             font-family: sans-serif;
             padding: 1em;
+            background: var(--background-default);
         }
 
         hr {
-            margin-top : 2em;
-            margin-bottom: 2em;
+            margin-top : 0.75em;
+            margin-bottom: 0.75em;
             border-width: 1px;
-            color: #DCDCDE;
+            color: var(--border-default);
         }
 
         .value {
             padding: 1em;
-            border: 0.1em solid #DCDCDE;
+            border: 0.1em solid var(--border-default);
             border-radius: 0.5em;
             margin-left: 2em;
             display: none;
+            position:relative;
         }
         .value.expanded {
             display: block;
         }
 
         .key {
-            color: #28272D;
-            background-color: #FBFAFD;
             margin: 1em 0em;
+            position:relative;
         }
 
         .preview {
             font-weight: normal;
-            font-size: 0.65em;
-            color: #626168;
+            font-size: 1.0em;
+            color: var(--text-secondary);
+        }
+
+        #config-content {
+            padding-top: calc(6 * var(--base-spacing));
+            padding-bottom: calc(6 * var(--base-spacing));
+            padding-right: 2em;
+            margin-left: 1em;
+            flex-flow: column;
+            color: var(--text-primary);
+            height: 92vh;
+            overflow-y:auto;
+        }
+
+        #config-content a {
+          color: var(--text-primary);
+          text-decoration: underline solid 1px;
+          -webkit-text-decoration-line: underline; /* Safari */
+          text-decoration-line: underline;
+          text-underline-offset: 2px;
+        }
+
+        #index-input {
+            width: 45vw;
+            border: 0.1em solid var(--border-default);
+            border-radius: 0.5em;
         }
 
         .expandButton {
             float: right;
-            color: #626168;
-            font-size: 0.5em;
+            color: var(--text-secondary);
+            font-size: 0.65em;
             padding: 0.4em;
-            border: 0.1em solid #DCDCDE;
+            border: 0.1em solid var(--border-default);
             border-radius: 0.25em;
             border-collapse: collapse;
         }
@@ -103,6 +145,7 @@
         }
 
     </style>
+
     <script type="module">
         import { highlightSearchTerm } from "https://cdn.jsdelivr.net/npm/highlight-search-term@1.0.2/src/index.js";
         const search = document.getElementById("index-input");
@@ -140,19 +183,27 @@
         };
     </script>
 </head>
-<body>
-<div id="search">
-    <span id="doc-title">The OPAL Framework<span id="doc-version">5.0.1-SNAPSHOT</span></span> <span class="close-results"><span class="left">&lt;</span> Back</span>
-    <div id="textfilter">
-        <span class="input"><input autocapitalize="none" placeholder="Search" id="index-input" type="text" accesskey="/" onkeyup="searchConfig()"/><i class="clear material-icons"></i><i id="search-icon" class="material-icons"></i></span>
+<body style="padding-right:0em;padding-left:0em;">
+<div id="header" class="body-small">
+    <div class="header-container-left"><a href="" class="logo-container"><span class="project-name h300">The
+                        OPAL Framework</span></a>
     </div>
+    <div class="header-container-right"><div id="textfilter">
+        <input class="scaladoc-searchbar-input" autocomplete="off" autocapitalize="none" placeholder="Search Configuration" id="index-input" type="text" accesskey="/" onkeyup="searchConfig()"/>
+    </div><span
+            id="theme-toggle" class="icon-button"></span><span id="mobile-menu-toggle"
+                                                               class="icon-button hamburger"></span></div>
 </div>
-<div id="content-scroll-container" style="-webkit-overflow-scrolling: touch;">
-    <div id="content-container" style="-webkit-overflow-scrolling: touch;">
-        <div id="content">
-            $body
-        </div>
-    </div>
+<div id="mobile-menu">
+    <div class="mobile-menu-header body-small"><span class="mobile-menu-logo"><span
+            class="project-name h300">The OPAL Framework $version</span></span><button id="mobile-menu-close"
+                                                                              class="icon-button close"></button></div>
+    <div class="mobile-menu-container body-medium"><input id="mobile-scaladoc-searchbar-input"
+                                                          class="scaladoc-searchbar-input" type="search" placeholder="Find anything"><span
+            id="mobile-theme-toggle" class="mobile-menu-item mode"></span></div>
+    </div><span id="mobile-sidebar-toggle" class="floating-button"></span>
+<div id="config-content" class="body-medium">
+    $body
 </div>
 
 <script>
diff --git a/TOOLS/ce/src/main/scala/org/opalj/ce/CommentParser.scala b/TOOLS/ce/src/main/scala/org/opalj/ce/CommentParser.scala
index 9fdc5094ba..c0421ab9c8 100644
--- a/TOOLS/ce/src/main/scala/org/opalj/ce/CommentParser.scala
+++ b/TOOLS/ce/src/main/scala/org/opalj/ce/CommentParser.scala
@@ -137,7 +137,7 @@ object CommentParser {
                         val terminatingIndex = line.indexWhere(objectKeyTerminatingChars.contains)
 
                         // Splitting the key from the string (while splitting of the ':' or '=' as they are not needed anymore
-                        currentKey = line.substring(0, terminatingIndex - 1).trim.stripPrefix("\"").stripSuffix("\"")
+                        currentKey = line.substring(0, terminatingIndex).trim.stripPrefix("\"").stripSuffix("\"")
                         line = line.substring(terminatingIndex).stripPrefix(":").stripPrefix("=").trim
 
                         // Evaluating the type of value
diff --git a/build.sbt b/build.sbt
index 9ebef3661d..e18d843d3c 100644
--- a/build.sbt
+++ b/build.sbt
@@ -159,7 +159,14 @@ lazy val `OPAL` = (project in file("."))
             validate,
             demos,
             tools
-        )
+        ),
+        Compile / unidoc := {
+            // Overrides doc method to include config documentation at doc
+            val originalDoc = (Compile / unidoc).value
+            (ConfigurationExplorer / Compile / compile).value
+            (ConfigurationExplorer / Compile / run).toTask("").value
+            originalDoc
+        }
     )
     .aggregate(
         common,
@@ -488,13 +495,6 @@ lazy val `ConfigurationExplorer` = (project in file("TOOLS/ce"))
         javaOptions += s"-Dbuild.version=${version.value}",
         name := "Configuration Explorer",
         libraryDependencies ++= Dependencies.ce,
-        Compile / doc := {
-            // Overrides doc method to include config documentation at doc
-            val originalDoc = (Compile / doc).value
-            (Compile / compile).value
-            (Compile / run).toTask("").value
-            originalDoc
-        },
         Compile / doc / scalacOptions ++= Opts.doc.title("OPAL - Configuration Explorer")
     )
     .dependsOn(
