diff --git a/public/collection.html b/public/collection.html
index 5835a4a..9f3df08 100644
--- a/public/collection.html
+++ b/public/collection.html
@@ -9,18 +9,43 @@
     <link rel="stylesheet" href="assets/index.css">
 </head>
 
-<body class="m-5">
-    <div class="m-5">
-        <a class="btn btn-outline-dark" href="options.html">Go to options</a>
-        <button class="btn btn-outline-dark" id="logButton">Show collection</button>
-        <button class="btn btn-outline-dark" id="clearButton">Clear collection</button>
-    </div>
-
-
-    <h1 class="mb-3">Your collected definitions</h1>
-    <div id="container-collection"></div>
+<body class="m-5 mx-auto" style="max-width: 60em;">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-md-12">
+                <nav class="navbar navbar-expand-lg navbar-light bg-light mb-5">
+                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                        <ul class="navbar-nav">
+                            <li class="nav-item active">
+                                <a class="nav-link" href="options.html">Options</a>
+                            </li>
+                            <li class="nav-item active">
+                                <a class="nav-link" href="collection.html">Collection</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="info.html">Info</a>
+                            </li>
+                        </ul>
+                    </div>
+                    <button class="btn btn-outline-dark me-3" id="logButton">Show collection</button>
+                    <button class="btn btn-outline-dark" id="clearButton">Clear collection</button>
+                </nav>
+                <div class="jumbotron">
+                    <h1><img src="images/icon48.png" alt="Kerific logo" class="logo me-5">Kerific collection</h1>
+                    <p>
+                        Collection.
+                    </p>
+                    <!-- <p>
+                                                        <a class="btn btn-primary btn-large" href="#">Learn more</a>
+                                                    </p> -->
+                </div>
 
+            </div>
 
+            <h1 class="mb-3">Your collected definitions</h1>
+            <div id="container-collection"></div>
+        </div>
+    </div>
 </body>
 <!-- <script src="assets/index.js"></script> -->
 <script src="js/index.js"></script>
diff --git a/public/info.html b/public/info.html
new file mode 100644
index 0000000..44c379b
--- /dev/null
+++ b/public/info.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Kerific</title>
+    <link rel="stylesheet" href="css/bootstrap-5.3.2/bootstrap.min.css">
+    <link rel="stylesheet" href="assets/index.css">
+</head>
+
+<body class="m-5 mx-auto" style="max-width: 60em;">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-md-12">
+                <nav class="navbar navbar-expand-lg navbar-light bg-light mb-5">
+                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                        <ul class="navbar-nav">
+                            <li class="nav-item active">
+                                <a class="nav-link" href="options.html">Options</a>
+                            </li>
+                            <li class="nav-item active">
+                                <a class="nav-link" href="collection.html">Collection</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="info.html">Info</a>
+                            </li>
+                        </ul>
+                    </div>
+                </nav>
+                <div class="jumbotron">
+                    <h1><img src="images/icon48.png" alt="Kerific logo" class="logo me-5">Kerific info</h1>
+                    <p>Version: <span id="versionNumber">-</span></p>
+                    <!-- <p>
+                        <a class="btn btn-primary btn-large" href="#">Learn more</a>
+                    </p> -->
+                </div>
+            </div>
+        </div>
+        <div class="row gx-5">
+            <div class="col-md-4">
+                <h2>
+                    How does it work?
+                </h2>
+                <video style="max-width: 100%;" src="video/explainer-1.mp4" controls autoplay loop></video>
+            </div>
+            <div class="col-md-4">
+                <h2>
+                    How does it work?
+                </h2>
+                <p>This extension loads glossaries related to Key Event Receipt Infrastructure (KERI).</p>
+                <p>It looks for matches in the text of a web page with definitions in the glossaries, and makes them
+                    clickable.</p>
+                <p>Click on the extension icon to see the glossaries that are loaded.</p>
+                <p>Clicking shows a modal in the webpage showing the found definitions, so you can compare.</p>
+                <p>It works on any webpage, but is especially useful for the KERI documentation.</p>
+                <p>It does NOT work on pdf's.</p>
+
+                <p>There are currently no options to configure.</p>
+
+            </div>
+            <div class="col-md-4">
+                <h2>
+                    Heading
+                </h2>
+                <p>
+                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
+                    mauris
+                    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
+                    euismod. Donec sed odio dui.
+                </p>
+                <p>
+                    <a class="btn" href="#">View details »</a>
+                </p>
+            </div>
+        </div>
+    </div>
+</body>
+<script src="showVersionNumber.js"></script>
+<!-- <script src="assets/index.js"></script> -->
+
+</html>
\ No newline at end of file
diff --git a/public/options.html b/public/options.html
index cdd5053..5d1d89d 100644
--- a/public/options.html
+++ b/public/options.html
@@ -9,24 +9,82 @@
     <link rel="stylesheet" href="assets/index.css">
 </head>
 
-<body class="m-5">
-    <div class="m-5">
-        <a class="btn btn-outline-dark" href="collection.html">Go to collection</a>
-    </div>
-
-    <h1><img src="images/icon128.png" alt="Kerific logo" class="logo">Kerific</h1>
-    <p>Version: <span id="versionNumber">-</span></p>
-    <p>This extension loads glossaries related to Key Event Receipt Infrastructure (KERI).</p>
-    <p>It looks for matches in the text of a web page with definitions in the glossaries, and makes them clickable.</p>
-    <p>Click on the extension icon to see the glossaries that are loaded.</p>
-    <p>Clicking shows a modal in the webpage showing the found definitions, so you can compare.</p>
-    <p>It works on any webpage, but is especially useful for the KERI documentation.</p>
-    <p>It does NOT work on pdf's.</p>
-    <video src="video/explainer-1.mp4" controls autoplay loop></video>
-    <p>There are currently no options to configure.</p>
+<body class="m-5 mx-auto" style="max-width: 60em;">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-md-12">
+                <nav class="navbar navbar-expand-lg navbar-light bg-light mb-5">
+                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                        <ul class="navbar-nav">
+                            <li class="nav-item active">
+                                <a class="nav-link" href="options.html">Options</a>
+                            </li>
+                            <li class="nav-item active">
+                                <a class="nav-link" href="collection.html">Collection</a>
+                            </li>
+                            <li class="nav-item">
+                                <a class="nav-link" href="info.html">Info</a>
+                            </li>
 
+                        </ul>
+                    </div>
+                </nav>
+                <div class="jumbotron">
+                    <h1><img src="images/icon48.png" alt="Kerific logo" class="logo me-5">Kerific settings</h1>
+                    <p>
+                        Settings.
+                    </p>
+                    <!-- <p>
+                        <a class="btn btn-primary btn-large" href="#">Learn more</a>
+                    </p> -->
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-4">
+                <h2>
+                    Heading
+                </h2>
+                <p>
+                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
+                    mauris
+                    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
+                    euismod. Donec sed odio dui.
+                </p>
+                <p>
+                    <a class="btn" href="#">View details »</a>
+                </p>
+            </div>
+            <div class="col-md-4">
+                <h2>
+                    Heading
+                </h2>
+                <p>
+                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
+                    mauris
+                    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
+                    euismod. Donec sed odio dui.
+                </p>
+                <p>
+                    <a class="btn" href="#">View details »</a>
+                </p>
+            </div>
+            <div class="col-md-4">
+                <h2>
+                    Heading
+                </h2>
+                <p>
+                    Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
+                    mauris
+                    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
+                    euismod. Donec sed odio dui.
+                </p>
+                <p>
+                    <a class="btn" href="#">View details »</a>
+                </p>
+            </div>
+        </div>
+    </div>
 </body>
-<script src="showVersionNumber.js"></script>
-<!-- <script src="assets/index.js"></script> -->
 
 </html>
\ No newline at end of file
