diff --git a/app.py b/app.py
index 2ac8bee..0ce3aba 100644
--- a/app.py
+++ b/app.py
@@ -1,7 +1,8 @@
-from flask import Flask, render_template
+from flask import Flask, request, render_template
 from werkzeug.middleware.proxy_fix import ProxyFix
 from flask_minify import minify
 import yaml
+import re
 from os import listdir
 from os.path import isfile, join, splitext
 
@@ -14,18 +15,37 @@
     app.wsgi_app, x_for=1, x_proto=1, x_host=1, x_prefix=1
 )
 
-@app.route("/")
-def home():
-    yaml_path = './blog/posts/'
-    code_snippet_path = './blog/code_snippets/'
-    dir_files = [join(yaml_path, file) for file in listdir(yaml_path) if isfile(join(yaml_path, file))]
+posts_dir = './blog/posts/'
+code_snippet_path = './blog/code_snippets/'
+
+def get_posts():
+    dir_files = listdir(posts_dir)
     yaml_files = [file for file in dir_files if splitext(file)[1] == '.yaml']
     yaml_files.sort(reverse=True)
+    timeline = {}
+    for yaml_file in yaml_files:
+        link_to_post = "/post?date=" + yaml_file
+        # collect datetime info
+        datetime_list = re.split('_|\.', yaml_file)
+        file_year = datetime_list[0]
+        file_month = datetime_list[1]
+        file_day = datetime_list[2]
+        if file_year in timeline:
+            if file_month in timeline[file_year]:
+                timeline[file_year][file_month][file_day] = link_to_post
+            else:
+                timeline[file_year][file_month] = {file_day: link_to_post}
+        else:
+            timeline[file_year] = {file_month: {file_day: link_to_post}}
+    return yaml_files, timeline
+
+def load_post_data(yaml_files):
     post_array = []
     for yaml_file in yaml_files:
-        with open(yaml_file, 'r') as file:
+        # load in post text
+        with open(join(posts_dir, yaml_file), 'r') as file:
             post_data = yaml.safe_load(file)
-        
+
         # parse and preload code snippet files
         if post_data.get('body'):
             for body in post_data['body']:
@@ -33,10 +53,25 @@ def home():
                     with open(join(code_snippet_path, body['code']), 'r') as file:
                         code_snippet = file.read()
                         body['code'] = code_snippet
-        
         post_array.append(post_data)
-    return render_template('blog.html', post_array=post_array)
+    return post_array
+
+@app.route("/", methods=['GET'])
+def home():
+    yaml_files, timeline = get_posts()
+    post_array = load_post_data(yaml_files)
+    return render_template('blog.html', post_array=post_array, date_dict=timeline)
+
+@app.route("/post", methods=['GET'])
+def post():
+    req_post = request.args.get('date')
+    if req_post:
+        yaml_files, timeline = get_posts()
+        if req_post in yaml_files:
+            post = load_post_data([req_post])
+            return render_template('blog.html', post_array=post, date_dict=timeline)
+    return "Post not found", 404
 
-@app.route("/contact")
+@app.route("/contact", methods=['GET'])
 def contact():
     return render_template('contact.html')
\ No newline at end of file
diff --git a/static/contact.css b/static/contact.css
new file mode 100644
index 0000000..6539242
--- /dev/null
+++ b/static/contact.css
@@ -0,0 +1,30 @@
+/* Style for contact page */
+div.contact-container {
+    margin-top: 10px;
+    text-align: center;
+  }
+  ul.contact-links {
+    list-style-type: none;
+    line-height: 1.75;
+  }
+  .link-with-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: pre;
+  }
+  .link-with-logo img {
+    width: 24px; /* Adjust the width as needed */
+    height: 24px; /* Adjust the height as needed */
+    margin-right: 8px;
+  }
+  .link-with-logo span {
+    font-weight: bold;
+  }
+  .link-with-logo a {
+    text-decoration: none;
+    color: #333; /* Change the color as needed */
+  }
+  .link-with-logo a:hover {
+    color: #0251ef;
+  }
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index acf5fb5..1c3b14b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -48,14 +48,6 @@ a {
   transition: color 0.3s ease-in-out;
 }
 
-footer {
-  margin-top: 20px;
-  padding: 10px 0;
-  background-color: #333;
-  color: #fff;
-  text-align: center;
-}
-
 .blog-image {
   max-width:500px
 }
@@ -199,33 +191,55 @@ code {
   border-left: 5px solid #ffc000;
 }
 
-/* Style for contact page */
-div.contact-container {
-  margin-top: 10px;
-  text-align: center;
+.header {
+  background-color: #f5f5f5;
+  position: fixed; /* Set header position to fixed */
+  top: 0; /* Align it to the top of the page */
+  width: 100%; /* Set header width to full width */
+  z-index: 999; /* Ensure the header is above other content */
+  /* Your existing styles for header */
 }
-ul.contact-links {
-  list-style-type: none;
-  line-height: 1.75;
+
+.content {
+  padding-top: 80px; /* Adjust padding to accommodate the fixed header */
+  /* Your existing styles for content */
 }
-.link-with-logo {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  white-space: pre;
+
+/* Style for sidebar */
+.sidebar {
+  height: 100%;
+  width: 130px;
+  left: 0;
+  position: fixed;
+  background-color: #b9b6b6;
+  overflow-x: hidden;
+  padding-top: 12px;
 }
-.link-with-logo img {
-  width: 24px; /* Adjust the width as needed */
-  height: 24px; /* Adjust the height as needed */
-  margin-right: 8px;
+
+.sidebar-header {
+  font-size: 18px;
+  text-align: center;
 }
-.link-with-logo span {
+
+.sidebar-section {
   font-weight: bold;
+  color: #000000;
+  font-size: 18px;
+  padding: 8px;
 }
-.link-with-logo a {
+
+.sidebar a {
+  padding: 2px 16px;
   text-decoration: none;
-  color: #333; /* Change the color as needed */
+  display: block;
+  color: #3b3b3b;
 }
-.link-with-logo a:hover {
-  color: #0251ef;
+
+.sidebar a:hover {
+  color: #f1f1f1;
+}
+
+.posts {
+  margin-left: 130px; /* Same as the width of the sidebar */
+  padding: 0px 10px;
 }
\ No newline at end of file
diff --git a/templates/blog.html b/templates/blog.html
index 8508bc7..2c4b3ea 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -1,53 +1,78 @@
 {% extends 'layout.html' %}
 {% block content %}
-<div>
-    <table>
-    {% for post in post_array %}
-        <tr>
-            <td>
-                <article>
-                {% if post['title'] %}
-                    <h2>
-                        {{ post['title'] }} - {{ post['date'] }}
-                    </h2>
-                {% endif %}
-                {% for paragraph in post['body'] %}
-                    <div>
-                    {% if paragraph['section_title'] %}
-                        <h3>
-                            {{ paragraph['section_title'] }}
-                        </h3>
-                    {% endif %}
-                    {% if paragraph['text'] %}
-                        <p>
-                            {{ paragraph['text'] }}
-                        </p>
-                    {% endif %}
-                    {% if paragraph['code'] %}
-                        <div class="code-container">
-                            <div class="line-numbers line-numbers-background">
-                            {% for line in paragraph['code'].splitlines() %}
-                                <span>{{ loop.index }}</span>
+<div class="main-wrapper">
+    <div class="sidebar-container">
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                Blog Posts
+            </div>
+            <div class="sidebar-body">
+                <ol>
+                    {% for year in date_dict %}
+                        <li class="sidebar-section"> {{ year }} </li>
+                        {% for month in date_dict[year] %}
+                            {% for day in date_dict[year][month] %}
+                            <li>
+                                <a href="{{ date_dict[year][month][day] }}">
+                                    {{ month }}/{{ day }}
+                                </a>
+                            </li>
                             {% endfor %}
+                        {% endfor %}
+                    {% endfor %}
+                </ol>
+            </div>
+        </aside>
+    </div>
+    <div class="posts">
+        <table>
+        {% for post in post_array %}
+            <tr>
+                <td>
+                    <article>
+                    {% if post['title'] %}
+                        <h2>
+                            {{ post['title'] }} - {{ post['date'] }}
+                        </h2>
+                    {% endif %}
+                    {% for paragraph in post['body'] %}
+                        <div>
+                        {% if paragraph['section_title'] %}
+                            <h3>
+                                {{ paragraph['section_title'] }}
+                            </h3>
+                        {% endif %}
+                        {% if paragraph['text'] %}
+                            <p>
+                                {{ paragraph['text'] }}
+                            </p>
+                        {% endif %}
+                        {% if paragraph['code'] %}
+                            <div class="code-container">
+                                <div class="line-numbers line-numbers-background">
+                                {% for line in paragraph['code'].splitlines() %}
+                                    <span>{{ loop.index }}</span>
+                                {% endfor %}
+                                </div>
+                                <code>
+                                {% for line in paragraph['code'].splitlines() %}
+                                    <span class="line-highlight">
+                                        <pre class="code-text">{{line}}</pre>
+                                    </span>
+                                {% endfor %}
+                                </code>
                             </div>
-                            <code>
-                            {% for line in paragraph['code'].splitlines() %}
-                                <span class="line-highlight">
-                                    <pre class="code-text">{{line}}</pre>
-                                </span>
-                            {% endfor %}
-                            </code>
+                        {% endif %}
+                        {% if paragraph['image'] %}
+                            <img class="blog-image" src="{{ url_for('static', filename=paragraph['image']) }}" />
+                        {% endif %}
                         </div>
-                    {% endif %}
-                    {% if paragraph['image'] %}
-                        <img class="blog-image" src="{{ url_for('static', filename=paragraph['image']) }}" />
-                    {% endif %}
-                    </div>
-                {% endfor %}
-                </article>
-            </td>
-        </tr>
-    {% endfor %}
-    </table>
+                    {% endfor %}
+                    </article>
+                </td>
+            </tr>
+        {% endfor %}
+        </table>
+    </div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/layout.html b/templates/layout.html
index af21413..c06734c 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -3,6 +3,7 @@
     <head>
         <title>Patrick Evans</title>
         <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
+        <link rel="stylesheet" href="{{ url_for('static', filename='contact.css') }}" />
         <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
     </head>
     <body>