diff --git a/template/posts_partial.html b/template/posts_partial.html
new file mode 100644
index 0000000..45dfcb3
--- /dev/null
+++ b/template/posts_partial.html
@@ -0,0 +1,45 @@
+{% for post in posts %}
+<div class="card mb-3">
+    <div class="card-body">
+        <p class="card-text">{{ post.content|safe }}</p>
+        {% if post.image_url %}
+        <img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2 post-image" alt="Post image" data-bs-toggle="modal" data-bs-target="#imageModal{{ post.id }}">
+        {% endif %}
+        <div class="d-flex align-items-center mt-2">
+            {% if post.author %}
+                {% if post.author.profile_picture %}
+                    <img src="{{ url_for('static', filename='uploads/' + post.author.profile_picture) }}" class="rounded-circle me-2" alt="Profile Picture" style="width: 30px; height: 30px; object-fit: cover;">
+                {% else %}
+                    <div class="rounded-circle me-2 d-flex justify-content-center align-items-center bg-primary" style="width: 30px; height: 30px;">
+                        <span class="text-white" style="font-size: 0.8rem;">{{ post.author.username[0].upper() }}</span>
+                    </div>
+                {% endif %}
+                <small class="text-muted">
+                    <a href="{{ url_for('profile', username=post.author.username) }}" class="text-decoration-none">{{ post.author.username }}</a>
+                </small>
+            {% else %}
+                <small class="text-muted">{{ post.anonymous_username }}</small>
+            {% endif %}
+        </div>
+        <p class="card-text"><small class="text-muted">{{ post.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</small></p>
+        <button class="btn btn-primary btn-sm like-btn" data-post-id="{{ post.id }}">
+            <i class="bi bi-heart-fill"></i> Like (<span class="like-count">{{ post.likes|length }}</span>)
+        </button>
+        <button class="btn btn-secondary btn-sm comment-btn" data-post-id="{{ post.id }}">
+            <i class="bi bi-chat-fill"></i> Comment ({{ post.comments|length }})
+        </button>
+        <a href="{{ url_for('post_detail', post_id=post.id) }}" class="btn btn-info btn-sm" target="_blank">
+            <i class="bi bi-box-arrow-up-right"></i> Open in new tab
+        </a>
+        <button class="btn btn-info btn-sm copy-link-btn" data-post-url="{{ url_for('post_detail', post_id=post.id, _external=True, _scheme='https') }}">
+            <i class="bi bi-link-45deg"></i> Copy Link
+        </button>
+        {% if (current_user.is_authenticated and post.author and current_user.id == post.author.id) or (not current_user.is_authenticated and post.user_id == session['user_id']) %}
+        <a href="{{ url_for('edit_post', post_id=post.id) }}" class="btn btn-warning btn-sm">
+            <i class="bi bi-pencil-fill"></i> Edit
+        </a>
+        {% endif %}
+    </div>
+    <!-- ... (comment section remains the same) ... -->
+</div>
+{% endfor %}
\ No newline at end of file
diff --git a/template/profile.html b/template/profile.html
new file mode 100644
index 0000000..eeb0958
--- /dev/null
+++ b/template/profile.html
@@ -0,0 +1,245 @@
+{% extends "base.html" %}
+
+{% block title %}{{ user.username }}'s Profile{% endblock %}
+
+{% block content %}
+<div class="container mt-4">
+    <div class="row">
+        <div class="col-md-4">
+            <div class="card">
+                <div class="card-body">
+                    <h1 class="card-title">{{ user.username }}'s Profile</h1>
+                    {% if user.profile_picture %}
+                        <img src="{{ url_for('static', filename='uploads/' + user.profile_picture) }}" class="img-fluid rounded-circle mb-3" alt="Profile Picture" style="background-color: transparent;">
+                    {% else %}
+                        <div class="profile-initial rounded-circle mb-3 d-flex justify-content-center align-items-center bg-primary" style="width: 100px; height: 100px;">
+                            <span class="text-white" style="font-size: 3rem;">{{ user.username[0].upper() }}</span>
+                        </div>
+                    {% endif %}
+                    <p class="card-text"><strong>Bio:</strong></p>
+                    <div class="card-text bio-text">{{ user.rendered_bio|safe or "No bio available." }}</div>
+                    <h5 class="card-title">Stats</h5>
+                    <p class="card-text">Posts: {{ post_count }}</p>
+                    <p class="card-text">Total Likes: {{ like_count }}</p>
+                    <p class="card-text">Total Comments: {{ comment_count }}</p>
+                    {% if current_user.is_authenticated and current_user.id == user.id %}
+                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editProfileModal">Edit Profile</button>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+        <div class="col-md-8">
+            <h2>Posts</h2>
+            {% for post in posts %}
+            <div class="card mb-3">
+                <div class="card-body">
+                    <p class="card-text">{{ post.content|safe }}</p>
+                    {% if post.image_url %}
+                    <img src="{{ url_for('static', filename='uploads/' + post.image_url) }}" class="img-fluid mb-2" alt="Post image">
+                    {% endif %}
+                    <div class="d-flex align-items-center mt-2">
+                        {% if post.author.profile_picture %}
+                            <img src="{{ url_for('static', filename='uploads/' + post.author.profile_picture) }}" class="rounded-circle me-2" alt="Profile Picture" style="width: 30px; height: 30px; object-fit: cover;">
+                        {% else %}
+                            <div class="rounded-circle me-2 d-flex justify-content-center align-items-center bg-primary" style="width: 30px; height: 30px;">
+                                <span class="text-white" style="font-size: 0.8rem;">{{ post.author.username[0].upper() }}</span>
+                            </div>
+                        {% endif %}
+                        <small class="text-muted">
+                            <a href="{{ url_for('profile', username=post.author.username) }}" class="text-decoration-none">{{ post.author.username }}</a>
+                        </small>
+                    </div>
+                    <p class="card-text"><small class="text-muted">{{ post.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</small></p>
+                    <button class="btn btn-primary btn-sm like-btn" data-post-id="{{ post.id }}">
+                        <i class="bi bi-heart-fill"></i> Like (<span class="like-count">{{ post.likes|length }}</span>)
+                    </button>
+                    <button class="btn btn-secondary btn-sm comment-btn" data-post-id="{{ post.id }}">
+                        <i class="bi bi-chat-fill"></i> Comment ({{ post.comments|length }})
+                    </button>
+                    {% if current_user.is_authenticated and current_user.id == post.author.id %}
+                    <a href="{{ url_for('edit_post', post_id=post.id) }}" class="btn btn-warning btn-sm">
+                        <i class="bi bi-pencil-fill"></i> Edit
+                    </a>
+                    {% endif %}
+                </div>
+                <div class="card-footer comment-section" id="comment-section-{{ post.id }}" style="display: none;">
+                    <h6>Comments:</h6>
+                    <ul class="list-unstyled">
+                        {% for comment in post.comments if not comment.parent %}
+                            {% with depth=1 %}
+                                {% include 'comment.html' %}
+                            {% endwith %}
+                        {% endfor %}
+                    </ul>
+                    <form class="comment-form" data-post-id="{{ post.id }}">
+                        <div class="input-group mb-3">
+                            <input type="text" class="form-control" placeholder="Add a comment" name="content" required>
+                            <button class="btn btn-outline-secondary" type="submit">Send</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+
+<!-- Edit Profile Modal -->
+{% if current_user.is_authenticated and current_user.id == user.id %}
+<div class="modal fade" id="editProfileModal" tabindex="-1" aria-labelledby="editProfileModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="editProfileModalLabel">Edit Profile</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form method="POST" enctype="multipart/form-data" id="profileForm">
+                    <div class="mb-3">
+                        <label for="bio" class="form-label">Bio</label>
+                        <textarea class="form-control" id="bio" name="bio" rows="5">{{ user.bio }}</textarea>
+                        <small class="form-text text-muted">Markdown and HTML color styling are supported.</small>
+                    </div>
+                    <div class="mb-3">
+                        <label for="profile_picture" class="form-label">Profile Picture</label>
+                        <input type="file" class="form-control" id="profile_picture" name="profile_picture" accept="image/*">
+                    </div>
+                    <div id="cropperContainer" style="display: none;">
+                        <img id="cropperImage" src="" alt="Image to crop" style="max-width: 100%;">
+                    </div>
+                    {% if user.profile_picture %}
+                    <div class="mb-3 form-check">
+                        <input type="checkbox" class="form-check-input" id="remove_picture" name="remove_picture">
+                        <label class="form-check-label" for="remove_picture">Remove current profile picture</label>
+                    </div>
+                    {% endif %}
+                    <input type="hidden" name="cropped_data" id="croppedData">
+                    <button type="submit" class="btn btn-primary">Save Changes</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+{% endif %}
+{% endblock %}
+
+{% block scripts %}
+{{ super() }}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
+<script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
+<script>
+$(document).ready(function() {
+    let cropper;
+
+    $('#profile_picture').change(function(e) {
+        const file = e.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = function(event) {
+                $('#cropperImage').attr('src', event.target.result);
+                $('#cropperContainer').show();
+                if (cropper) {
+                    cropper.destroy();
+                }
+                cropper = new Cropper($('#cropperImage')[0], {
+                    aspectRatio: 1,
+                    viewMode: 1,
+                    minCropBoxWidth: 200,
+                    minCropBoxHeight: 200,
+                });
+            }
+            reader.readAsDataURL(file);
+        }
+    });
+
+    $('#profileForm').submit(function(e) {
+        e.preventDefault();
+        if (cropper) {
+            const croppedCanvas = cropper.getCroppedCanvas({
+                width: 200,
+                height: 200
+            });
+            $('#croppedData').val(croppedCanvas.toDataURL());
+        }
+        this.submit();
+    });
+
+    var easyMDE = new EasyMDE({
+        element: document.getElementById('bio'),
+        spellChecker: false,
+        autofocus: true,
+        lineWrapping: true,
+        toolbar: [
+            "bold", "italic", "heading", "quote", "unordered-list", "ordered-list",
+            "link", "code", "table", "undo", "redo",
+            {
+                name: "custom-color",
+                action: function(editor){
+                    var cm = editor.codemirror;
+                    var output = '';
+                    var selectedText = cm.getSelection();
+                    var color = prompt("Enter color (e.g., red, #ff0000, rgb(255,0,0)):");
+                    if (color) {
+                        output = '<span style="color: ' + color + ';">' + selectedText + '</span>';
+                        cm.replaceSelection(output);
+                    }
+                },
+                className: "fa fa-paint-brush",
+                title: "Custom Color",
+            }
+        ],
+        status: false,
+        theme: "dark"
+    });
+
+    // Adjust line height in the editor
+    easyMDE.codemirror.getWrapperElement().style.lineHeight = "1.3";
+});
+</script>
+{% endblock %}
+
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
+<style>
+    .bio-text {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        max-height: 200px;
+        overflow-y: auto;
+        line-height: 1.3; /* Reduce line spacing */
+    }
+    .bio-text a {
+        color: #007bff;
+        text-decoration: underline;
+    }
+    .bio-text a:hover {
+        color: #0056b3;
+    }
+    .EasyMDEContainer {
+        background-color: #333;
+    }
+    .EasyMDEContainer .CodeMirror {
+        color: #fff;
+        background-color: #333;
+    }
+    .editor-toolbar {
+        background-color: #444;
+        border-color: #555;
+    }
+    .editor-toolbar button {
+        color: #fff !important;
+    }
+    .editor-toolbar button:hover,
+    .editor-toolbar button.active {
+        background-color: #555;
+    }
+    .CodeMirror-cursor {
+        border-left: 1px solid #fff;
+    }
+    .CodeMirror-line {
+        padding: 0 !important; /* Remove extra padding */
+    }
+</style>
+{% endblock %}
\ No newline at end of file
diff --git a/template/register.html b/template/register.html
new file mode 100644
index 0000000..4e525e0
--- /dev/null
+++ b/template/register.html
@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+
+{% block title %}Register{% endblock %}
+
+{% block content %}
+<h2 class="mb-4">Register</h2>
+<form method="POST">
+    <div class="mb-3">
+        <label for="username" class="form-label">Username</label>
+        <input type="text" class="form-control" id="username" name="username" required>
+    </div>
+    <div class="mb-3">
+        <label for="password" class="form-label">Password</label>
+        <input type="password" class="form-control" id="password" name="password" required>
+    </div>
+    <button type="submit" class="btn btn-primary">Register</button>
+</form>
+{% endblock %}
\ No newline at end of file