diff --git a/sidebar b/sidebar
new file mode 100644
index 0000000..7654d07
--- /dev/null
+++ b/sidebar
@@ -0,0 +1,112 @@
+{% load static %}
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+body {
+  font-family: "Lato", sans-serif;
+}
+
+
+a:link {
+  color: none;
+  background-color: transparent;
+  text-decoration: none;
+}
+a:visited {
+  color: black;
+  background-color: transparent;
+  text-decoration: none;
+}
+a:hover {
+  color: black;
+  background-color: transparent;
+  text-decoration: none;
+}
+a:active {
+  color: black;
+  background-color: transparent;
+  text-decoration: none;
+}
+.sidenav {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #111;
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 60px;
+}
+
+.sidenav a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  transition: 0.3s;
+}
+
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+.sidenav .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+</style>
+</head>
+<body>
+
+<div id="mySidenav" class="sidenav">
+  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+  <a href="#">Skills Card</a>
+  <a href="https://www.hult.edu/en/alumni/">Alumni</a>
+  <a href="#">Top Skills</a>
+  <a href="https://www.linkedin.com/">Linked In</a>
+</div>
+
+<h1>
+  <span style="word-spacing: 5px; font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span> 
+  <a class="nav-item nav-link" href="{% url 'blog-home' %}">My Courses</a >
+  <a class="nav-item nav-link" href="{% url 'blog-about' %}" style="word-spacing: 30px"> About </a >
+</h1> 
+
+       
+          
+         
+            
+              
+              
+            
+            
+            
+         
+        
+
+
+<script>
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+}
+
+function closeNav() {
+  document.getElementById("mySidenav").style.width = "0";
+}
+</script>
+   
+</body>
+</html> 
