diff --git a/.gitignore b/.gitignore
index 615fcca..9785c98 100644
--- a/.gitignore
+++ b/.gitignore
@@ -152,4 +152,5 @@ dmypy.json
 
 # End of https://www.toptal.com/developers/gitignore/api/django
 node_modules
-static
+/static
+/core/static/dist
diff --git a/app/settings.py b/app/settings.py
index b05fe71..75d3bdd 100644
--- a/app/settings.py
+++ b/app/settings.py
@@ -125,7 +125,7 @@
 # https://docs.djangoproject.com/en/3.1/howto/static-files/
 
 STATIC_URL = '/static/'
-STATIC_ROOT = os.path.join(BASE_DIR, "static")
+STATIC_ROOT = BASE_DIR / "static"
 
 CHANNEL_LAYERS = {
         "default": {
diff --git a/core/static/css/styles.css b/core/static/css/styles.css
new file mode 100644
index 0000000..0a46d57
--- /dev/null
+++ b/core/static/css/styles.css
@@ -0,0 +1,69 @@
+:root {
+    --justify-important: left;
+}
+
+header {
+    padding-top: 0;
+    margin-left: 0.5rem;
+}
+html {
+    font-size: 10px;
+}
+body {
+    font-size: 1.6rem;
+    height: 100%;
+    padding: 0;
+}
+aside {
+    padding: 0.5rem;
+    min-height: calc(100vh - 200px);
+}
+footer {
+    position: fixed;
+    right: 0;
+    left: 0;
+}
+
+footer,
+header,
+main {
+    margin: 0 auto;
+    max-width: var(--width-content);
+    padding: 0rem 2rem;
+}
+
+hr { margin-top: 0; margin-bottom: 0; }
+h1 { font-family: 'Open Sans', sans-serif; }
+nav ul li { display: block; }
+
+table {
+    width: 100%;
+    display: inline-table;
+}
+
+form {
+    max-width: 100%;
+}
+
+.min-vh-100 {
+    min-height: 100vh !important;
+}
+
+flex-container { display: flex; }
+.flex { display: flex; }
+.flex-grow { flex-grow: 1; }
+.self-center { align-self: center; }
+.leading-none { line-height: 1; }
+.m-0 { margin: 0; }
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: 1rem; }
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-battam: 1rem; }
+.pl-1 { padding-left: 1rem; }
+.pr-2 { padding-right: 2rem; }
+.py--5 { padding-top: 0.5rem; padding-bottom: 0.5rem;}
+.py-1 { padding-top: 1rem; padding-bottom: 1rem;}
+
+.border-right {
+    border-right: 1px #AAA solid;
+}
diff --git a/core/templates/base.html b/core/templates/base.html
index 886f5e8..793d5f4 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -1,51 +1,55 @@
 {% load static pygmentize %}
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <link rel="icon" href="https://via.placeholder.com/70x70">
-    <link rel="stylesheet" href="https://unpkg.com/mvp.css">
-    <style>{% pygments_css %}</style>  <!-- load css for pygments -->
-    <meta charset="utf-8">
-    <meta name="description" content="My description">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Expo</title>
-    <script src="{% static 'dist/js/example.js' %}"></script>
+  <link rel="icon" href="https://via.placeholder.com/70x70">
+  <link rel="stylesheet" href="https://unpkg.com/mvp.css">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
+  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
+  <style>{% pygments_css %}</style> <!-- load css for pygments -->
+  <meta charset="utf-8">
+  <meta name="description" content="My description">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Expo</title>
+  <script src="{% static 'dist/js/example.js' %}"></script>
 </head>
 
-<body>
-    <header style="padding-bottom:0px;">
-        <nav style="margin-bottom:0px;">
-            <h1>
-            <a href="/"> django-sockpuppet Expo </a>
-            </h1>
-        <ul>
-            <li><a href="{%url 'index' %}">Index</a></li>
-            <li><a>Demos </a>
-                <ul>
-                    <li><a href="{%url 'example' %}">Example</a></li>
-                    <li><a href="{%url 'book_search' %}">BookSearch</a></li>
+<body class="min-vh-100">
 
-                </ul>
-            </li>
+  <header class="flex py-1">
+    <img
+      src="https://i.imgur.com/FX0KFM7m.jpg"
+      style="filter: grayscale(0.9) contrast(1.2); height: 4rem;" alt="" />
+      <h1 class="leading-none m-0 pl-1 self-center">
+        <a href="{% url 'index' %}">Sockpuppet</a>
+      </h1>
+  </header>
+  <hr>
+  <flex-container>
+    <aside class="border-right pr-2">
+      <nav>
+        <ul>
+          <li><a href="{% url 'example' %}">Example</a></li>
+          <li><a href="{% url 'book_search' %}">BookSearch</a></li>
         </ul>
-        </nav>
-        <h2> {% block subtitle %}
-                <img src="https://i.imgur.com/FX0KFM7m.jpg" alt=""/>
-            {% endblock subtitle %}</h2>
-    </header>
-
-    <main>
-        <hr style="margin-top:0px;">
- 	{% block main %}
-	{% endblock %}
-
+      </nav>
+    </aside>
+    <main class="flex-grow">
+      <h2> {% block subtitle %}<h1>Django Sockpuppet</h1>{% endblock subtitle %}</h2>
+      {% block main %}
+      {% endblock %}
     </main>
-    <footer>
-        <p>
-        by <a href="https://twitter.com/zodman">@zodman</a>
-        </p>
-        <a href="http://www.djangoproject.com/"><img src="https://www.djangoproject.com/m/img/badges/djangosite80x15.gif" border="0" alt="A Django site." title="A Django site." /></a>
-    </footer>
+  </flex-container>
+  <footer>
+    <p>
+      by <a href="https://twitter.com/zodman">@zodman</a>
+    </p>
+    <a href="http://www.djangoproject.com/"><img src="https://www.djangoproject.com/m/img/badges/djangosite80x15.gif"
+        border="0" alt="A Django site." title="A Django site." /></a>
+  </footer>
 </body>
 
 </html>
diff --git a/core/templates/book_search.html b/core/templates/book_search.html
index 5969e59..f0c2bc3 100644
--- a/core/templates/book_search.html
+++ b/core/templates/book_search.html
@@ -31,13 +31,13 @@
                 </tr>
               </thead>
               <tbody>
-                  {% for book in books|slice:'0:5'  %}
+                  {% for book in books|slice:'0:10'  %}
                 <tr>
-                    <td>{{book.subject|join:', '|truncatechars:10}} </td>
+                    <td>{{book.subject|join:', '|truncatechars:40}} </td>
                     <td>{{book.title|truncatechars:30}}</td>
                     <td>{{book.author_name|join:', '|truncatechars:30}}</td>
                     <td>{{book.publish_year.0 }}</td>
-                    <td>{{book.isbn.0|truncatechars:5}}</td>
+                    <td>{{book.isbn.0|truncatechars:30}}</td>
                 </tr>
                   {% endfor %}
               </tbody>
