diff --git a/index.html b/index.html
index c6d315b..cfeefdf 100644
--- a/index.html
+++ b/index.html
@@ -36,6 +36,45 @@
   </div>
 </main>
 
+<div class="container totp-about">
+  <div class="card">
+    <div class="card-body">
+      <h3 class="card-title" id="what-is-this">What is this?</h3>
+      <p class="card-text">This is a code generator for the <a
+        href="https://en.wikipedia.org/wiki/Time-based_One_Time_Password"><em>Time-based One Time Password</em>
+        (TOTP)</a> algorthm. It's intended for developers of web applications with TOTP support to quickly generate
+        codes for testing purposes. It's <strong>not</strong> a general purpose authenticator app.
+      </p>
+      <p class="card-text">What this tool can do:</p>
+      <ul class="card-text">
+        <li>Quickly generate TOTP codes;</li>
+        <li>View codes for past and future time-windows; and</li>
+        <li>Fiddle with various TOTP paramters.</li>
+      </ul>
+      <p class="card-text">What this tool <strong>can't</strong> do:</p>
+      <ul class="card-text">
+        <li>Store your TOTP secrets;</li>
+        <li>Act as your general purpose authenticator app; and</li>
+        <li>Scan TOTP QR codes.</li>
+      </ul>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-body">
+      <h3 class="card-title" id="what-is-this">How do I use this tool?</h3>
+      <p class="card-text">To start, simply type or paste in the TOTP secret key. This should be in the standard base32
+        format. This will generate 6-digit TOTP codes that update every 30 seconds using the SHA-1 algorithm that's used
+        by default in all major authenticator apps.
+      </p>
+      <p class="card-text">You can press "show advanced settings" to adjust the TOTP parameters to use non-default
+        values.
+      </p>
+      <p class="card-text">The generated codes are displayed in chronological order. The current code is shown in large
+        text. The codes above are past codes, and the codes below are future codes.</p>
+    </div>
+  </div>
+</div>
+
 <script type="module" src="/src/main.tsx"></script>
 </body>
 </html>
diff --git a/src/index.scss b/src/index.scss
index d17e4d7..b7f2dcd 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -18,6 +18,7 @@
 @import 'bootstrap/scss/_helpers.scss';
 @import 'bootstrap/scss/_transitions.scss';
 @import 'bootstrap/scss/_popover.scss';
+@import 'bootstrap/scss/_card.scss';
 
 nav {
   background-color: $body-tertiary-bg;
@@ -69,6 +70,10 @@ nav {
   margin-bottom: 0.5em;
 }
 
+.totp-about .card {
+  margin-top: 0.5em;
+}
+
 .totp-code {
   text-align: center;
   height: 1.5em;