diff --git a/djlearn/pages/static/css/landing.css b/djlearn/pages/static/css/base.css
similarity index 72%
rename from djlearn/pages/static/css/landing.css
rename to djlearn/pages/static/css/base.css
index 65e87af..a39e366 100644
--- a/djlearn/pages/static/css/landing.css
+++ b/djlearn/pages/static/css/base.css
@@ -20,53 +20,11 @@ p {
     margin: 0;
 }
 
-.landing-bg {
+.bg {
     background: url("/static/img/nasa_splash.jpg") no-repeat center center fixed;
     background-size: cover;
 }
 
-.landing-main-text {
-    text-align: center;
-    margin: 1em;
-}
-
-.landing-section {
-    min-height: 100vh;
-    width: 100vw;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.landing-section-content {
-    width: 100vw;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    color: #ccc;
-}
-
-.landing-section-content-inner {
-    width: 100vw;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    color: #ccc;
-}
-
-/*
-.landing-features {
-    background: ;
-}
-
-.landing-feature {
-    
-}
-*/
-
 .shade {
     width: 100vw;
     display: flex;
@@ -91,16 +49,6 @@ footer p {
     margin: 0.5em;
 }
 
-.brand {
-    margin: 0;
-    color: #c55e00;
-    font-size: 3em;
-}
-
-.brand-text {
-    color: gold;
-}
-
 .header {
     width: 100vw;
     display: flex;
@@ -150,4 +98,14 @@ footer p {
 #logo-img {
     width: 50px;
     height: 50px;
-}
\ No newline at end of file
+}
+
+.brand {
+    margin: 0;
+    color: #c55e00;
+    font-size: 3em;
+}
+
+.brand-text {
+    color: gold;
+}
diff --git a/djlearn/pages/static/css/index.css b/djlearn/pages/static/css/index.css
new file mode 100644
index 0000000..c762a9e
--- /dev/null
+++ b/djlearn/pages/static/css/index.css
@@ -0,0 +1,31 @@
+.landing-main-text {
+    text-align: center;
+    margin: 1em;
+}
+
+.landing-section {
+    min-height: 100vh;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.landing-section-content {
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: #ccc;
+}
+
+.landing-section-content-inner {
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: #ccc;
+}
diff --git a/djlearn/pages/static/css/login.css b/djlearn/pages/static/css/login.css
index f85bbf6..906175f 100644
--- a/djlearn/pages/static/css/login.css
+++ b/djlearn/pages/static/css/login.css
@@ -1,39 +1,3 @@
-body {
-    font-family: monospace;
-    margin: 0;
-    overflow-x: hidden;
-    color: white;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
-::-webkit-scrollbar {
-    display: none;
-}
-
-a {
-    color: lightcoral;
-}
-
-p {
-    margin: 0;
-}
-
-.login-bg {
-    background: url("/static/img/nasa_splash.jpg") no-repeat center center fixed;
-    background-size: cover;
-}
-
-.shade {
-    width: 100vw;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0,0,0,0.5);
-}
-
 .login-section {
     min-height: 100vh;
     width: 100vw;
@@ -72,57 +36,3 @@ p {
     justify-content: space-between;
     margin: 0.5em 0.5em 0 0;
 }
-
-footer {
-    width: 100vw;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.75rem;
-    position: absolute;
-    bottom: 0;
-}
-
-footer p {
-    margin: 0.5em;
-}
-
-.brand {
-    font-size: 2.5em;
-    margin: 0;
-    color: #c55e00;
-}
-
-
-.header {
-    width: 100vw;
-    display: flex;
-    flex-direction: row;
-    position: absolute;
-}
-  
-.header-link {
-    color: white;
-    margin: 1rem;
-    font-size: 1rem;
-    text-decoration: underline 0.1em #c55e00;
-    text-underline-offset: 0.1em;
-    transition: text-decoration-color 300ms, text-underline-offset 300ms;
-}
-
-.header-link:hover {
-    text-decoration-color: red;
-    text-underline-offset: 0.2em;
-}
-  
-.header-text {
-    margin: 1rem 1rem 1rem auto;
-    font-size: 1rem;
-    color: #ccc;
-}
-
-#logo {
-    width: 50px;
-    height: 50px;
-}
\ No newline at end of file
diff --git a/djlearn/pages/templates/pages/base.html b/djlearn/pages/templates/pages/base.html
new file mode 100644
index 0000000..f09119e
--- /dev/null
+++ b/djlearn/pages/templates/pages/base.html
@@ -0,0 +1,55 @@
+{% load static %}
+<!DOCTYPE html>
+<html>
+    <head>
+        <!-- Source for this example: https://dev.to/hmlon/creating-a-landing-page-in-django-20pg -->
+
+        <title>{% block title %}PyHub{% endblock %}</title>
+        <link rel="shortcut icon" href="{% static 'img/logo.ico' %}"/>
+        <meta name-="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">
+        {% block extrahead %}{% endblock %}
+    </head>
+
+    <body>
+        <main>
+
+            <header class="header shade">
+                <!-- left -->
+                <div class="header-left">
+                    <a href="/"><img id="logo-img" src="{% static 'img/logo.png' %}" alt="Logo"></a>
+                </div>
+                <!-- center -->
+                <div class="header-center">
+                    {% if user.is_authenticated %}
+                        {{ user.username }}
+            
+                    {% else %}
+                        <p>You are not logged in</p>
+                        <a href="{% url 'login' %}">Log In</a>
+                    {% endif %}
+                </div>
+                <!-- right -->
+                <div class="header-right">
+                    <span class="header-text">Sign in:</span>
+                    <a href="/auth/login/" class="header-link">PyHub</a>
+                    <a href="#" class="header-link">Github</a>
+                    <a href="#" class="header-link">Twitter</a>
+                </div>
+            </header>
+            
+            <main class="bg">
+                {% block content %}
+                {% endblock %}
+            </main>
+
+            <footer>
+                <div>
+                    <p>made using Django ❤️</p>
+                </div>
+            </footer>
+
+        </main>
+    </body>
+
+</html>
\ No newline at end of file
diff --git a/djlearn/pages/templates/pages/index.html b/djlearn/pages/templates/pages/index.html
index a0d0edf..bc3a95c 100644
--- a/djlearn/pages/templates/pages/index.html
+++ b/djlearn/pages/templates/pages/index.html
@@ -1,74 +1,46 @@
+{% extends 'pages/base.html' %}
 {% load static %}
-<!DOCTYPE html>
-<html>
-    <head>
-        <!-- Source for this example: https://dev.to/hmlon/creating-a-landing-page-in-django-20pg -->
 
-        <title>PyHub - Landing</title>
-        <link rel="stylesheet" type="text/css" href="{% static 'css/landing.css' %}">
-        <link rel="shortcut icon" href="{% static 'img/logo.ico' %}"/>
-        <meta name-="viewport" content="width=device-width, initial-scale=1">
-    </head>
+{% block title %}PyHub - Landing{% endblock %}
 
-    <body>
+{% block extrahead %}
+    <link rel="stylesheet" href="{% static 'css/index.css' %}">
+{% endblock %}
 
-        <header class="header shade">
-            <!-- left -->
-            <div class="header-left">
-                <a href="/"><img id="logo-img" src="{% static 'img/logo.png' %}" alt="Logo"></a>
-            </div>
-            <!-- center -->
-            <div class="header-center">
-                Test
-            </div>
-            <!-- right -->
-            <div class="header-right">
-                <span class="header-text">Sign in:</span>
-                <a href="/auth/login/" class="header-link">PyHub</a>
-                <a href="#" class="header-link">Github</a>
-                <a href="#" class="header-link">Twitter</a>
-            </div>
-        </header>
+{% block content %}
 
-        <section class="landing-section landing-bg">
-            <div class="landing-section-content">
-                <div class="landing-section-content-inner shade">
-                    <h1 class="brand">&lt;PyHub&gt;</h1>
-                    <!--
-                    <h2>
-                        <span class="brand-text">Land</span>ing
-                        <span class="brand-text">Pa</span>ge
-                    </h2>
-                    -->
-                    <p class="landing-main-text">
-                        This is the PyHub landing Page
-                        <br>
-                        I can and will do everything i want here.
-                    </p>
-                </div>
-            </div>
+<section class="landing-section">
+    <div class="landing-section-content">
+        <div class="content-section-content-inner shade">
+            <h1 class="brand">&lt;PyHub&gt;</h1>
+            <!--
+            <h2>
+                <span class="brand-text">Land</span>ing
+                <span class="brand-text">Pa</span>ge
+            </h2>
+            -->
+            <p class="landing-main-text">
+                This is the PyHub landing Page
+                <br>
+                I can and will do everything i want here.
+            </p>
+        </div>
+    </div>
+</section>
+
+
+<section class="landing-section landing-bg">
+
+    <div class="shade">
+        <section class="landing-feature">
+            <h2>Connect with <span class="brand-text">Github</span></h2>
         </section>
 
-        <footer>
-            <div>
-                <p>made using Django ❤️</p>
-            </div>
-        </footer>
-
-
-        <section class="landing-section landing-bg">
-
-            <div class="shade">
-                <section class="landing-feature">
-                    <h2>Connect with <span class="brand-text">Github</span></h2>
-                </section>
-
-                <section class="landing-feature">
-                    <h2>Connect with <span class="brand-text">Twitter</span></h2>
-                </section>
-            </div>
-
+        <section class="landing-feature">
+            <h2>Connect with <span class="brand-text">Twitter</span></h2>
         </section>
+    </div>
 
-    </body>
-</html>
\ No newline at end of file
+</section>
+
+{% endblock %}
\ No newline at end of file
diff --git a/djlearn/pages/templates/registration/login.html b/djlearn/pages/templates/registration/login.html
index b88582e..56914e2 100644
--- a/djlearn/pages/templates/registration/login.html
+++ b/djlearn/pages/templates/registration/login.html
@@ -1,48 +1,33 @@
+{% extends 'pages/base.html' %}
 {% load static %}
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>PyHub - Login</title>
-        <link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">
-        <link rel="shortcut icon" href="{% static 'img/logo.ico' %}"/>
-        <meta name-="viewport" content="width=device-width, initial-scale=1">
-    </head>
 
-    <body>
+{% block title %}PyHub - Login{% endblock %}
 
-        <header class="header shade">
-            <div>
-                <a href="/"><img id="logo" src="{% static 'img/logo.png' %}" alt="Logo"></a>
-            </div>
-            <div class="header-text"></div>
-        </header>
+{% block extrahead %}
+    <link rel="stylesheet" href="{% static 'css/login.css' %}">
+{% endblock %}
 
-        <section class="login-section login-bg">
-            <div class="login-section-content shade">
-                <h1 class="brand">&lt;PyHub Login&gt;</h1>
-                <form class="login-form" method="post" action="">
-                    {% csrf_token %}
-                    {{ form.as_p }}
-                    <!--
+{% block content %}
+
+<section class="login-section">
+    <div class="login-section-content shade">
+        <h1 class="brand">&lt;PyHub Login&gt;</h1>
+        <form class="login-form" method="post" action="">
+            {% csrf_token %}
+            {{ form.as_p }}
+            <!--
                     <span><input class="login-input" type="text" name="login" value="" placeholder="Username or Email"></span>
                     <span><input class="login-input" type="password" name="password" value="" placeholder="Password"></span>
                     -->
-                    <div class="spaced">
-                        <span class="remember_me">
-                            <label><input type="checkbox" name="remember_me" id="remember_me">Remember me</label>
-                        </span>
-                        <span class="submit"><input type="submit" name="commit" value="Login"></span>
-                    </div>
-                </form>
-                <p>Forgot your password? <a href="#">Click here to reset</a>.</p>
+            <div class="spaced">
+                <span class="remember_me">
+                    <label><input type="checkbox" name="remember_me" id="remember_me">Remember me</label>
+                </span>
+                <span class="submit"><input type="submit" name="commit" value="Login"></span>
             </div>
-        </section>
+        </form>
+        <p>Forgot your password? <a href="#">Click here to reset</a>.</p>
+    </div>
+</section>
 
-        <footer>
-            <div>
-                <p>made using Django ❤️</p>
-            </div>
-        </footer>
-
-    </body>
-</html>
\ No newline at end of file
+{% endblock %}
\ No newline at end of file