diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 424b18f..017f293 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,5 +1,12 @@
 {
     "recommendations": [
-        "charliermarsh.ruff"
+        "charliermarsh.ruff",
+        "akamud.vscode-theme-onedark",
+        "oven.bun-vscode",
+        "mhutchie.git-graph",
+        "github.vscode-pull-request-github",
+        "ms-python.python",
+        "robbowen.synthwave-vscode",
+        "bradlc.vscode-tailwindcss"
     ]
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index 5176889..5638f12 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
   "scripts": {
     "tailwindcss:build": "tailwindcss build -i src/brazil_blog/static/css/brazil_blog.css -o src/brazil_blog/static/css/brazil_blog_compiled.css",
     "tailwindcss:watch": "tailwindcss build -i src/brazil_blog/static/css/brazil_blog.css -o src/brazil_blog/static/css/brazil_blog_compiled.css --watch",
-    "tailwindcss:dev": "bun run tailwindcss:build && bun run tailwindcss:watch"
+    "tailwindcss:dev": "bun run tailwindcss:watch"
   },
   "type": "module",
   "dependencies": { "cypress": "^13.10.0" }
diff --git a/src/blog/models.py b/src/blog/models.py
index cfc8f13..09348e8 100644
--- a/src/blog/models.py
+++ b/src/blog/models.py
@@ -23,18 +23,18 @@ def get_context(self, request):
         context = super().get_context(request)
         now = timezone.now()
         blogpages = (
-            self.get_children()
-                .live()
-                .filter(blogpage__date__lte=now)
-                .order_by('-blogpage__date')
-                .specific()
+            BlogPage.objects
+            .child_of(self)
+            .live()
+            .filter(date__lte=now)
+            .order_by('-date')
         )
         context['blogpages'] = blogpages
     
         # Author filter
         author_username = request.GET.get('author')
         if author_username:
-            blogpages = blogpages.filter(Q(blogpage__author__username=author_username))
+            blogpages = blogpages.filter(Q(author__username=author_username))
 
         # Date filter
         date_from = request.GET.get('date_from')
@@ -43,17 +43,23 @@ def get_context(self, request):
         if date_from:
             date_from = parse_date(date_from)
             if date_from:
-                blogpages = blogpages.filter(blogpage__date__gte=date_from)
+                blogpages = blogpages.filter(date__gte=date_from)
 
         if date_to:
             date_to = parse_date(date_to)
             if date_to:
-                blogpages = blogpages.filter(blogpage__date__lte=date_to)
+                blogpages = blogpages.filter(date__lte=date_to)
+
+        query = request.GET.get('query')
+        if query:
+            blogpages = blogpages.search(query, fields=['title', 'body'])
 
         context['blogpages'] = blogpages
         context['authors'] = User.objects.filter(blog_posts__isnull=False).distinct()
         context['page'] = self  # Add this line for the reset button
 
+        context['active_filters'] = any([author_username, query, date_from, date_to])
+
         return context
 
     content_panels = Page.content_panels + [
@@ -86,8 +92,11 @@ class BlogPage(Page):
     body = RichTextField(blank=True)
 
     search_fields = Page.search_fields + [
+        index.SearchField('title'),
         index.SearchField('intro'),
         index.SearchField('body'),
+        index.FilterField('username'),
+        index.FilterField('date'),
     ]
 
     content_panels = Page.content_panels + [
diff --git a/src/blog/templates/blog/includes/filter-bar.html b/src/blog/templates/blog/includes/filter-bar.html
index 8d07049..742bc19 100644
--- a/src/blog/templates/blog/includes/filter-bar.html
+++ b/src/blog/templates/blog/includes/filter-bar.html
@@ -1,41 +1,134 @@
 {% load wagtailcore_tags wagtailimages_tags user_tags %}
 
-<div class="max-w-3xl md:max-w-5xl mx-auto p-4 mb-4 drop-shadow-lg">
-
-    <form method="get" action="" class=" bg-blue-800 p-4 rounded-lg">
-        <h3 class="text-lg font-semibold mb-4 text-white">Filter by Author</h3>
-        <div class="flex flex-wrap gap-2 mb-4">
-            {% for author in authors %}
-            <button type="submit" name="author" value="{{ author.username }}" title="{% user_display_name author %}" class="flex bg-white justify-center items-center border-4 aspect-square rounded-full {% if request.GET.author == author.username %} border-yellow-500 {% else %} border-transparent {% endif %}">
-                {% if author.wagtail_userprofile.avatar %}
-                    {% user_avatar author 'aspect-square w-8 h-8 rounded-full object-cover' %}
-                {% else %}
-                <svg class="w-8 h-8 rounded-full object-cover" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13a3 3 0 100-6 3 3 0 000 6z"></path>
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2"></path>
-                </svg>
-                {% endif %}
-                <span class="sr-only">{{ author.get_full_name|default:author.username }}</span>
-            </button>
-            {% endfor %}
-        </div>
-
-        <h3 class="text-lg font-semibold mb-4 text-white">Filter by Date</h3>
-        <div class="flex flex-wrap gap-4 mb-4">
+<div class="max-w-3xl md:max-w-5xl mx-auto drop-shadow-lg">
+
+    <div class="transition p-4 rounded-lg relative min-h-16">
+    
+        <form id="filterForm" method="get" action="" class="flex flex-col flex-wrap sm:flex-row gap-2 md:items-end">
             <div>
-                <label for="date_from" class="block text-sm font-medium text-white mb-1">From:</label>
-                <input type="date" id="date_from" name="date_from" value="{{ request.GET.date_from }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                <h3 class="sr-only">Filter by Author</h3>
+                <label for="author" class="block text-sm font-medium text-white mb-1">Author:</label>
+                <div class="flex flex-wrap gap-2">
+                    {% for author in authors %}
+                    <button type="button" name="author" value="{{ author.username }}" title="{% user_display_name author %}" class="flex bg-white justify-center items-center border-4 aspect-square rounded-full shadow-sm {% if request.GET.author == author.username %} border-yellow-500 {% else %} border-transparent {% endif %}">
+                        {% if author.wagtail_userprofile.avatar %}
+                            {% user_avatar author 'aspect-square w-8 h-8 rounded-full object-cover' %}
+                        {% else %}
+                        <svg class="w-8 h-8 rounded-full object-cover" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13a3 3 0 100-6 3 3 0 000 6z"></path>
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2"></path>
+                        </svg>
+                        {% endif %}
+                        <span class="sr-only">{{ author.get_full_name|default:author.username }}</span>
+                    </button>
+                    {% endfor %}
+                </div>
             </div>
+        
             <div>
-                <label for="date_to" class="block text-sm font-medium text-white mb-1">To:</label>
-                <input type="date" id="date_to" name="date_to" value="{{ request.GET.date_to }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                <h3 class="sr-only">Filter by Date</h3>
+                <div class="flex flex-wrap gap-2">
+                    <div>
+                        <label for="date_from" class="block text-sm font-medium text-white mb-1">From:</label>
+                        <input type="date" id="date_from" name="date_from" value="{{ request.GET.date_from }}" class="mt-1 block w-full h-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                    </div>
+                    <div>
+                        <label for="date_to" class="block text-sm font-medium text-white mb-1">To:</label>
+                        <input type="date" id="date_to" name="date_to" value="{{ request.GET.date_to }}" class="mt-1 block w-full h-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+                    </div>
+                </div>
+            </div>
+
+            <div class="max-w-xs">
+                <h3 class="sr-only">Search term</h3>
+                <label for="query" class="block text-sm font-medium text-white mb-1">Search:</label>
+                <input type="query" id="query" name="query" placecholder="Search query" value="{{ request.GET.query }}" class="mt-1 block w-full h-10 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
+            </div>
+
+            <div class="flex justify-end self-end ml-auto items-center gap-4 md:gap-2 mt-4 md:mt-0 w-full md:w-auto">
+                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded transition opacity-50 cursor-not-allowed" id="submitButton" disabled="false">
+                    Search
+                    <span>&rarr;</span>
+                </button>
+                <a href="{% pageurl page %}" class="bg-slate-300 text-gray-700 px-4 py-2 rounded transition {% if not active_filters %} opacity-50 cursor-not-allowed {% else %} hover:bg-slate-200 {% endif %}" id="resetButton">
+                    Reset
+                    <span>&times;</span>
+                </a>
             </div>
-        </div>
+        </form>
+        {% if context.active_filters %}
+        <span>Active filters exist</span>
+        {% endif %}
+    </div>
+</div>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        
+        const form = document.getElementById('filterForm');
+        const submitButton = document.getElementById('submitButton');
+        const resetButton = document.getElementById('resetButton');
+
+        function enableSubmitButton() {
+            submitButton.disabled = false;
+            submitButton.classList.remove('cursor-not-allowed', 'opacity-50');
+            submitButton.classList.add('hover:bg-blue-600');
+        }
+
+        // if the form values change, enable the submit button
+        document.querySelectorAll('input').forEach(input => {
+            
+            if (input.type === 'text') {
+                input.addEventListener('input', enableSubmitButton);
+            }
+
+            input.addEventListener('change', enableSubmitButton);
+        });
+
+        const authorButtons = document.querySelectorAll('button[name="author"]');
+
+        authorButtons.forEach(button => {
+            button.addEventListener('click', function(event) {
+                event.preventDefault();
+                
+                // check if active by getting author url param
+                const isActive = new URLSearchParams(window.location.search).get('author') === button.value;
+
+                // if active, remove the author param
+                if (isActive) {
+                    const url = new URL(window.location.href);
+                    url.searchParams.delete('author');
+                    window.location.href = url;
+                } else {
+                    // if not active, add the author param
+                    const url = new URL(window.location.href);
+                    url.searchParams.set('author', button.value);
+                    window.location.href = url;
+                }
+            });
+        });
+
+        form.addEventListener('submit', function(event) {
+            event.preventDefault();
+            const url = new URL(window.location.href);
+            const formData = new FormData(form);
+
+            for (const [key, value] of formData) {
+                if (value) {
+                    url.searchParams.set(key, value);
+                } else {
+                    url.searchParams.delete(key);
+                }
+            }
+
+            window.location.href = url;
+        });
 
-        <div class="flex justify-between items-center">
-            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">Apply Filters</button>
-            <a href="{% pageurl page %}" class="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400 transition-colors">Reset Filters</a>
-        </div>
-    </form>
+        resetButton.addEventListener('click', function(event) {
+            if (resetButton.classList.contains('cursor-not-allowed')) {
+                event.preventDefault();
+            }
+        });
 
-</div>
\ No newline at end of file
+    });
+</script>
\ No newline at end of file
diff --git a/src/brazil_blog/static/css/brazil_blog_compiled.css b/src/brazil_blog/static/css/brazil_blog_compiled.css
index e6cd3cf..a561a57 100644
--- a/src/brazil_blog/static/css/brazil_blog_compiled.css
+++ b/src/brazil_blog/static/css/brazil_blog_compiled.css
@@ -1593,6 +1593,10 @@ select {
   height: 0.25rem;
 }
 
+.h-10 {
+  height: 2.5rem;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -1613,6 +1617,10 @@ select {
   height: 100%;
 }
 
+.min-h-16 {
+  min-height: 4rem;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -1645,6 +1653,10 @@ select {
   max-width: none;
 }
 
+.max-w-xs {
+  max-width: 20rem;
+}
+
 .flex-shrink {
   flex-shrink: 1;
 }
@@ -1677,6 +1689,10 @@ select {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1737,6 +1753,10 @@ select {
   gap: 1rem;
 }
 
+.self-end {
+  align-self: flex-end;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -2172,9 +2192,9 @@ select {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-400:hover {
+.hover\:bg-slate-200:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
 
 .hover\:text-amber-300:hover {
@@ -2263,6 +2283,10 @@ select {
 }
 
 @media (min-width: 640px) {
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
   .sm\:py-8 {
     padding-top: 2rem;
     padding-bottom: 2rem;
@@ -2270,6 +2294,14 @@ select {
 }
 
 @media (min-width: 768px) {
+  .md\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .md\:w-auto {
+    width: auto;
+  }
+
   .md\:inline-block {
     display: inline-block;
   }
@@ -2294,6 +2326,10 @@ select {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  .md\:gap-2 {
+    gap: 0.5rem;
+  }
 }
 
 @media (min-width: 1024px) {
diff --git a/src/zDockerfile b/src/zDockerfile
deleted file mode 100644
index e25100f..0000000
--- a/src/zDockerfile
+++ /dev/null
@@ -1,60 +0,0 @@
-# Use an official Python runtime based on Debian 10 "buster" as a parent image.
-FROM python:3.13-rc-slim
-
-# Add user that will be used in the container.
-RUN useradd wagtail
-
-# Port used by this container to serve HTTP.
-EXPOSE 8000
-
-# Set environment variables.
-# 1. Force Python stdout and stderr streams to be unbuffered.
-# 2. Set PORT variable that is used by Gunicorn. This should match "EXPOSE"
-#    command.
-ENV PYTHONUNBUFFERED=1 \
-    PORT=8000
-
-# Install system packages required by Wagtail and Django.
-RUN apt-get update --yes --quiet && apt-get install --yes --quiet --no-install-recommends \
-    build-essential \
-    libpq-dev \
-    libmariadbclient-dev \
-    libjpeg62-turbo-dev \
-    zlib1g-dev \
-    libwebp-dev \
- && rm -rf /var/lib/apt/lists/*
-
-# Install the application server.
-RUN pip install "gunicorn==20.0.4"
-
-# Install the project requirements.
-COPY requirements.txt /
-RUN pip install -r /requirements.txt
-
-# Use /app folder as a directory where the source code is stored.
-WORKDIR /app
-
-# Set this directory to be owned by the "wagtail" user. This Wagtail project
-# uses SQLite, the folder needs to be owned by the user that
-# will be writing to the database file.
-RUN chown wagtail:wagtail /app
-
-# Copy the source code of the project into the container.
-COPY --chown=wagtail:wagtail . .
-
-# Use user "wagtail" to run the build commands below and the server itself.
-USER wagtail
-
-# Collect static files.
-RUN python manage.py collectstatic --noinput --clear
-
-# Runtime command that executes when "docker run" is called, it does the
-# following:
-#   1. Migrate the database.
-#   2. Start the application server.
-# WARNING:
-#   Migrating database at the same time as starting the server IS NOT THE BEST
-#   PRACTICE. The database should be migrated manually or using the release
-#   phase facilities of your hosting platform. This is used only so the
-#   Wagtail instance can be started with a simple "docker run" command.
-CMD set -xe; python manage.py migrate --noinput; gunicorn brazil_blog.wsgi:application