diff --git a/templates/admin/base.jinja b/templates/admin/base.jinja
index 0ec24c0..6f56833 100644
--- a/templates/admin/base.jinja
+++ b/templates/admin/base.jinja
@@ -4,10 +4,7 @@
 <head>
   <title>{% block title %}{{ title|none('Admiral') }}{% endblock %}</title>
 
-  <!-- You MUST include jQuery 3.4+ before Fomantic -->
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
-  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.js"></script>
+  {% include "fomantic.html" %}
 
   <link rel="stylesheet" type="text/css" href="/static/admin/admin.css">
 
diff --git a/templates/base.html b/templates/base.html.j2
similarity index 71%
rename from templates/base.html
rename to templates/base.html.j2
index 92015a7..f94df14 100644
--- a/templates/base.html
+++ b/templates/base.html.j2
@@ -1,6 +1,7 @@
 <!doctype html>
 
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -19,18 +20,25 @@
   <link rel="icon" href="/favicon.svg" type="image/svg+xml">
   <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 
-  <link rel="stylesheet" href="/static/uikit/css/uikit.css?v=1.0">
+  {% block fomantic %}
+  {% include "fomantic.html" %}
+  {% endblock %}
 
 </head>
 
 <body>
-    {% block top %}
-    {% include "site/top.html" %}
-    {% endblock %}
-    {% block content %}
-    <!-- your content here... -->
-    {% endblock %}
+  {% block body %}
+  {% block top %}
+  {% include "site/top.html" %}
+  {% endblock top %}
+  {% block content %}
+  <!-- your content here... -->
+  {% endblock content %}
+  {% endblock body %}
+  {% block bodyjs %}
   <script src="/static/uikit/js/uikit.js"></script>
   <script src="/static/htmx/htmx.min.js"></script>
+  {% endblock bodyjs %}
 </body>
+
 </html>
\ No newline at end of file
diff --git a/templates/fomantic.html b/templates/fomantic.html
new file mode 100644
index 0000000..ec71c64
--- /dev/null
+++ b/templates/fomantic.html
@@ -0,0 +1,3 @@
+<script src="https://unpkg.com/jquery@3.7.1/dist/jquery.js"></script>
+<link rel="stylesheet" type="text/css" href="https://unpkg.com/fomantic-ui@2.9.3/dist/semantic.min.css">
+<script src="https://unpkg.com/fomantic-ui@2.9.3/dist/semantic.min.js"></script>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 730d1e5..b1f3a27 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1 +1,105 @@
-{% extends "base.html" %}
+{% extends "base.html.j2" %}
+
+{% block content %}
+<div class="pusher">
+    <div class="ui inverted vertical masthead center aligned segment">
+
+        <div class="ui text container">
+            <h1 class="ui inverted header">
+                Imagine-a-Company
+            </h1>
+            <h2>Do whatever you want when you want to.</h2>
+            <div class="ui huge primary button">Get Started <i class="right arrow icon"></i></div>
+        </div>
+
+    </div>
+    <div class="ui vertical stripe segment">
+        <div class="ui middle aligned stackable grid container">
+            <div class="row">
+                <div class="eight wide column">
+                    <h3 class="ui header">We Help Companies and Companions</h3>
+                    <p>We can give your company superpowers to do things that they never thought possible. Let us
+                        delight your customers and empower your needs...through pure data analytics.</p>
+                    <h3 class="ui header">We Make Bananas That Can Dance</h3>
+                    <p>Yes that's right, you thought it was the stuff of dreams, but even bananas can be bioengineered.
+                    </p>
+                </div>
+                <div class="six wide right floated column">
+                    <img src="assets/images/wireframe/white-image.png" class="ui large bordered rounded image">
+                </div>
+            </div>
+            <div class="row">
+                <div class="center aligned column">
+                    <a class="ui huge button">Check Them Out</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="ui vertical stripe quote segment">
+        <div class="ui equal width stackable internally celled grid">
+            <div class="center aligned row">
+                <div class="column">
+                    <h3>"What a Company"</h3>
+                    <p>That is what they all say about us</p>
+                </div>
+                <div class="column">
+                    <h3>"I shouldn't have gone with their competitor."</h3>
+                    <p>
+                        <img src="assets/images/avatar/nan.jpg" class="ui avatar image"> <b>Nan</b> Chief Fun Officer
+                        Acme Toys
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="ui vertical stripe segment">
+        <div class="ui text container">
+            <h3 class="ui header">Breaking The Grid, Grabs Your Attention</h3>
+            <p>Instead of focusing on content creation and hard work, we have learned how to master the art of doing
+                nothing by providing massive amounts of whitespace and generic content that can seem massive, monolithic
+                and worth your attention.</p>
+            <a class="ui large button">Read More</a>
+            <h4 class="ui horizontal header divider">
+                <a href="#">Case Studies</a>
+            </h4>
+            <h3 class="ui header">Did We Tell You About Our Bananas?</h3>
+            <p>Yes I know you probably disregarded the earlier boasts as non-sequitur filler content, but its really
+                true. It took years of gene splicing and combinatory DNA research, but our bananas can really dance.</p>
+            <a class="ui large button">I'm Still Quite Interested</a>
+        </div>
+    </div>
+
+
+    <div class="ui inverted vertical footer segment">
+        <div class="ui container">
+            <div class="ui stackable inverted divided equal height stackable grid">
+                <div class="three wide column">
+                    <h4 class="ui inverted header">About</h4>
+                    <div class="ui inverted link list">
+                        <a href="#" class="item">Sitemap</a>
+                        <a href="#" class="item">Contact Us</a>
+                        <a href="#" class="item">Religious Ceremonies</a>
+                        <a href="#" class="item">Gazebo Plans</a>
+                    </div>
+                </div>
+                <div class="three wide column">
+                    <h4 class="ui inverted header">Services</h4>
+                    <div class="ui inverted link list">
+                        <a href="#" class="item">Banana Pre-Order</a>
+                        <a href="#" class="item">DNA FAQ</a>
+                        <a href="#" class="item">How To Access</a>
+                        <a href="#" class="item">Favorite X-Men</a>
+                    </div>
+                </div>
+                <div class="seven wide column">
+                    <h4 class="ui inverted header">Footer Header</h4>
+                    <p>Extra space for a call to action inside the footer that could help re-engage users.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock content %}
\ No newline at end of file
diff --git a/templates/site/top.html b/templates/site/top.html
index 638b9d7..f997cb7 100644
--- a/templates/site/top.html
+++ b/templates/site/top.html
@@ -1,33 +1,32 @@
-<nav class="uk-navbar-container">
-    <div class="uk-container">
-        <div uk-navbar>
+<header class="ui top fixed small secondary pointing menu">
 
-            <div class="uk-navbar-left">
+    <a class="launch icon item">
+        <i class="content icon"></i>
+    </a>
 
-                <a class="uk-navbar-item uk-logo" href="#" aria-label="Back to Home">Logo</a>
+    <div class="active item" id="branding">
+        {% block branding %}Miniweb{% endblock %}
+    </div>
 
-                <ul class="uk-navbar-nav">
-                    <li>
-                        <a href="#">
-                            <span class="uk-icon uk-margin-small-right" uk-icon="icon: star"></span>
-                            Features
-                        </a>
-                    </li>
-                </ul>
+    <div class="item">
+        About
+    </div>
 
-                <div class="uk-navbar-item">
-                    <div>Some <a href="#">Link</a></div>
-                </div>
+    <div class="right menu">
+        <div class="item">
+            <a class="ui violet image label">
+                <img src="/static/admin/teddy_bear.png">
+                Person
+                <div class="detail">Admin</div>
+            </a>
+        </div>
 
-                <div class="uk-navbar-item">
-                    <form action="javascript:void(0)">
-                        <input class="uk-input uk-form-width-small" type="text" placeholder="Input" aria-label="Input">
-                        <button class="uk-button uk-button-default">Button</button>
-                    </form>
-                </div>
-
-            </div>
+        <div class="icon item">
+            <form id="logout-form" method="post" action="{{ url('admin:logout') }}">
+                <i class="power link icon" style="float: none;"></i>
+            </form>
 
         </div>
     </div>
-</nav>
+
+</header>
\ No newline at end of file
