diff --git a/2/index.html b/2/index.html
deleted file mode 100644
index 9337e61..0000000
--- a/2/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <title>My site</title>
-</head>
-
-<body>
-    <h1><a href="/inkvent/index.html">My site</a></h1>
-    
-<h2>Hey!</h2>
-<p>THIS WORKED?!</p>
-2012-03-04
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/app.py b/app.py
index bd89fb7..0c0b11b 100644
--- a/app.py
+++ b/app.py
@@ -26,6 +26,12 @@ def page(path):
     return render_template("page.html", page=page)
 
 
+@app.route("/about.html")
+def about():
+    return render_template("about.html")
+
+
 if __name__ == "__main__":
     freezer.freeze()
+    print(page)
     app.run(port=8000)
diff --git a/hello-world/index.html b/hello-world/index.html
deleted file mode 100644
index ca433b3..0000000
--- a/hello-world/index.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <title>My site</title>
-</head>
-
-<body>
-    <h1><a href="/inkvent/index.html">My site</a></h1>
-    
-<h2>Hello World</h2>
-<p><strong>Hello World</strong>, from a <em>page</em>!</p>
-<h1>Isn't it amazing?</h1>
-2012-03-04
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/index.html b/index.html
deleted file mode 100644
index 9dcd5f1..0000000
--- a/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <title>My site</title>
-</head>
-
-<body>
-    <h1><a href="/inkvent/index.html">My site</a></h1>
-    
-<h2>List of stuff</h2>
-<ul>
-    
-    <li>
-        <a href="/inkvent/2/index.html">Hey!</a>
-    </li>
-    
-    <li>
-        <a href="/inkvent/hello-world/index.html">Hello World</a>
-    </li>
-    
-</ul>
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/page_template.md b/page_template.md
new file mode 100644
index 0000000..6da45d1
--- /dev/null
+++ b/page_template.md
@@ -0,0 +1,8 @@
+id:
+title: 
+subtitle: 
+date: 
+body: 
+author: 
+img_url: 
+song_url:
\ No newline at end of file
diff --git a/pages/1.md b/pages/1.md
new file mode 100644
index 0000000..46f2815
--- /dev/null
+++ b/pages/1.md
@@ -0,0 +1,8 @@
+id: 1
+title: Why does Saturn have rings? 
+subtitle: Just because.
+date: December 4, 2023
+author: Arihant
+img_url: https://images.unsplash.com/photo-1701542182020-6355e2c059a1?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
+song_url: https://open.spotify.com/embed/track/3ntrdR24dLkKrzSGRv1FlH?utm_source=generator
+body: Have you ever wondered why Saturn has rings? Well, you're not alone. Scientists have been puzzled by this question for centuries, and they still don't have a definitive answer. But they have some pretty good guesses, and some of them are hilarious. 
diff --git a/pages/2.md b/pages/2.md
index d482ca4..e0bd614 100644
--- a/pages/2.md
+++ b/pages/2.md
@@ -1,4 +1,8 @@
-title: Hey!
-date: 2012-03-04
-
-THIS WORKED?!
\ No newline at end of file
+id: 2
+title: On Indie Music
+subtitle: Indie music is nice!
+date: December 5, 2023
+author: ira
+img_url: https://images.unsplash.com/photo-1701456449854-c4933aade45b?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
+song_url: https://open.spotify.com/embed/track/5UVBumEwdUnzvqxrXOYLFA?utm_source=generator
+body: Indie music is a genre of music that is independent from the mainstream music industry. It is often creative, original and diverse, reflecting the personal vision of the artists. Indie music can be a source of inspiration, enjoyment and discovery for listeners who appreciate its uniqueness and authenticity.
diff --git a/pages/hello-world.md b/pages/hello-world.md
deleted file mode 100644
index 3350dc3..0000000
--- a/pages/hello-world.md
+++ /dev/null
@@ -1,6 +0,0 @@
-title: Hello World
-date: 2012-03-04
-
-**Hello World**, from a *page*!
-
-<h1>Isn't it amazing?</h1>
\ No newline at end of file
diff --git a/static/styles/about.css b/static/styles/about.css
new file mode 100644
index 0000000..426b2ef
--- /dev/null
+++ b/static/styles/about.css
@@ -0,0 +1,103 @@
+body {
+    background-color: #000000;
+    color: #fff;
+    font-family: 'CMU Serif';
+}
+
+.navbar {
+    display: flex;
+    width: 100%;
+    background-color: #000000;
+    align-items: center;
+    height: 20px;
+    padding-top: 10px;
+}
+
+
+.nav-center {
+    width: 100%;
+    text-align: center;
+    margin-left: 26%;
+    font-size: 30px;
+}
+
+.nav-center a {
+    color: #fff;
+}
+
+.navbar a:hover {
+    color: orange;
+}
+
+.nav-right {
+    text-align: right;
+    margin-right: 3.5%;
+    width: 50%;
+    padding-top: 1%;
+}
+
+a {
+    color: #fff;
+    text-decoration: none;
+}
+
+.about {
+    margin-top: 45px;
+    margin-right: 20%;
+    margin-left: 20%;
+    font-size: 1.2em;
+    text-align: justify;
+}
+
+img {
+    width: 40%;
+    height: 40%;
+    border-radius: 50em;
+}
+
+.metadata-container {
+    display: flex;
+}
+
+.metadata-container p#ira {
+    margin-right: 40px;
+}
+
+.metadata-container p#arihant {
+    margin-left: 40px;
+}
+
+/* Small devices (portrait tablets and large phones, 800px and below) */
+@media only screen and (max-width: 800px) {
+    .about {
+        margin-top: 45px;
+        margin-right: 10%;
+        margin-left: 10%;
+        font-size: 1.2em;
+        text-align: justify;
+    }
+
+    img {
+        width: 50%;
+        height: 50%;
+        border-radius: 50em;
+    }
+
+    .metadata-container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .metadata-container p#ira {
+        margin-right: 0;
+        margin-bottom: 20px;
+        order: 1;
+    }
+
+    .metadata-container p#arihant {
+        margin-left: 0;
+        margin-top: 20px;
+        order: 2;
+    }
+
+}
\ No newline at end of file
diff --git a/static/styles/index.css b/static/styles/index.css
new file mode 100644
index 0000000..97200e1
--- /dev/null
+++ b/static/styles/index.css
@@ -0,0 +1,79 @@
+body {
+    background-color: #000000;
+    color: #fff;
+    font-family: 'CMU Serif';
+}
+
+.navbar {
+    display: flex;
+    width: 100%;
+    background-color: #000000;
+    align-items: center;
+    height: 20px;
+    padding-top: 10px;
+}
+
+.nav-center {
+    width: 100%;
+    text-align: center;
+    margin-left: 26%;
+    font-size: 30px;
+}
+
+.nav-center a {
+    color: #fff;
+}
+
+.navbar a:hover {
+    color: orange;
+}
+
+.nav-right {
+    text-align: right;
+    margin-right: 3.5%;
+    width: 50%;
+    padding-top: 1%;
+}
+
+.articles {
+    margin-top: 45px;
+    margin-right: 7%;
+    margin-left: 7%;
+}
+
+.article-preview {
+    padding: 0 1.5%;
+    margin-bottom: 2%;
+    border: 1px solid #fff;
+    border-radius: 1em;
+    transition: transform 0.3s ease-in-out;
+}
+
+.article-preview:hover {
+    /* Enlarge on hover */
+    transform: scale(1.02);
+}
+
+a {
+    color: #fff;
+    text-decoration: none;
+}
+
+h2 {
+    font-size: 1.6em;
+    margin-bottom: 0.2em;
+    color: orange;
+}
+
+.article-subtitle {
+    font-size: 1.1em;
+    margin-bottom: 0.5em;
+
+}
+
+.metadata-container {
+    display: flex;
+    justify-content: space-between;
+    /* Align items to the baseline for proper vertical alignment */
+    align-items: baseline;
+}
\ No newline at end of file
diff --git a/static/styles/page.css b/static/styles/page.css
new file mode 100644
index 0000000..1bb8c00
--- /dev/null
+++ b/static/styles/page.css
@@ -0,0 +1,112 @@
+body {
+    background-color: #000000;
+    color: #fff;
+    font-family: 'CMU Serif';
+}
+
+.navbar {
+    display: flex;
+    position: fixed;
+    width: 100%;
+    top: 0;
+    background-color: #000000;
+    align-items: center;
+    height: 20px;
+    padding: 10px 0;
+}
+
+.nav-center {
+    width: 100%;
+    text-align: center;
+    margin-left: 26%;
+    font-size: 30px;
+}
+
+.nav-center a {
+    color: #fff;
+}
+
+.navbar a:hover {
+    color: orange;
+}
+
+.nav-right {
+    text-align: right;
+    margin-right: 3.5%;
+    width: 50%;
+    padding-top: 1%;
+}
+
+.article-body {
+    margin-top: 45px;
+    margin-right: 20%;
+    margin-left: 20%;
+}
+
+a {
+    color: #fff;
+    text-decoration: none;
+}
+
+h1 {
+    font-size: 2em;
+    margin-bottom: 0.2em;
+    color: orange;
+
+}
+
+h2 {
+    font-size: 1.6em;
+    margin-bottom: 0.2em;
+}
+
+.author {
+    font-size: 1.2em;
+}
+
+#spotify {
+    width: 60%;
+    height: 115px;
+    border: 1px solid #000000;
+    border-radius: 12px;
+}
+
+.metadata-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.metadata-left {
+    flex-grow: 1;
+    /* Take up remaining space */
+}
+
+/* Small devices (portrait tablets and large phones, 800px and below) */
+@media only screen and (max-width: 800px) {
+    .article-body {
+        margin-top: 45px;
+        margin-right: 4%;
+        margin-left: 4%;
+        font-size: 1.2em;
+        text-align: justify;
+    }
+
+    .metadata-container {
+        flex-direction: column;
+    }
+
+    .metadata-left {
+        align-items: flex-start;
+        order: 1;
+        margin-right: 0;
+        margin-bottom: 20px;
+    }
+
+    #spotify {
+        order: 2;
+        width: 100%;
+        height: 115px;
+        border: 1px solid #000000;
+        border-radius: 12px;
+    }
+}
\ No newline at end of file
diff --git a/templates/about.html b/templates/about.html
new file mode 100644
index 0000000..14b0574
--- /dev/null
+++ b/templates/about.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>inkvent.</title>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/about.css') }}">
+</head>
+
+<body>
+    <nav class="navbar">
+        <div class="nav-center"><a href="{{url_for('index', all_articles=articles)}}">inkvent.</a></div>
+        <div class="nav-right"><a href="{{url_for('about')}}">about us</a></div>
+    </nav>
+
+    <div class="about">
+        <div class="about-container">
+            <h1>about us</h1>
+
+            <p>
+                Welcome to inkvent, the blog where we explore everything from the mundane to the marvelous.
+                We are Arihant and Ira, two writers who love to play with words and create stories that will
+                make you laugh, cry, and think. Whether it's about the latest trends, the mysteries of the
+                universe, or the secrets of our own minds, we are always curious and eager to share our
+                insights with you. Join us on our inkventures and discover the wonders of reading and writing!
+            </p>
+
+            <div>
+                <h2>ira</h2>
+                <div class="metadata-container">
+                    <p id="ira">
+                        ira is a writer, poet, and artist who has a knack for finding humor and beauty in everything.
+                        She is passionate about literature and its ability to inspire people and change the world. She
+                        is also a huge fan of art and enjoys painting and sketching. Whether she is writing about her
+                        hilarious adventures, sharing her insightful poems, or showcasing her stunning artworks, ira
+                        always delivers a dose of joy and creativity to her readers.
+                    </p>
+                    <img src="https://fadcdn.s3.ap-south-1.amazonaws.com/media/profilepic/263958/1626411048_fookin%20avocados.png"
+                        alt="Picture of Ira">
+                </div>
+            </div>
+
+            <div>
+                <h2>Arihant</h2>
+                <div class="metadata-container">
+                    <img src="https://i1.sndcdn.com/avatars-F7Yqf8uQokJsplpA-NWwpJQ-t500x500.jpg"
+                        alt="Picture of Arihant">
+                    <p id="arihant">
+                        Arihant is a writer, and musician. He is passionate about technology and its applications in
+                        everyday life. He is also a huge fan of music and enjoys playing the piano. He likes to share
+                        his insights and opinions on various topics through his blog and social media. He is always
+                        curious to learn new things and explore new possibilities. He is friendly, creative, and
+                        open-minded.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
deleted file mode 100644
index b210809..0000000
--- a/templates/base.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-    <meta charset="utf-8">
-    <title>My site</title>
-</head>
-
-<body>
-    <h1><a href="{{ url_for("index") }}">My site</a></h1>
-    {% block content %}
-    <p>Default content to be displayed</p>
-    {% endblock content %}
-</body>
-
-</html>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 9401cda..c38d057 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,14 +1,36 @@
-{% extends "base.html" %}
-
-{% block content %}
-<h2>List of stuff</h2>
-<ul>
-    {% for page in pages %}
-    <li>
-        <a href="{{ url_for("page", path=page.path) }}">{{ page.title }}</a>
-    </li>
-    {% else %}
-    <li>No stuff.</li>
-    {% endfor %}
-</ul>
-{% endblock content %}
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/index.css') }}">
+    <title>inkvent.</title>
+</head>
+
+<body>
+    <nav class="navbar">
+        <div class="nav-center"><a href="{{url_for('index')}}">inkvent.</a></div>
+        <div class="nav-right"><a href="{{url_for('about')}}">about us</a></div>
+    </nav>
+
+    <!-- List all articles -->
+    <div class="articles">
+        {% for page in pages %}
+        <div class="article-preview" style="background-image: url('{{page.meta.img_url}}')">
+            <a href="{{ url_for('page', path=page.path) }}">
+                <h2 class="article-title"> {{page.meta.title}} </h2>
+                <p class="article-subtitle"> {{page.meta.subtitle}} </p>
+                <div class="metadata-container">
+                    <p class="date"> {{page.meta.date}} </p>
+                    <p class="author"> {{page.meta.author}}</p>
+                </div>
+            </a>
+        </div>
+        {% endfor %}
+    </div>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/templates/page.html b/templates/page.html
index 85c3a2a..7a24257 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -1,7 +1,38 @@
-{% extends "base.html" %}
+<!DOCTYPE html>
+<html lang="en">
 
-{% block content %}
-<h2>{{ page.title }}</h2>
-{{ page.html|safe }}
-{{ page.date }}
-{% endblock content %}
\ No newline at end of file
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>inkvent.</title>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/page.css') }}">
+</head>
+
+<body>
+    <nav class="navbar">
+        <div class="nav-center"><a href="{{url_for('index')}}">inkvent.</a></div>
+        <div class="nav-right"><a href="{{url_for('about')}}">about us</a></div>
+    </nav>
+
+    <div class="article-body">
+        <h1>{{page.meta.title}} </h1>
+        <h2>{{page.meta.subtitle}} </h2>
+
+        <div class="metadata-container">
+            <div class="metadata-left">
+                <p class="author"> {{page.meta.author}}</p>
+                <p class="date"> {{page.meta.date}} </p>
+            </div>
+
+            <!-- Spotify integration -->
+            <iframe src="{{page.meta.song_url}}" frameBorder="0" allowfullscreen=""
+                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"
+                id="spotify">
+            </iframe>
+        </div>
+
+        <p>{{page.meta.body}}</p>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
