Logo and new navbar and new detail design

- logo in place
- new navbar - removed Joanna Lemon, etc
- tidying up the detail page, using cards and nicer titles
- better detail panel at the top of the page with a table in it

12 files changed, 369 insertions, 152 deletions

diff --git a/Makefile b/Makefile
index b2b27e3..300a5f4 100644
--- a/Makefile
+++ b/Makefile
@@ -2,6 +2,9 @@ all: build run migrate collectstatic
 
 start: build run migrate collectstatic
 
+sass:
+	sass --no-source-map ~/code/python/pyblackbird_cc/pyblackbird_cc/static/scss/custom.scss ~/code/python/pyblackbird_cc/pyblackbird_cc/static/css/custom.css
+
 sync-env:
 	scp .env-prod substracker-web:code/pyblackbird_cc/.env
 
diff --git a/pyblackbird_cc/resources/forms.py b/pyblackbird_cc/resources/forms.py
index f4c6654..00869be 100644
--- a/pyblackbird_cc/resources/forms.py
+++ b/pyblackbird_cc/resources/forms.py
@@ -20,12 +20,9 @@ ALLOWED_PDFS = 20
 
 
 def _create_choices_tuple() -> List[Tuple[str, str]]:
-    qs_lst = list(ResourceSubcategory.objects.values_list('name', flat=True))
-    qs_lst.sort()
-    res = []
-    for x in qs_lst:
-        res.append((x, x))
-    return res
+    """Returns a list of tuples containing resource subcategory names."""
+    return sorted(list(ResourceSubcategory.objects.values_list('name', flat=True)), key=str)
+
 
 
 class ResourceCreateForm(forms.Form):
diff --git a/pyblackbird_cc/static/css/custom.css b/pyblackbird_cc/static/css/custom.css
index c4fc153..009cc07 100644
--- a/pyblackbird_cc/static/css/custom.css
+++ b/pyblackbird_cc/static/css/custom.css
@@ -13,7 +13,7 @@
   --bs-white: #fff;
   --bs-gray: #6c757d;
   --bs-gray-dark: #343a40;
-  --bs-primary: #51635e;
+  --bs-primary: #0d6efd;
   --bs-secondary: #6c757d;
   --bs-success: #198754;
   --bs-info: #0dcaf0;
@@ -194,11 +194,11 @@ sup {
 }
 
 a {
-  color: #51635e;
+  color: #0d6efd;
   text-decoration: underline;
 }
 a:hover {
-  color: #414f4b;
+  color: #0a58ca;
 }
 
 a:not([href]):not([class]), a:not([href]):not([class]):hover {
@@ -1728,7 +1728,7 @@ progress {
 }
 .btn-check:focus + .btn, .btn:focus {
   outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(81, 99, 94, 0.25);
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 .btn:disabled, .btn.disabled, fieldset:disabled .btn {
   pointer-events: none;
@@ -1737,32 +1737,32 @@ progress {
 
 .btn-primary {
   color: #fff;
-  background-color: #51635e;
-  border-color: #51635e;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
 }
 .btn-primary:hover {
   color: #fff;
-  background-color: #455450;
-  border-color: #414f4b;
+  background-color: #0b5ed7;
+  border-color: #0a58ca;
 }
 .btn-check:focus + .btn-primary, .btn-primary:focus {
   color: #fff;
-  background-color: #455450;
-  border-color: #414f4b;
-  box-shadow: 0 0 0 0.25rem rgba(107, 122, 118, 0.5);
+  background-color: #0b5ed7;
+  border-color: #0a58ca;
+  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
 }
 .btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
   color: #fff;
-  background-color: #414f4b;
-  border-color: #3d4a47;
+  background-color: #0a58ca;
+  border-color: #0a53be;
 }
 .btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
-  box-shadow: 0 0 0 0.25rem rgba(107, 122, 118, 0.5);
+  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
 }
 .btn-primary:disabled, .btn-primary.disabled {
   color: #fff;
-  background-color: #51635e;
-  border-color: #51635e;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
 }
 
 .btn-secondary {
@@ -1976,27 +1976,27 @@ progress {
 }
 
 .btn-outline-primary {
-  color: #51635e;
-  border-color: #51635e;
+  color: #0d6efd;
+  border-color: #0d6efd;
 }
 .btn-outline-primary:hover {
   color: #fff;
-  background-color: #51635e;
-  border-color: #51635e;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
 }
 .btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
-  box-shadow: 0 0 0 0.25rem rgba(81, 99, 94, 0.5);
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
 }
 .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
   color: #fff;
-  background-color: #51635e;
-  border-color: #51635e;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
 }
 .btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
-  box-shadow: 0 0 0 0.25rem rgba(81, 99, 94, 0.5);
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
 }
 .btn-outline-primary:disabled, .btn-outline-primary.disabled {
-  color: #51635e;
+  color: #0d6efd;
   background-color: transparent;
 }
 
@@ -2177,11 +2177,11 @@ progress {
 
 .btn-link {
   font-weight: 400;
-  color: #51635e;
+  color: #0d6efd;
   text-decoration: underline;
 }
 .btn-link:hover {
-  color: #414f4b;
+  color: #0a58ca;
 }
 .btn-link:disabled, .btn-link.disabled {
   color: #6c757d;
@@ -2212,10 +2212,10 @@ progress {
 }
 
 .link-primary {
-  color: #51635e;
+  color: #0d6efd;
 }
 .link-primary:hover, .link-primary:focus {
-  color: #414f4b;
+  color: #0a58ca;
 }
 
 .link-secondary {
@@ -2615,7 +2615,7 @@ progress {
 }
 
 .border-primary {
-  border-color: #51635e !important;
+  border-color: #0d6efd !important;
 }
 
 .border-secondary {
@@ -3444,7 +3444,7 @@ progress {
 
 /* rtl:end:remove */
 .text-primary {
-  color: #51635e !important;
+  color: #0d6efd !important;
 }
 
 .text-secondary {
@@ -3500,7 +3500,7 @@ progress {
 }
 
 .bg-primary {
-  background-color: #51635e !important;
+  background-color: #0d6efd !important;
 }
 
 .bg-secondary {
@@ -6178,10 +6178,6 @@ progress {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }
 
-h2, .h2 {
-  color: #51635e;
-}
-
 .ey_literacy {
   background-color: #ebde34;
   color: black;
diff --git a/pyblackbird_cc/static/css/project.css b/pyblackbird_cc/static/css/project.css
index 79d6874..dca4100 100644
--- a/pyblackbird_cc/static/css/project.css
+++ b/pyblackbird_cc/static/css/project.css
@@ -28,12 +28,12 @@
   src: url(../fonts/LibreFranklin-Italic.ttf);
 }
 
-body {
-  background-color: #eee;
-}
+/*body {*/
+/*  background-color: #eee;*/
+/*}*/
 
 h1 {
-    color: #657c76;
+    /*color: #657c76;*/
     font-size: 2.0rem;
     font-weight: bold;
 }
diff --git a/pyblackbird_cc/static/images/AL_circle_logo_black_200x200.png b/pyblackbird_cc/static/images/AL_circle_logo_black_200x200.png
new file mode 100644
index 0000000..c318e81
--- /dev/null
+++ b/pyblackbird_cc/static/images/AL_circle_logo_black_200x200.png
diff --git a/pyblackbird_cc/static/images/AL_long_logo_black_grey.png b/pyblackbird_cc/static/images/AL_long_logo_black_grey.png
new file mode 100644
index 0000000..21f51c9
--- /dev/null
+++ b/pyblackbird_cc/static/images/AL_long_logo_black_grey.png
diff --git a/pyblackbird_cc/static/images/AL_long_logo_black_grey.svg b/pyblackbird_cc/static/images/AL_long_logo_black_grey.svg
new file mode 100644
index 0000000..9214092
--- /dev/null
+++ b/pyblackbird_cc/static/images/AL_long_logo_black_grey.svg
@@ -0,0 +1,177 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="112.8811mm"
+   height="38.983829mm"
+   viewBox="0 0 112.8811 38.983829"
+   version="1.1"
+   id="svg1"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <linearGradient
+       id="linearGradient22">
+      <stop
+         style="stop-color:#2ec522;stop-opacity:1;"
+         offset="0"
+         id="stop21" />
+      <stop
+         style="stop-color:#24dbc2;stop-opacity:1;"
+         offset="1"
+         id="stop22" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient19">
+      <stop
+         style="stop-color:#127deb;stop-opacity:1;"
+         offset="0.00093657"
+         id="stop18" />
+      <stop
+         style="stop-color:#9972eb;stop-opacity:0.95227766;"
+         offset="1"
+         id="stop19" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3">
+      <stop
+         style="stop-color:#ff2d34;stop-opacity:0.99665999;"
+         offset="0.5"
+         id="stop3" />
+      <stop
+         style="stop-color:#ec8ae8;stop-opacity:0.99783081;"
+         offset="1"
+         id="stop4" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient1">
+      <stop
+         style="stop-color:#ffeb52;stop-opacity:0.99665999;"
+         offset="0"
+         id="stop1" />
+      <stop
+         style="stop-color:#ff7900;stop-opacity:0.99607843;"
+         offset="1"
+         id="stop2" />
+    </linearGradient>
+    <rect
+       x="297.27747"
+       y="632.0119"
+       width="264.57693"
+       height="76.697586"
+       id="rect67" />
+    <rect
+       x="297.27747"
+       y="632.0119"
+       width="264.57693"
+       height="76.697586"
+       id="rect68" />
+    <rect
+       x="297.27747"
+       y="632.0119"
+       width="264.57693"
+       height="76.697586"
+       id="rect27" />
+    <linearGradient
+       xlink:href="#linearGradient3"
+       id="linearGradient27"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.69233941,0,0,0.69233941,80.017333,17.905042)"
+       x1="42.491356"
+       y1="49.210739"
+       x2="170.75647"
+       y2="49.210739" />
+    <linearGradient
+       xlink:href="#linearGradient1"
+       id="linearGradient28"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.69233941,0,0,0.69233941,80.017333,17.905042)"
+       x1="56.035748"
+       y1="55.411724"
+       x2="157.21153"
+       y2="55.411724" />
+    <linearGradient
+       xlink:href="#linearGradient19"
+       id="linearGradient29"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.69233941,0,0,0.69233941,79.125241,-3.0633676)"
+       x1="43.779976"
+       y1="143.62814"
+       x2="172.04498"
+       y2="143.62814" />
+    <linearGradient
+       xlink:href="#linearGradient22"
+       id="linearGradient30"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.69233941,0,0,0.69233941,76.363778,23.931317)"
+       x1="61.312916"
+       y1="98.436661"
+       x2="162.48862"
+       y2="98.436661" />
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-49.621976,-202.60029)">
+    <g
+       id="g32"
+       transform="matrix(1.6861318,0,0,1.6861318,-62.693599,-100.81533)">
+      <g
+         id="g31"
+         transform="matrix(0.86092622,0,0,0.86092622,13.157171,25.057136)">
+        <g
+           id="g126"
+           transform="matrix(1.60933,0,0,1.60933,44.669509,-201.03359)">
+          <text
+             xml:space="preserve"
+             transform="matrix(0.32742084,0,0,0.3573356,-67.873873,9.7825766)"
+             id="text66"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:34.0808px;font-family:Dongle;-inkscape-font-specification:'Dongle, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre;shape-inside:url(#rect67);display:inline;fill:#000000;fill-opacity:1;stroke-width:0;stroke-linejoin:round"><tspan
+               x="297.27734"
+               y="655.69787"
+               id="tspan3">Alphabet</tspan></text>
+          <text
+             xml:space="preserve"
+             transform="matrix(0.16905065,0,0,0.18449595,-17.323216,126.60449)"
+             id="text67"
+             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:52.7278px;font-family:Dongle;-inkscape-font-specification:'Dongle, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre;shape-inside:url(#rect68);display:inline;fill:#666666;fill-opacity:1;stroke-width:0;stroke-linejoin:round"><tspan
+               x="297.27734"
+               y="668.65754"
+               id="tspan4">Learning</tspan></text>
+        </g>
+      </g>
+      <g
+         id="g27"
+         transform="matrix(0.25473156,0,0,0.25473156,38.984318,172.61296)">
+        <g
+           id="g26">
+          <path
+             id="path23"
+             style="fill:url(#linearGradient27);fill-opacity:0.99666;stroke:#fefcfc;stroke-width:1.96031;stroke-dasharray:none;stroke-dashoffset:1.02525;stroke-opacity:1"
+             d="m 153.83724,29.774354 a 44.4015,44.4015 0 0 0 -44.40147,44.401463 h 17.25556 a 27.145708,27.758053 0 0 1 0.0759,-2.07438 27.145708,27.758053 0 0 1 0.22719,-2.062583 27.145708,27.758053 0 0 1 0.37745,-2.039685 27.145708,27.758053 0 0 1 0.52557,-2.005333 27.145708,27.758053 0 0 1 0.67048,-1.959181 27.145708,27.758053 0 0 1 0.81179,-1.90265 27.145708,27.758053 0 0 1 0.94847,-1.835397 27.145708,27.758053 0 0 1 1.08012,-1.757407 27.145708,27.758053 0 0 1 1.20535,-1.670455 27.145708,27.758053 0 0 1 1.32413,-1.573142 27.145708,27.758053 0 0 1 1.43576,-1.467945 27.145708,27.758053 0 0 1 1.53844,-1.354199 27.145708,27.758053 0 0 1 1.6336,-1.232535 27.145708,27.758053 0 0 1 1.71876,-1.104443 27.145708,27.758053 0 0 1 1.79496,-0.969938 27.145708,27.758053 0 0 1 1.86044,-0.830046 27.145708,27.758053 0 0 1 1.91625,-0.685504 27.145708,27.758053 0 0 1 1.96061,-0.537371 27.145708,27.758053 0 0 1 1.99496,-0.386039 27.145708,27.758053 0 0 1 2.01714,-0.232195 27.145708,27.758053 0 0 1 2.0286,-0.07763 27.145708,27.758053 0 0 1 0.69909,0.0085 27.145708,27.758053 0 0 1 0.69838,0.02753 27.145708,27.758053 0 0 1 0.6973,0.04583 27.145708,27.758053 0 0 1 0.69624,0.06446 27.145708,27.758053 0 0 1 0.69444,0.08259 27.145708,27.758053 0 0 1 0.69194,0.100887 27.145708,27.758053 0 0 1 0.68943,0.119184 27.145708,27.758053 0 0 1 0.68586,0.13731 27.145708,27.758053 0 0 1 0.68228,0.154922 27.145708,27.758053 0 0 1 0.67834,0.173167 27.145708,27.758053 0 0 1 0.67334,0.191053 27.145708,27.758053 0 0 1 0.66869,0.20858 27.145708,27.758053 0 0 1 0.66295,0.226125 27.145708,27.758053 0 0 1 0.65724,0.243634 27.145708,27.758053 0 0 1 0.65079,0.260461 27.145708,27.758053 0 0 1 0.64436,0.278004 27.145708,27.758053 0 0 1 0.63684,0.294437 27.145708,27.758053 0 0 1 0.62897,0.31128 27.145708,27.758053 0 0 1 0.62146,0.327713 27.145708,27.758053 0 0 1 0.61251,0.34418 27.145708,27.758053 0 0 1 0.60393,0.359929 27.145708,27.758053 0 0 1 0.59462,0.376019 27.145708,27.758053 0 0 1 0.58497,0.391408 27.145708,27.758053 0 0 1 0.57459,0.40644 27.145708,27.758053 0 0 1 0.56456,0.421811 27.145708,27.758053 0 0 1 0.55385,0.436124 27.145708,27.758053 0 0 1 0.54238,0.450813 27.145708,27.758053 0 0 1 0.53094,0.465108 27.145708,27.758053 0 0 1 0.51913,0.478702 27.145708,27.758053 0 0 1 0.50662,0.491937 27.145708,27.758053 0 0 1 0.49445,0.505548 27.145708,27.758053 0 0 1 0.48121,0.518407 27.145708,27.758053 0 0 1 0.46832,0.530582 27.145708,27.758053 0 0 1 0.45438,0.543116 27.145708,27.758053 0 0 1 0.44114,0.554538 27.145708,27.758053 0 0 1 0.42647,0.566013 27.145708,27.758053 0 0 1 0.41252,0.577451 27.145708,27.758053 0 0 1 0.39748,0.587832 27.145708,27.758053 0 0 1 0.38282,0.598193 27.145708,27.758053 0 0 1 0.36744,0.607855 27.145708,27.758053 0 0 1 0.35205,0.617533 27.145708,27.758053 0 0 1 0.33631,0.626459 27.145708,27.758053 0 0 1 0.32057,0.635061 27.145708,27.758053 0 0 1 0.30447,0.643627 27.145708,27.758053 0 0 1 0.28836,0.651168 27.145708,27.758053 0 0 1 0.27155,0.658657 27.145708,27.758053 0 0 1 0.2551,0.665464 27.145708,27.758053 0 0 1 0.23792,0.671909 27.145708,27.758053 0 0 1 0.22111,0.67798 27.145708,27.758053 0 0 1 0.20393,0.683709 27.145708,27.758053 0 0 1 0.18676,0.688718 27.145708,27.758053 0 0 1 0.16923,0.693729 27.145708,27.758053 0 0 1 0.15207,0.697662 27.145708,27.758053 0 0 1 0.13416,0.701253 27.145708,27.758053 0 0 1 0.11628,0.704826 27.145708,27.758053 0 0 1 0.0987,0.707665 27.145708,27.758053 0 0 1 0.0809,0.710196 27.145708,27.758053 0 0 1 0.063,0.711614 27.145708,27.758053 0 0 1 0.0447,0.713394 27.145708,27.758053 0 0 1 0.0272,0.714128 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 3.5e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 3.5e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.5e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.5e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.5e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.7e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.5e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 3.6e-4,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 27.145708,27.758053 0 0 1 0,0.01026 H 198.2388 A 44.4015,44.4015 0 0 0 153.83724,29.775328 Z" />
+          <path
+             id="path24"
+             style="fill:url(#linearGradient28);fill-opacity:0.99666;stroke:#fefcfc;stroke-width:1.96031;stroke-dasharray:none;stroke-dashoffset:1.02525;stroke-opacity:1"
+             d="m 153.83724,38.361697 a 35.024003,35.814062 0 0 0 -35.02415,35.81412 h 7.87824 a 27.145708,27.758053 0 0 1 0.0759,-2.07438 27.145708,27.758053 0 0 1 0.22719,-2.062583 27.145708,27.758053 0 0 1 0.37745,-2.039685 27.145708,27.758053 0 0 1 0.52557,-2.005333 27.145708,27.758053 0 0 1 0.67048,-1.959181 27.145708,27.758053 0 0 1 0.81179,-1.90265 27.145708,27.758053 0 0 1 0.94847,-1.835397 27.145708,27.758053 0 0 1 1.08012,-1.757407 27.145708,27.758053 0 0 1 1.20535,-1.670455 27.145708,27.758053 0 0 1 1.32413,-1.573142 27.145708,27.758053 0 0 1 1.43576,-1.467945 27.145708,27.758053 0 0 1 1.53844,-1.354199 27.145708,27.758053 0 0 1 1.6336,-1.232535 27.145708,27.758053 0 0 1 1.71876,-1.104443 27.145708,27.758053 0 0 1 1.79496,-0.969938 27.145708,27.758053 0 0 1 1.86044,-0.830046 27.145708,27.758053 0 0 1 1.91625,-0.685504 27.145708,27.758053 0 0 1 1.96061,-0.537371 27.145708,27.758053 0 0 1 1.99496,-0.386039 27.145708,27.758053 0 0 1 2.01714,-0.232195 27.145708,27.758053 0 0 1 2.0286,-0.07763 27.145708,27.758053 0 0 1 0.69909,0.0085 27.145708,27.758053 0 0 1 0.69838,0.02753 27.145708,27.758053 0 0 1 0.6973,0.04583 27.145708,27.758053 0 0 1 0.69624,0.06446 27.145708,27.758053 0 0 1 0.69444,0.08259 27.145708,27.758053 0 0 1 0.69194,0.100887 27.145708,27.758053 0 0 1 0.68943,0.119184 27.145708,27.758053 0 0 1 0.68586,0.13731 27.145708,27.758053 0 0 1 0.68228,0.154922 27.145708,27.758053 0 0 1 0.67834,0.173167 27.145708,27.758053 0 0 1 0.67334,0.191053 27.145708,27.758053 0 0 1 0.66869,0.20858 27.145708,27.758053 0 0 1 0.66295,0.226125 27.145708,27.758053 0 0 1 0.65724,0.243634 27.145708,27.758053 0 0 1 0.65079,0.260461 27.145708,27.758053 0 0 1 0.64436,0.278004 27.145708,27.758053 0 0 1 0.63684,0.294437 27.145708,27.758053 0 0 1 0.62897,0.31128 27.145708,27.758053 0 0 1 0.62146,0.327713 27.145708,27.758053 0 0 1 0.61251,0.34418 27.145708,27.758053 0 0 1 0.60393,0.359929 27.145708,27.758053 0 0 1 0.59462,0.376019 27.145708,27.758053 0 0 1 0.58497,0.391408 27.145708,27.758053 0 0 1 0.57459,0.40644 27.145708,27.758053 0 0 1 0.56456,0.421811 27.145708,27.758053 0 0 1 0.55385,0.436124 27.145708,27.758053 0 0 1 0.54238,0.450813 27.145708,27.758053 0 0 1 0.53094,0.465108 27.145708,27.758053 0 0 1 0.51913,0.478702 27.145708,27.758053 0 0 1 0.50662,0.491937 27.145708,27.758053 0 0 1 0.49445,0.505548 27.145708,27.758053 0 0 1 0.48121,0.518407 27.145708,27.758053 0 0 1 0.46832,0.530582 27.145708,27.758053 0 0 1 0.45438,0.543116 27.145708,27.758053 0 0 1 0.44114,0.554538 27.145708,27.758053 0 0 1 0.42647,0.566013 27.145708,27.758053 0 0 1 0.41252,0.577451 27.145708,27.758053 0 0 1 0.39748,0.587832 27.145708,27.758053 0 0 1 0.38282,0.598193 27.145708,27.758053 0 0 1 0.36744,0.607855 27.145708,27.758053 0 0 1 0.35205,0.617533 27.145708,27.758053 0 0 1 0.33631,0.626459 27.145708,27.758053 0 0 1 0.32057,0.635061 27.145708,27.758053 0 0 1 0.30447,0.643627 27.145708,27.758053 0 0 1 0.28836,0.651168 27.145708,27.758053 0 0 1 0.27155,0.658657 27.145708,27.758053 0 0 1 0.2551,0.665464 27.145708,27.758053 0 0 1 0.23792,0.671909 27.145708,27.758053 0 0 1 0.22111,0.67798 27.145708,27.758053 0 0 1 0.20393,0.683709 27.145708,27.758053 0 0 1 0.18676,0.688718 27.145708,27.758053 0 0 1 0.16923,0.693729 27.145708,27.758053 0 0 1 0.15207,0.697662 27.145708,27.758053 0 0 1 0.13416,0.701253 27.145708,27.758053 0 0 1 0.11628,0.704826 27.145708,27.758053 0 0 1 0.0987,0.707665 27.145708,27.758053 0 0 1 0.0809,0.710196 27.145708,27.758053 0 0 1 0.063,0.711614 27.145708,27.758053 0 0 1 0.0447,0.713394 27.145708,27.758053 0 0 1 0.0272,0.714128 27.145708,27.758053 0 0 1 0.009,0.714847 h 7.87823 A 35.024003,35.814062 0 0 0 153.83724,38.361697 Z" />
+          <path
+             id="path25"
+             style="fill:url(#linearGradient29);fill-opacity:1;stroke:#fefcfc;stroke-width:1.96031;stroke-dasharray:none;stroke-dashoffset:1.02525;stroke-opacity:1"
+             d="M 153.83731,118.57732 A 44.4015,44.4015 0 0 1 109.43584,74.175834 h 17.25555 a 27.145708,27.758053 0 0 0 0.0759,2.074381 27.145708,27.758053 0 0 0 0.22719,2.062582 27.145708,27.758053 0 0 0 0.37745,2.039686 27.145708,27.758053 0 0 0 0.52557,2.00535 27.145708,27.758053 0 0 0 0.67048,1.959181 27.145708,27.758053 0 0 0 0.81179,1.90265 27.145708,27.758053 0 0 0 0.94847,1.83538 27.145708,27.758053 0 0 0 1.08012,1.757406 27.145708,27.758053 0 0 0 1.20535,1.670455 27.145708,27.758053 0 0 0 1.32413,1.573142 27.145708,27.758053 0 0 0 1.43576,1.467962 27.145708,27.758053 0 0 0 1.53844,1.354182 27.145708,27.758053 0 0 0 1.6336,1.232536 27.145708,27.758053 0 0 0 1.71876,1.10446 27.145708,27.758053 0 0 0 1.79496,0.969938 27.145708,27.758053 0 0 0 1.86044,0.830025 27.145708,27.758053 0 0 0 1.91625,0.68551 27.145708,27.758053 0 0 0 1.96061,0.53739 27.145708,27.758053 0 0 0 1.99496,0.38603 27.145708,27.758053 0 0 0 2.01714,0.2322 27.145708,27.758053 0 0 0 2.0286,0.0776 27.145708,27.758053 0 0 0 0.69909,-0.009 27.145708,27.758053 0 0 0 0.69838,-0.0275 27.145708,27.758053 0 0 0 0.6973,-0.0458 27.145708,27.758053 0 0 0 0.69624,-0.0645 27.145708,27.758053 0 0 0 0.69444,-0.0826 27.145708,27.758053 0 0 0 0.69194,-0.10089 27.145708,27.758053 0 0 0 0.68943,-0.11918 27.145708,27.758053 0 0 0 0.68586,-0.13731 27.145708,27.758053 0 0 0 0.68228,-0.15492 27.145708,27.758053 0 0 0 0.67834,-0.17317 27.145708,27.758053 0 0 0 0.67334,-0.19105 27.145708,27.758053 0 0 0 0.66869,-0.20858 27.145708,27.758053 0 0 0 0.66295,-0.22611 27.145708,27.758053 0 0 0 0.65724,-0.24365 27.145708,27.758053 0 0 0 0.65079,-0.260464 27.145708,27.758053 0 0 0 0.64436,-0.277987 27.145708,27.758053 0 0 0 0.63684,-0.294455 27.145708,27.758053 0 0 0 0.62897,-0.311263 27.145708,27.758053 0 0 0 0.62146,-0.32773 27.145708,27.758053 0 0 0 0.61251,-0.344179 27.145708,27.758053 0 0 0 0.60393,-0.359912 27.145708,27.758053 0 0 0 0.59462,-0.376019 27.145708,27.758053 0 0 0 0.58497,-0.391409 27.145708,27.758053 0 0 0 0.57458,-0.406439 27.145708,27.758053 0 0 0 0.56457,-0.421812 27.145708,27.758053 0 0 0 0.55385,-0.436141 27.145708,27.758053 0 0 0 0.54238,-0.450795 27.145708,27.758053 0 0 0 0.53094,-0.465108 27.145708,27.758053 0 0 0 0.51913,-0.478702 27.145708,27.758053 0 0 0 0.50662,-0.491954 27.145708,27.758053 0 0 0 0.49444,-0.505531 27.145708,27.758053 0 0 0 0.48121,-0.518424 27.145708,27.758053 0 0 0 0.46833,-0.530582 27.145708,27.758053 0 0 0 0.45438,-0.543099 27.145708,27.758053 0 0 0 0.44113,-0.554556 27.145708,27.758053 0 0 0 0.42648,-0.566012 27.145708,27.758053 0 0 0 0.41252,-0.577435 27.145708,27.758053 0 0 0 0.39748,-0.587831 27.145708,27.758053 0 0 0 0.38282,-0.598211 27.145708,27.758053 0 0 0 0.36744,-0.607854 27.145708,27.758053 0 0 0 0.35205,-0.617534 27.145708,27.758053 0 0 0 0.33631,-0.626459 27.145708,27.758053 0 0 0 0.32057,-0.63506 27.145708,27.758053 0 0 0 0.30447,-0.643627 27.145708,27.758053 0 0 0 0.28836,-0.651151 27.145708,27.758053 0 0 0 0.27155,-0.658675 27.145708,27.758053 0 0 0 0.2551,-0.665463 27.145708,27.758053 0 0 0 0.23792,-0.671893 27.145708,27.758053 0 0 0 0.22111,-0.677997 27.145708,27.758053 0 0 0 0.20393,-0.683708 27.145708,27.758053 0 0 0 0.18676,-0.688719 27.145708,27.758053 0 0 0 0.16923,-0.693729 27.145708,27.758053 0 0 0 0.15207,-0.697661 27.145708,27.758053 0 0 0 0.13416,-0.701253 27.145708,27.758053 0 0 0 0.11628,-0.704809 27.145708,27.758053 0 0 0 0.0987,-0.707682 27.145708,27.758053 0 0 0 0.0809,-0.710179 27.145708,27.758053 0 0 0 0.0629,-0.711615 27.145708,27.758053 0 0 0 0.0447,-0.71341 27.145708,27.758053 0 0 0 0.0272,-0.714129 27.145708,27.758053 0 0 0 3.5e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 3.5e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 3.5e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.7e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.5e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.5e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.5e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.5e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 3.6e-4,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 27.145708,27.758053 0 0 0 0,-0.01026 h 17.25591 A 44.4015,44.4015 0 0 1 153.83732,118.5542 Z" />
+          <path
+             id="path26"
+             style="fill:url(#linearGradient30);fill-opacity:1;stroke:#fefcfc;stroke-width:1.96031;stroke-dasharray:none;stroke-dashoffset:1.02525;stroke-opacity:1"
+             d="M 153.83727,109.98997 A 35.024003,35.814062 0 0 1 118.81313,74.175834 h 7.87823 a 27.145708,27.758053 0 0 0 0.0759,2.074381 27.145708,27.758053 0 0 0 0.22719,2.062582 27.145708,27.758053 0 0 0 0.37746,2.039686 27.145708,27.758053 0 0 0 0.52557,2.00535 27.145708,27.758053 0 0 0 0.67047,1.959181 27.145708,27.758053 0 0 0 0.8118,1.90265 27.145708,27.758053 0 0 0 0.94846,1.83538 27.145708,27.758053 0 0 0 1.08013,1.757406 27.145708,27.758053 0 0 0 1.20535,1.670455 27.145708,27.758053 0 0 0 1.32413,1.573142 27.145708,27.758053 0 0 0 1.43575,1.467962 27.145708,27.758053 0 0 0 1.53844,1.354182 27.145708,27.758053 0 0 0 1.63361,1.232536 27.145708,27.758053 0 0 0 1.71875,1.10446 27.145708,27.758053 0 0 0 1.79497,0.969938 27.145708,27.758053 0 0 0 1.86043,0.830025 27.145708,27.758053 0 0 0 1.91625,0.68551 27.145708,27.758053 0 0 0 1.96062,0.53739 27.145708,27.758053 0 0 0 1.99496,0.38603 27.145708,27.758053 0 0 0 2.01713,0.2322 27.145708,27.758053 0 0 0 2.0286,0.0776 27.145708,27.758053 0 0 0 0.6991,-0.009 27.145708,27.758053 0 0 0 0.69837,-0.0275 27.145708,27.758053 0 0 0 0.69731,-0.0458 27.145708,27.758053 0 0 0 0.69623,-0.0645 27.145708,27.758053 0 0 0 0.69445,-0.0826 27.145708,27.758053 0 0 0 0.69194,-0.10089 27.145708,27.758053 0 0 0 0.68943,-0.11918 27.145708,27.758053 0 0 0 0.68586,-0.13731 27.145708,27.758053 0 0 0 0.68228,-0.15492 27.145708,27.758053 0 0 0 0.67834,-0.17317 27.145708,27.758053 0 0 0 0.67334,-0.19105 27.145708,27.758053 0 0 0 0.66868,-0.20858 27.145708,27.758053 0 0 0 0.66296,-0.22611 27.145708,27.758053 0 0 0 0.65723,-0.24365 27.145708,27.758053 0 0 0 0.6508,-0.260464 27.145708,27.758053 0 0 0 0.64435,-0.277987 27.145708,27.758053 0 0 0 0.63685,-0.294455 27.145708,27.758053 0 0 0 0.62897,-0.311263 27.145708,27.758053 0 0 0 0.62146,-0.32773 27.145708,27.758053 0 0 0 0.61251,-0.344179 27.145708,27.758053 0 0 0 0.60393,-0.359912 27.145708,27.758053 0 0 0 0.59462,-0.376019 27.145708,27.758053 0 0 0 0.58496,-0.391409 27.145708,27.758053 0 0 0 0.57459,-0.406439 27.145708,27.758053 0 0 0 0.56457,-0.421812 27.145708,27.758053 0 0 0 0.55384,-0.436141 27.145708,27.758053 0 0 0 0.54239,-0.450795 27.145708,27.758053 0 0 0 0.53094,-0.465108 27.145708,27.758053 0 0 0 0.51913,-0.478702 27.145708,27.758053 0 0 0 0.50661,-0.491954 27.145708,27.758053 0 0 0 0.49445,-0.505531 27.145708,27.758053 0 0 0 0.48121,-0.518424 27.145708,27.758053 0 0 0 0.46833,-0.530582 27.145708,27.758053 0 0 0 0.45437,-0.543099 27.145708,27.758053 0 0 0 0.44114,-0.554556 27.145708,27.758053 0 0 0 0.42647,-0.566012 27.145708,27.758053 0 0 0 0.41252,-0.577435 27.145708,27.758053 0 0 0 0.39749,-0.587831 27.145708,27.758053 0 0 0 0.38282,-0.598211 27.145708,27.758053 0 0 0 0.36744,-0.607854 27.145708,27.758053 0 0 0 0.35204,-0.617534 27.145708,27.758053 0 0 0 0.33631,-0.626459 27.145708,27.758053 0 0 0 0.32057,-0.63506 27.145708,27.758053 0 0 0 0.30447,-0.643627 27.145708,27.758053 0 0 0 0.28837,-0.651151 27.145708,27.758053 0 0 0 0.27155,-0.658675 27.145708,27.758053 0 0 0 0.2551,-0.665463 27.145708,27.758053 0 0 0 0.23792,-0.671893 27.145708,27.758053 0 0 0 0.22111,-0.677997 27.145708,27.758053 0 0 0 0.20392,-0.683708 27.145708,27.758053 0 0 0 0.18676,-0.688719 27.145708,27.758053 0 0 0 0.16924,-0.693729 27.145708,27.758053 0 0 0 0.15206,-0.697661 27.145708,27.758053 0 0 0 0.13417,-0.701253 27.145708,27.758053 0 0 0 0.11627,-0.704809 27.145708,27.758053 0 0 0 0.0987,-0.707682 27.145708,27.758053 0 0 0 0.0809,-0.710179 27.145708,27.758053 0 0 0 0.0629,-0.711615 27.145708,27.758053 0 0 0 0.0447,-0.71341 27.145708,27.758053 0 0 0 0.0272,-0.714129 27.145708,27.758053 0 0 0 0.009,-0.714829 h 7.87824 a 35.024003,35.814062 0 0 1 -35.0238,35.814116 z" />
+        </g>
+        <text
+           xml:space="preserve"
+           transform="matrix(1.8350844,0,0,2.0027468,-407.26669,-1232.4202)"
+           id="text26"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:41.4016px;font-family:Dongle;-inkscape-font-specification:'Dongle, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;white-space:pre;shape-inside:url(#rect27);display:inline;fill:#000000;fill-opacity:0.956863;fill-rule:nonzero;stroke:#070707;stroke-width:0;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"><tspan
+             x="297.27734"
+             y="660.78583"
+             id="tspan5">A</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/pyblackbird_cc/static/images/AL_text_only.png b/pyblackbird_cc/static/images/AL_text_only.png
new file mode 100644
index 0000000..270b2ee
--- /dev/null
+++ b/pyblackbird_cc/static/images/AL_text_only.png
diff --git a/pyblackbird_cc/static/scss/custom.scss b/pyblackbird_cc/static/scss/custom.scss
index 75f574a..d0599e9 100644
--- a/pyblackbird_cc/static/scss/custom.scss
+++ b/pyblackbird_cc/static/scss/custom.scss
@@ -5,7 +5,7 @@
 @import "../bootstrap/scss/functions";
 
 // 2. Include any default variable overrides here
-$primary: #51635EFF;
+//$primary: #51635EFF;
 $ey_literacy: #ebde34;
 $display-font-weight: 600;
 $ml-font-label-weight: 500;
@@ -35,9 +35,9 @@ $ml-font-label-weight: 500;
 }
 
 
-h2 {
-  color: $primary;
-}
+//h2 {
+//  color: $primary;
+//}
 
 .ey_literacy {
   background-color: $ey_literacy;
diff --git a/pyblackbird_cc/templates/base.html b/pyblackbird_cc/templates/base.html
index b02c52c..36c8c5a 100644
--- a/pyblackbird_cc/templates/base.html
+++ b/pyblackbird_cc/templates/base.html
@@ -51,40 +51,39 @@
 </head>
 <body>
 <header>
-    <div class="container text-center">
-        <div>&nbsp;</div>
-        <div class="row">
-            <div class="col">
-                <h1>Joanna Lemon Learning</h1>
-                <p class="text-black-50">
-                    Experienced primary school teacher, dedicated to creating colourful and
-                    clear educational learning resources.
-                </p>
+    <nav class="navbar navbar-expand-lg navbar-light bg-white">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="{% url "home" %}">
+                <img src="{% static "images/AL_long_logo_black_grey.png" %}" width=300px alt="Alphabet Learning Logo">
+            </a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
+                    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item">
+                        <a class="nav-link text-dark fw-bold" href="{% url "resources:resource_list" %}">Resources</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link text-dark fw-bold"
+                           href="https://www.tes.com/teaching-resources/shop/joannalemon"
+                           target="_blank">TES Shop</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link text-dark fw-bold" href="https://joannalemon.etsy.com/"
+                           target="_blank">Etsy</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link text-dark fw-bold" href="https://blog.joannalemon.com"
+                           target="_blank">Blog</a>
+                    </li>
+                </ul>
             </div>
         </div>
-        <div class="row">
-            <p class="text-black-50">
-                For information: please contact <a href="mailto:joanna@joannalemon.com">joanna@joannalemon.com</a>
-            </p>
-        </div>
-        <div class="row">
-            <div class="col">
-                <a href="https://www.tes.com/teaching-resources/shop/joannalemon"
-                   target="_blank">TES Shop</a>
-            </div>
-            <div class="col">
-                <a href="https://joannalemon.etsy.com/" target="_blank">Etsy</a>
-            </div>
-            <div class="col">
-                <a href="{% url "resources:resource_list" %}">Resources</a>
-            </div>
-            <div class="col">
-                <a href="https://blog.joannalemon.com" target="_blank">Blog</a>
-            </div>
-        </div>
-    </div>
+    </nav>
+    <div class="border-bottom border-dark border-1"></div>
 </header>
-<hr/>
 <main>
     {% block body %}
         {% if messages %}
diff --git a/pyblackbird_cc/templates/pages/home.html b/pyblackbird_cc/templates/pages/home.html
index 2d60d83..1b557f4 100644
--- a/pyblackbird_cc/templates/pages/home.html
+++ b/pyblackbird_cc/templates/pages/home.html
@@ -90,6 +90,24 @@
             </div>
         </div>
 
+
+        {#        Image section#}
+        <div class="container my-5">
+            <div class="row">
+                <div class="col-lg-6 mx-auto">
+                    <h2 class="display-5 fw-bold text-center mb-4">Sample Resources</h2>
+                    <div class="ratio ratio-16x9 mb-4">
+                        <img src="{% static 'images/placeholder-image.jpg' %}" class="img-fluid rounded"
+                             alt="Sample Resource">
+                    </div>
+                    <p class="lead text-center">This is a sample of the high-quality educational resources you can
+                        access with our membership plans. Our resources are carefully crafted by experienced educators
+                        to engage and inspire young learners.</p>
+                </div>
+            </div>
+        </div>
+
+
         <div class="feature-divider"></div>
 
         <div class="row">
diff --git a/pyblackbird_cc/templates/resources/resource_detail.html b/pyblackbird_cc/templates/resources/resource_detail.html
index a68c321..64747a2 100644
--- a/pyblackbird_cc/templates/resources/resource_detail.html
+++ b/pyblackbird_cc/templates/resources/resource_detail.html
@@ -4,103 +4,130 @@
 
 {% block content %}
     <div class="container">
+
+
     <div class="row my-4">
         <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
-            <h1 class="mb-4">{{ resource.name }}</h1>
-            <div class="d-flex flex-row justify-content-between my-3">
-                <div>
-                    <span class="fw-bold">Subject:</span> {{ resource.main_resource_category }}
-                </div>
-                <div class="px-2">
-                    <span class="fw-bold">Age range:</span> {{ resource.age_range }}
-                </div>
-                <div class="px-2">
-                    <span class="fw-bold">Resource type:</span> {{ resource.resource_type }}
+            <div class="card mb-4">
+                <div class="card-header bg-success text-white">
+                    <h1 class="card-title mb-0 text-center">{{ resource.name }}</h1>
                 </div>
-                <div class="px-2">
-                    <span class="fw-bold">Number of files in this resource:</span> {{ resource.pdf_filenames|length }}
-                </div>
-            </div>
-            <div class="d-flex flex-row justify-content-between my-3 flex-wrap">
-                <div>
-                    <span class="fw-bold">Created:</span> {{ resource.created|date:"D d M Y" }}
-                </div>
-                <div>
-                    {% if request.user.is_authenticated and request.user.is_staff %}
-                        <a href="{% url "resources:resource_update_metadata" resource.id %}"
-                           class="text-danger">Edit this resource</a>
-                    {% endif %}
+                <div class="card-body">
+                    <table class="table table-bordered mx-auto">
+                        <tbody>
+                        <tr>
+                            <th>Subject</th>
+                            <td>{{ resource.main_resource_category }}</td>
+                        </tr>
+                        <tr>
+                            <th>Age range</th>
+                            <td>{{ resource.age_range }}</td>
+                        </tr>
+                        <tr>
+                            <th>Resource type</th>
+                            <td>{{ resource.resource_type }}</td>
+                        </tr>
+                        <tr>
+                            <th>Number of files</th>
+                            <td>{{ resource.pdf_filenames|length }}</td>
+                        </tr>
+                        <tr>
+                            <th>Created</th>
+                            <td>{{ resource.created|date:"D d M Y" }}</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <div class="my-4">
+                        <h5 class="card-title bg-success text-white p-2">Resource Description</h5>
+                        <div>{{ resource.description | markdown | safe }}</div>
+                    </div>
+
+                    <div class="d-flex justify-content-end">
+                        {% if request.user.is_authenticated and request.user.is_staff %}
+                            <a href="{% url "resources:resource_update_metadata" resource.id %}"
+                               class="text-danger">Edit this resource</a>
+                        {% endif %}
+                    </div>
                 </div>
             </div>
         </div>
     </div>
+
     <div class="row my-4">
         <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
-            <h4>Feature images</h4>
-            <div class="d-flex flex-row justify-content-between">
-                {% for tn_url, tn_filename in resource.thumbnails %}
-                    <div class="m-2">
-                        <img class="img-fluid rounded" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
+            <div class="card mb-4">
+                <div class="card-header bg-success text-white">
+                    <h4 class="card-title mb-0">Feature Images</h4>
+                </div>
+                <div class="card-body">
+                    <div class="d-flex flex-row justify-content-between">
+                        {% for tn_url, tn_filename in resource.thumbnails %}
+                            <div class="m-2">
+                                <img class="img-fluid rounded" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
+                            </div>
+                        {% endfor %}
                     </div>
-                {% endfor %}
+                </div>
             </div>
         </div>
     </div>
 
+
     <!-- Here be the carousel stuff -->
 
+
     {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
-        <div class="row my-4">
+        <div class="row justify-content-center my-4">
         <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
-            {% if resource.snapshot_urls.items|length > 1 %}
-                <h4>File preview {{ forloop.counter }}: {{ snapshot_filename|cut:".pdf" }} </h4>
-            {% else %}
-                <h4>File preview: {{ snapshot_filename|cut:".pdf" }}</h4>
-            {% endif %}
-
-            <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
-                <div class="carousel-inner">
-
-                    {% for snapshot_url in snapshot_urls %}
-                        {% if forloop.first %}
-                            <!-- We must have an active class otherwise the carousel will not show up -->
-                            <div class="carousel-item active">
-                        {% else %}
-                            <div class="carousel-item">
+            <div class="card mb-4">
+                <div class="card-header bg-success text-white">
+                    {% if resource.snapshot_urls.items|length > 1 %}
+                        <h4 class="card-title mb-0 text-center">File
+                            preview {{ forloop.counter }}: {{ snapshot_filename|cut:".pdf" }}</h4>
+                    {% else %}
+                        <h4 class="card-title mb-0 text-center">File preview: {{ snapshot_filename|cut:".pdf" }}</h4>
+                    {% endif %}
+                </div>
+                <div class="card-body">
+                    <div id="carouselPreview{{ forloop.counter }}" class="carousel slide" data-bs-ride="carousel">
+                        <div class="carousel-inner">
+                            {% for snapshot_url in snapshot_urls %}
+                                {% if forloop.first %}
+                                    <div class="carousel-item active">
+                                {% else %}
+                                    <div class="carousel-item">
+                                {% endif %}
+                            <img src="{{ snapshot_url }}" class="d-block mx-auto img-thumbnail rounded"
+                                 alt="{{ snapshot_name }}">
+                            </div>
+                            {% endfor %}
+                            </div>
+                            <button class="carousel-control-prev" type="button"
+                                    data-bs-target="#carouselPreview{{ forloop.counter }}" data-bs-slide="prev">
+                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                                <span class="visually-hidden">Previous</span>
+                            </button>
+                            <button class="carousel-control-next" type="button"
+                                    data-bs-target="#carouselPreview{{ forloop.counter }}" data-bs-slide="next">
+                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                                <span class="visually-hidden">Next</span>
+                            </button>
+                        </div>
+                        {% if request.user.is_authenticated and request.user.is_staff %}
+                            <div class="d-flex justify-content-between my-2 p-2">
+                                <a href="#" class="btn btn-primary btn-sm" type="button">Replace</a>
+                                <a href="#" class="btn btn-danger btn-sm" type="button">Delete</a>
+                            </div>
                         {% endif %}
-                    <img src="{{ snapshot_url }}" class="d-block w-25 mx-auto img-thumbnail rounded"
-                         alt="{{ snapshot_name }}">
-                    </div>
-                    {% endfor %}
                     </div>
-                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
-                            data-bs-slide="prev">
-                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                        <span class="visually-hidden">Previous</span>
-                    </button>
-                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
-                            data-bs-slide="next">
-                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                        <span class="visually-hidden">Next</span>
-                    </button>
                 </div>
-                {% if request.user.is_authenticated and request.user.is_staff %}
-                    <div class="d-flex justify-content-between my-2 p-2">
-                        <a href="#" class="btn btn-primary btn-sm" type="button">Replace</a>
-                        <a href="#" class="btn btn-danger btn-sm" type="button">Delete</a>
-                    </div>
-                {% endif %}
             </div>
         </div>
-
     {% endfor %}
 
 
-<div class="row my-5">
-    <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
-        <div>{{ resource.description | markdown | safe }}</div>
-    </div>
-</div>
+
+
 <div class="row">
     <div class="col bg-white pt-3 border border-success border-opacity-25 rounded">
         <div class="resource-download-panel">