diff --git a/ModernTheme.php b/ModernTheme.php
index b34774b..69ff4d4 100644
--- a/ModernTheme.php
+++ b/ModernTheme.php
@@ -38,7 +38,7 @@ class ModernTheme extends MinimalTheme implements ModuleThemeInterface, ModuleCu
 
     // Module constants
     public const CUSTOM_AUTHOR = 'JessewebDotCom';
-    public const CUSTOM_VERSION = '0.0.1';
+    public const CUSTOM_VERSION = '0.0.7';
     public const GITHUB_REPO = 'webtrees-theme-modern';
     public const AUTHOR_WEBSITE = 'jesseweb.com';
     public const CUSTOM_SUPPORT_URL = 'https://github.com/JesseWebDotCom/webtrees-theme-modern';
diff --git a/resources/css/palettes/modern/ancestry/bootstrap.css b/resources/css/palettes/modern/ancestry/bootstrap.css
index cdbce1d..4a09166 100644
--- a/resources/css/palettes/modern/ancestry/bootstrap.css
+++ b/resources/css/palettes/modern/ancestry/bootstrap.css
@@ -86,4 +86,24 @@ a {
 
     [dir] .wt-block {
         border: none !important;
-        }
\ No newline at end of file
+        }
+
+/* login page */
+.wt-route-LoginPage .wt-main-container {
+    padding-bottom: 1rem;
+    padding-top: 1rem;
+    width: 500px;
+
+        background-color: white;
+        margin-top: 20px;
+        border-radius: 9px;
+        }
+
+    .wt-route-LoginPage .row {
+        padding-bottom: 10px;
+        }
+
+        .wt-route-LoginPage  .col-sm-9 {
+            flex: 0 0 auto;
+            width: unset;
+            }        
\ No newline at end of file
diff --git a/resources/css/palettes/modern/ancestry/bootstrap.min.css b/resources/css/palettes/modern/ancestry/bootstrap.min.css
index 5f4d7a2..eb01c81 100644
--- a/resources/css/palettes/modern/ancestry/bootstrap.min.css
+++ b/resources/css/palettes/modern/ancestry/bootstrap.min.css
@@ -1 +1 @@
-.navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")!important}#navbarMobile{color:white}[dir] .wt-global{background-color:rgb(246,243,240)!important;}.wt-header-wrapper,#navbarMobile{background-color:black!important;}.wt-site-title,.wt-page-title span.NAME{font-family:'Times New Roman',serif;}[dir] .navbar-toggler{color:white!important;border-color:white!important;}.nav-link{color:black!important;}.wt-header-wrapper .nav-link{color:white!important;}.wt-site-title,#navbarMobileTitle{color:white!important;}.btn-link:hover,.nav-link:hover,a:hover{text-decoration:underline;text-decoration-color:#94bf13!important;text-decoration-thickness:2px;}[dir] .card-header{border-bottom:var(--bs-card-border-width) solid rgba(0,0,0,.1);}a{color:#94bf13;}[dir] .btn,.btn:hover{background-color:#94bf13!important;border-color:#94bf13!important;text-decoration:none!important;color:white!important;}.btn-link,.btn-link:hover{color:white;text-decoration:none}[dir] .nav-pills .nav-link.active{background-color:#94bf13;color:white!important;}#navbarMobile .nav-link{color:white!important;}[dir] .form-check-input:checked{background-color:#94bf13;border-color:#94bf13}[dir] .wt-block-header{font-weight:600}.card>.card-header::before{color:black!important}[dir] .wt-block{border:none!important}
\ No newline at end of file
+.navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")!important}#navbarMobile{color:white}[dir] .wt-global{background-color:rgb(246,243,240)!important;}.wt-header-wrapper,#navbarMobile{background-color:black!important;}.wt-site-title,.wt-page-title span.NAME{font-family:'Times New Roman',serif;}[dir] .navbar-toggler{color:white!important;border-color:white!important;}.nav-link{color:black!important;}.wt-header-wrapper .nav-link{color:white!important;}.wt-site-title,#navbarMobileTitle{color:white!important;}.btn-link:hover,.nav-link:hover,a:hover{text-decoration:underline;text-decoration-color:#94bf13!important;text-decoration-thickness:2px;}[dir] .card-header{border-bottom:var(--bs-card-border-width) solid rgba(0,0,0,.1);}a{color:#94bf13;}[dir] .btn,.btn:hover{background-color:#94bf13!important;border-color:#94bf13!important;text-decoration:none!important;color:white!important;}.btn-link,.btn-link:hover{color:white;text-decoration:none}[dir] .nav-pills .nav-link.active{background-color:#94bf13;color:white!important;}#navbarMobile .nav-link{color:white!important;}[dir] .form-check-input:checked{background-color:#94bf13;border-color:#94bf13}[dir] .wt-block-header{font-weight:600}.card>.card-header::before{color:black!important}[dir] .wt-block{border:none!important}.wt-route-LoginPage .wt-main-container{padding-bottom:1rem;padding-top:1rem;width:500px;background-color:white;margin-top:20px;border-radius:9px}.wt-route-LoginPage .row{padding-bottom:10px}.wt-route-LoginPage .col-sm-9{flex:0 0 auto;width:unset}
\ No newline at end of file
diff --git a/resources/views/chart-box.phtml b/resources/views/chart-box.phtml
new file mode 100644
index 0000000..88e68a0
--- /dev/null
+++ b/resources/views/chart-box.phtml
@@ -0,0 +1,5 @@
+<!-- A nice orange border around the existing chart box -->
+<div style="outline: dashed thick orange">
+    <!-- The "::" allows us to use the original view, without being redirected to this file. -->
+    <?= view('::chart-box', ['individual' => $individual]) ?>
+</div>
diff --git a/resources/views/fact.phtml b/resources/views/fact.phtml
new file mode 100644
index 0000000..eb7af0d
--- /dev/null
+++ b/resources/views/fact.phtml
@@ -0,0 +1,174 @@
+<?php
+
+declare(strict_types=1);
+
+use Fisharebest\Webtrees\Auth;
+use Fisharebest\Webtrees\Elements\UnknownElement;
+use Fisharebest\Webtrees\Elements\XrefAssociate;
+use Fisharebest\Webtrees\Fact;
+use Fisharebest\Webtrees\Family;
+use Fisharebest\Webtrees\Gedcom;
+use Fisharebest\Webtrees\GedcomRecord;
+use Fisharebest\Webtrees\I18N;
+use Fisharebest\Webtrees\Individual;
+use Fisharebest\Webtrees\Media;
+use Fisharebest\Webtrees\Module\ModuleChartInterface;
+use Fisharebest\Webtrees\Module\ModuleInterface;
+use Fisharebest\Webtrees\Module\RelationshipsChartModule;
+use Fisharebest\Webtrees\Registry;
+use Fisharebest\Webtrees\Services\ModuleService;
+use Fisharebest\Webtrees\Services\RelationshipService;
+
+use Fisharebest\Webtrees\Tree;
+
+/**
+ * @var Fact         $fact
+ * @var GedcomRecord $record
+ */
+
+$parent  = $fact->record();
+$tree    = $parent->tree();
+[, $tag] = explode(':', $fact->tag());
+$label   = $fact->label();
+$value   = $fact->value();
+$type    = $fact->attribute('TYPE');
+$id      = $fact->id();
+
+$element = Registry::elementFactory()->make($fact->tag());
+
+// New or deleted facts need different styling
+$styles = [];
+if ($fact->isPendingAddition()) {
+    $styles[] = 'wt-new';
+}
+if ($fact->isPendingDeletion()) {
+    $styles[] = 'wt-old';
+}
+
+// Event of close relative
+if ($tag === 'EVEN' && $value === 'CLOSE_RELATIVE') {
+    $value    = '';
+    $styles[] = 'wt-relation-fact collapse';
+}
+
+// Event of close associates
+if ($id === 'asso') {
+    $styles[] = 'wt-associate-fact collapse';
+}
+
+if ($element instanceof UnknownElement && $tree->getPreference('HIDE_GEDCOM_ERRORS') === '0') {
+    $styles[] = 'd-none';
+}
+
+
+// historical facts
+if ($id === 'histo') {
+    $styles[] = 'wt-historic-fact collapse';
+}
+
+// Use marriage type as the label.  e.g. "Civil partnership"
+if ($tag === 'MARR') {
+    $label = $fact->label();
+    $type  = '';
+}
+
+?>
+<tr class="<?= implode(' ', $styles) ?>">
+    <th scope="row">
+        <div class="wt-fact-label ut"><?= $label?></div>
+
+        <?php if ($id !== 'histo' && $id !== 'asso' && $fact->canEdit() && !in_array($tag, ['HUSB', 'WIFE', 'CHIL', 'FAMC', 'FAMS'], true)) : ?>
+            <?= view('fact-edit-links', ['fact' => $fact, 'url' => $record->url()]) ?>
+        <?php endif ?>
+
+        <?php if ($tree->getPreference('SHOW_FACT_ICONS') === '1') : ?>
+            <span class="wt-fact-icon wt-fact-icon-<?= e($tag) ?>" title="<?= strip_tags($label) ?>"></span>
+        <?php endif ?>
+    </th>
+
+    <td>
+        <?php if ($fact->target() instanceof Media) : ?>
+            <div class="d-flex flex-wrap">
+                <?php foreach ($fact->target()->mediaFiles() as $media_file) : ?>
+                    <div class="me-1 mb-1">
+                        <?= $media_file->displayImage(100, 100, 'contain', []) ?>
+                    </div>
+                <?php endforeach ?>
+            </div>
+
+            <a href="<?= e($fact->target()->url()) ?>"><?= $fact->target()->fullName() ?></a>
+
+            <?php foreach ($fact->target()->facts(['NOTE']) as $note) : ?>
+                <?= view('fact-gedcom-fields', ['gedcom' => $note->gedcom(), 'parent' => $fact->target()->tag(), 'tree' => $fact->record()->tree()]) ?>
+            <?php endforeach ?>
+        <?php else : ?>
+            <div class="wt-fact-main-attributes">
+                <?php if ($parent !== $record) : ?>
+                    <div class="wt-fact-record">
+                        <?php if ($parent instanceof Family) : ?>
+                            <?php foreach ($parent->spouses()->filter(static fn ($individual): bool => $individual !== $record) as $spouse) : ?>
+                                <?php if ($spouse->tree()->getPreference('SHOW_HIGHLIGHT_IMAGES')) : ?>
+                                    <div class="wt-chart-box-thumbnail float-start me-1">
+                                        <?= $spouse->displayImage(40, 50, 'crop', ['class' => 'wt-chart-box-thumbnail']) ?>
+                                    </div>
+                                <?php endif ?>                                  
+                                <a href="<?= e($spouse->url()) ?>"><?= $spouse->fullName() ?></a> —
+                            <?php endforeach ?>
+                            <a href="<?= e($parent->url()) ?>"><?= I18N::translate('View this family') ?></a>
+                        <?php elseif ($parent instanceof Individual) : ?>
+                            <?php if ($parent->tree()->getPreference('SHOW_HIGHLIGHT_IMAGES')) : ?>
+                                <div class="wt-chart-box-thumbnail float-start me-1">
+                                    <?= $parent->displayImage(40, 50, 'crop', ['class' => 'wt-chart-box-thumbnail']) ?>
+                                </div>
+                            <?php endif ?>                              
+                            <a href="<?= e($parent->url()) ?>"><?= $parent->fullName() ?></a>
+                        <?php endif ?>
+                    </div>
+                <?php endif ?>
+
+                <div class="wt-fact-value">
+                    <?= $element->value($value, $tree) ?>
+                    <?php if ($element instanceof XrefAssociate && $fact->target() instanceof Individual) : ?>
+                        <?php
+                        $module = Registry::container()->get(ModuleService::class)->findByComponent(ModuleChartInterface::class, $tree, Auth::user())
+                            ->first(static fn (ModuleInterface $module): bool => $module instanceof RelationshipsChartModule)
+                        ?>
+
+                        <?php if ($module instanceof RelationshipsChartModule && $record instanceof Individual) : ?>                             
+                            — <a href="<?= $module->chartUrl($fact->target(), ['xref2' => $record->xref()]) ?>" rel="nofollow">
+                                <?= Registry::container()->get(RelationshipService::class)->getCloseRelationshipName($record, $fact->target()) ?>
+                            </a>
+                        <?php endif ?>
+                    <?php endif ?>
+                </div>
+
+                <!-- Type of this fact/event (allow user-translations) -->
+                <?php if ($type !== '' && $tag !== 'EVEN' && $tag !== 'FACT') : ?>
+                    <div class="wt-fact-type">
+                        <?= Registry::elementFactory()->make($fact->tag() . ':TYPE')->labelValue(I18N::translate($type), $tree) ?>
+                    </div>
+                <?php endif ?>
+
+                <?= view('fact-date', ['cal_link' => 'true', 'fact' => $fact, 'record' => $record, 'time' => true]) ?>
+                <?= view('fact-place', ['fact' => $fact, 'record' => $record]) ?>
+            </div>
+
+            <div class="wt-fact-other-attributes mt-2">
+                <?php preg_match_all('/\n2 (' . Gedcom::REGEX_TAG . ')( .*)?((\n[3-9].*)*)/', $fact->gedcom(), $matches, PREG_SET_ORDER) ?>
+                <?php foreach ($matches as $match) : ?>
+                    <?php if (!in_array($match[1], ['DATE', 'AGE', 'HUSB', 'WIFE', 'PLAC', 'ASSO', '_ASSO', 'STAT', 'TEMP', 'TYPE', 'CONT', 'NOTE', 'OBJE', 'SOUR'], true)) : ?>
+                        <?= view('fact-gedcom-fields', ['gedcom' => $match[0], 'parent' => $fact->tag() . ':' . $match[1], 'tree' => $tree]) ?>
+                    <?php endif ?>
+                <?php endforeach; ?>
+            </div>
+
+            <?php if ($id !== 'asso') : ?>
+                <?= view('fact-associates', ['fact' => $fact]) ?>
+            <?php endif ?>
+
+            <?= view('fact-sources', ['fact' => $fact]) ?>
+            <?= view('fact-notes', ['fact' => $fact]) ?>
+            <?= view('fact-media', ['fact' => $fact]) ?>
+        <?php endif ?>
+    </td>
+</tr>
\ No newline at end of file
diff --git a/resources/views/individual-page copy 2.phtml b/resources/views/individual-page copy 2.phtml
new file mode 100644
index 0000000..ca54e63
--- /dev/null
+++ b/resources/views/individual-page copy 2.phtml	
@@ -0,0 +1,148 @@
+<?php
+$view = view('::individual-page', get_defined_vars());
+
+// Extract the image
+$pattern = '/<div[^>]*>\s*<a class="gallery".*?<\/div>/s';
+preg_match($pattern, $view, $matches);
+$galleryDiv = $matches[0] ?? '';
+
+// Extract the image link
+$imageLinkPattern = '/src="([^"]+)"/';
+preg_match($imageLinkPattern, $galleryDiv, $imageLinkMatches);
+$imageLink = $imageLinkMatches[1] ?? '';
+
+// Extract the link URL and text
+$linkPattern = '/<div class="text-center">\s*<a href="([^"]+)">\s*(.*?)\s*<\/a>/s';
+preg_match($linkPattern, $galleryDiv, $linkMatches);
+$linkURL = $linkMatches[1] ?? '';
+$linkText = $linkMatches[2] ?? '';
+
+// Extract the title
+$pattern = '/<h2 class="wt-page-title.*?<\/h2>/s';
+preg_match($pattern, $view, $matches);
+$pageTitleDiv = $matches[0] ?? '';
+
+// Modify the view to place the image and title in a grid
+$view = preg_replace($pattern, '<div class="navbar-grid mx-auto">' .
+    '<div class="grid-title" style="font-size: 50%; padding-left: 15px">' . $pageTitleDiv . '</div>' .
+    '</div>', $view);
+
+// Pass the $imageLink variable to the modified view
+$view = str_replace('$imageLink', $imageLink, $view);
+
+// Extract the original navbar background color and box shadow
+$originalNavbar = '<header class="wt-header-wrapper';
+preg_match('/<header class="wt-header-wrapper[^"]+" style="background-color:(#[^"]+);[^"]+box-shadow:([^"]+)"/', $view, $matches);
+$navbarBackgroundColor = $matches[1] ?? '';
+$navbarBoxShadow = $matches[2] ?? '';
+
+// Display the modified view
+echo $view;
+?>
+
+
+<style>
+    .fixed-navbar h2 {
+        font-size: 16px;
+    }
+
+    .navbar-grid {
+        display: grid;
+        grid-template-columns: auto auto;
+        align-items: center;
+    }
+
+    .navbar-grid .grid-image img {
+        width: 150px;
+    }
+
+    .fixed-navbar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 99; /* Lower z-index to position the fixed navbar below the original navbar */
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        background-color: <?= $navbarBackgroundColor ?>;
+        box-shadow: <?= $navbarBoxShadow ?>;
+    }
+
+    .navbar-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px;
+        background-color: #ffffff;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    }
+
+    .navbar-content .grid-image {
+        margin-right: 10px;
+    }
+
+    .grid-title {
+        font-size: 50%;
+    }
+
+    .wt-page-title.mx-auto {
+        margin-bottom: auto;
+    }
+    
+    .wt-header-wrapper {
+        pointer-events: auto;
+    }
+
+    /* #individual-names {
+display: none;
+}     */
+
+/* div:has(> a.gallery) {
+  display: none;
+} */
+
+@media (min-width: 768px) {
+    main {
+      padding-top: 20px;
+    }
+    .wt-header-container {
+    margin-top: 1rem;
+    }    
+  }
+  @media (max-width: 767px) {
+    main {
+      padding-top: 0px;
+    }
+    [dir] .wt-header-container {
+    margin-top: 0px;
+    }    
+  }
+</style>
+
+<script>
+    window.addEventListener('scroll', function() {
+        var navbarGrid = document.querySelector('.navbar-grid');
+        var navbar = document.querySelector('.wt-header-wrapper');
+        var fixedNavbar = document.querySelector('.fixed-navbar');
+
+        if (navbarGrid && navbar && fixedNavbar) {
+            var navbarGridOffsetTop = navbarGrid.offsetTop + 75; // Adjust the offset value here
+            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+            if (scrollTop >= navbarGridOffsetTop && fixedNavbar.style.opacity !== '1') {
+                navbar.style.opacity = '0';
+                fixedNavbar.style.opacity = '1';
+            } else if (scrollTop < navbarGridOffsetTop && fixedNavbar.style.opacity !== '0') {
+                navbar.style.opacity = '1';
+                fixedNavbar.style.opacity = '0';
+            }
+        }
+    });
+</script>
+
+<div class="fixed-navbar">
+    <div class="navbar-content mx-auto">
+        <div class="grid-image"><img src="<?= $imageLink ?>" alt="Image" height="40px"></div>
+        <div class="grid-title"><?= $pageTitleDiv ?></div>
+    </div>
+</div>
diff --git a/resources/views/individual-page copy.phtml b/resources/views/individual-page copy.phtml
new file mode 100644
index 0000000..eb79243
--- /dev/null
+++ b/resources/views/individual-page copy.phtml	
@@ -0,0 +1,149 @@
+<?php
+$view = view('::individual-page', get_defined_vars());
+
+// Extract the image
+$pattern = '/<div[^>]*>\s*<a class="gallery".*?<\/div>/s';
+preg_match($pattern, $view, $matches);
+$galleryDiv = $matches[0] ?? '';
+
+// Extract the image link
+$imageLinkPattern = '/src="([^"]+)"/';
+preg_match($imageLinkPattern, $galleryDiv, $imageLinkMatches);
+$imageLink = $imageLinkMatches[1] ?? '';
+
+// Extract the link URL and text
+$linkPattern = '/<div class="text-center">\s*<a href="([^"]+)">\s*(.*?)\s*<\/a>/s';
+preg_match($linkPattern, $galleryDiv, $linkMatches);
+$linkURL = $linkMatches[1] ?? '';
+$linkText = $linkMatches[2] ?? '';
+
+// Extract the title
+$pattern = '/<h2 class="wt-page-title.*?<\/h2>/s';
+preg_match($pattern, $view, $matches);
+$pageTitleDiv = $matches[0] ?? '';
+
+// Modify the view to place the image and title in a grid
+$modifiedView = preg_replace($pattern, '<div class="navbar-grid mx-auto">' .
+    '<div class="grid-image text-center"><img src="' . $imageLink . '" alt="Image" width="150"><br><a href="' . $linkURL . '">' . $linkText . '</a></div>' .
+    '<div class="grid-title" style="font-size: 50%; padding-left: 15px">' . $pageTitleDiv . '</div>' .
+    '</div>', $view);
+
+// Pass the $imageLink variable to the modified view
+$modifiedView = str_replace('$imageLink', $imageLink, $modifiedView);
+
+// Extract the original navbar background color and box shadow
+$originalNavbar = '<header class="wt-header-wrapper';
+preg_match('/<header class="wt-header-wrapper[^"]+" style="background-color:(#[^"]+);[^"]+box-shadow:([^"]+)"/', $view, $matches);
+$navbarBackgroundColor = $matches[1] ?? '';
+$navbarBoxShadow = $matches[2] ?? '';
+
+// Display the modified view
+echo $modifiedView;
+?>
+
+
+<style>
+    .fixed-navbar h2 {
+        font-size: 16px;
+    }
+
+    .navbar-grid {
+        display: grid;
+        grid-template-columns: auto auto;
+        align-items: center;
+    }
+
+    .navbar-grid .grid-image img {
+        width: 150px;
+    }
+
+    .fixed-navbar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 99; /* Lower z-index to position the fixed navbar below the original navbar */
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        background-color: <?= $navbarBackgroundColor ?>;
+        box-shadow: <?= $navbarBoxShadow ?>;
+    }
+
+    .navbar-content {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 10px;
+        background-color: #ffffff;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    }
+
+    .navbar-content .grid-image {
+        margin-right: 10px;
+    }
+
+    .grid-title {
+        font-size: 50%;
+    }
+
+    .wt-page-title.mx-auto {
+        margin-bottom: auto;
+    }
+    
+    .wt-header-wrapper {
+        pointer-events: auto;
+    }
+
+    #individual-names {
+display: none;
+}    
+
+div:has(> a.gallery) {
+  display: none;
+}
+
+@media (min-width: 768px) {
+    main {
+      padding-top: 20px;
+    }
+    .wt-header-container {
+    margin-top: 1rem;
+    }    
+  }
+  @media (max-width: 767px) {
+    main {
+      padding-top: 0px;
+    }
+    [dir] .wt-header-container {
+    margin-top: 0px;
+    }    
+  }
+</style>
+
+<script>
+    window.addEventListener('scroll', function() {
+        var navbarGrid = document.querySelector('.navbar-grid');
+        var navbar = document.querySelector('.wt-header-wrapper');
+        var fixedNavbar = document.querySelector('.fixed-navbar');
+
+        if (navbarGrid && navbar && fixedNavbar) {
+            var navbarGridOffsetTop = navbarGrid.offsetTop + 75; // Adjust the offset value here
+            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+            if (scrollTop >= navbarGridOffsetTop && fixedNavbar.style.opacity !== '1') {
+                navbar.style.opacity = '0';
+                fixedNavbar.style.opacity = '1';
+            } else if (scrollTop < navbarGridOffsetTop && fixedNavbar.style.opacity !== '0') {
+                navbar.style.opacity = '1';
+                fixedNavbar.style.opacity = '0';
+            }
+        }
+    });
+</script>
+
+<div class="fixed-navbar">
+    <div class="navbar-content mx-auto">
+        <div class="grid-image"><img src="<?= $imageLink ?>" alt="Image" height="40px"></div>
+        <div class="grid-title"><?= $pageTitleDiv ?></div>
+    </div>
+</div>
diff --git a/resources/views/individual-page-title.phtml b/resources/views/individual-page-title.phtml
new file mode 100644
index 0000000..95add0d
--- /dev/null
+++ b/resources/views/individual-page-title.phtml
@@ -0,0 +1,10 @@
+<?php
+
+$view = view('::individual-page-title', get_defined_vars());
+
+// Replace the comma with a line break
+$view = str_replace(',', '<br>', $view);
+
+echo $view;
+
+?>
diff --git a/resources/views/modules/random_media/slide-show.phtml b/resources/views/modules/random_media/slide-show.phtml
new file mode 100644
index 0000000..a77288b
--- /dev/null
+++ b/resources/views/modules/random_media/slide-show.phtml
@@ -0,0 +1,129 @@
+<?php
+
+use Fisharebest\Webtrees\Family;
+use Fisharebest\Webtrees\I18N;
+use Fisharebest\Webtrees\Individual;
+use Fisharebest\Webtrees\Media;
+use Fisharebest\Webtrees\MediaFile;
+use Fisharebest\Webtrees\Source;
+use Fisharebest\Webtrees\Tree;
+use Illuminate\Support\Collection;
+
+/**
+ * @var int                    $block_id
+ * @var int                    $delay
+ * @var Collection<Family>     $linked_families
+ * @var Collection<Individual> $linked_individuals
+ * @var Collection<Source>     $linked_sources
+ * @var Media                  $media
+ * @var MediaFile              $media_file
+ * @var bool                   $show_controls
+ * @var bool                   $start_automatically
+ * @var Tree                   $tree
+ */
+
+?>
+
+<div class="wt-slide-show-container">
+    <?php if ($show_controls) : ?>
+        <div class="wt-slide-show-controls text-center">
+            <a href="#" title="<?= I18N::translate('Play') ?>" <?= $start_automatically ? 'hidden' : '' ?>>
+                <?= view('icons/media-play') ?>
+                <span class="visually-hidden"><?= I18N::translate('Play') ?></span>
+            </a>
+            <a href="#" title="<?= I18N::translate('Stop') ?>" <?= $start_automatically ? '' : 'hidden' ?>>
+                <?= view('icons/media-stop') ?>
+                <span class="visually-hidden"><?= I18N::translate('Stop') ?></span>
+            </a>
+            <a href="#" title="<?= I18N::translate('Next image') ?>">
+                <?= view('icons/media-next') ?>
+                <span class="visually-hidden"><?= I18N::translate('Next image') ?></span>
+            </a>
+        </div>
+    <?php endif ?>
+
+    <figure class="wt-slide-show-figure text-center">
+        <?= $media_file->displayImage(200, 200, 'contain', ['class' => 'slide-show-image img-fluid']) ?>
+        <figcaption class="wt-slide-show-figcaption">
+            <a href="<?= e($media->url()) ?>">
+                <b><?= $media->fullName() ?></b>
+            </a>
+        </figcaption>
+    </figure>
+
+    <p class="wt-slide-show-notes text-center">
+        <?php foreach ($media->facts(['NOTE']) as $fact) : ?>
+            <?= view('fact-gedcom-fields', ['gedcom' => $fact->gedcom(), 'parent' => $media->tag(), 'tree' => $tree]) ?>
+        <?php endforeach ?>
+    </p>
+
+    <ul class="fa-ul wt-slide-show-links">
+        <?php foreach ($linked_individuals as $individual) : ?>
+            <li>               
+                <a href="<?= e($individual->url()) ?>" class="wt-slide-show-link">
+                    <?php if ($individual->tree()->getPreference('SHOW_HIGHLIGHT_IMAGES')) : ?>
+                        <div class="fa-li">
+                            <?= preg_replace('#<a.*?>(.*?)</a>#i', '\1', $individual->displayImage(40, 50, 'crop', ['class' => 'wt-chart-box-thumbnail'])) ?>
+                    </div>
+                    <?php else : ?> 
+                        <span class="fa-li" title="<?= I18N::translate('Individual') ?>"><?= view('icons/individual') ?></span>
+                    <?php endif ?>                  
+                    <?= $individual->fullName() ?>
+                </a>
+            </li>
+        <?php endforeach ?>
+
+        <?php foreach ($linked_families as $family) : ?>
+            <li>
+                <span class="fa-li" title="<?= I18N::translate('Family') ?>"><?= view('icons/family') ?></span>
+                <a href="<?= e($family->url()) ?>" class="wt-slide-show-link">
+                    <?= $family->fullName() ?>
+                </a>
+            </li>
+        <?php endforeach ?>
+
+        <?php foreach ($linked_sources as $source) : ?>
+            <li>
+                <span class="fa-li" title="<?= I18N::translate('Source') ?>"><?= view('icons/source') ?></span>
+                <a href="<?= e($source->url()) ?>" class="wt-slide-show-link">
+                    <?= $source->fullName() ?>
+                </a>
+            </li>
+        <?php endforeach ?>
+    </ul>
+</div>
+
+<script>
+    var play = <?= json_encode($start_automatically, JSON_THROW_ON_ERROR) ?>;
+
+    if (play) {
+        var timeout = setTimeout(slideShowReload, <?= json_encode($delay * 1000, JSON_THROW_ON_ERROR) ?>);
+    }
+
+    function slideShowReload() {
+        var block = $("#block-<?= $block_id ?>").parent();
+        clearTimeout(timeout);
+        block.load(block.data("wtAjaxUrl") + "&start=" + (play ? "1" : "0"));
+
+        return false;
+    }
+
+    $(".wt-icon-media-play").on("click", function () {
+        $(".wt-icon-media-play").parent().attr("hidden", true);
+        $(".wt-icon-media-stop").parent().attr("hidden", false);
+        play = true;
+        return slideShowReload();
+    });
+
+    $(".wt-icon-media-stop").on("click", function () {
+        $(".wt-icon-media-stop").parent().attr("hidden", true);
+        $(".wt-icon-media-play").parent().attr("hidden", false);
+        play = false;
+        clearTimeout(timeout);
+        return false;
+    });
+
+    $(".wt-icon-media-next").on("click", function () {
+        return slideShowReload();
+    });
+</script>