diff --git a/app/app/views.py b/app/app/views.py
index 05020a17..a97e444a 100644
--- a/app/app/views.py
+++ b/app/app/views.py
@@ -50,6 +50,22 @@ def get_logo(project):
     return logo
 
 
+def get_languages(languages):
+    if languages.count() < 4:
+        languages_data = ", ".join(sorted(language.name for language in languages))
+    else:
+        languages_data = _("Multilingual")
+    return languages_data
+
+
+def get_subjects(subjects):
+    if subjects.count() < 4:
+        subjects_data = ", ".join(sorted([subject.name for subject in subjects]))
+    else:
+        subjects_data = _("Multiple subjects")
+    return subjects_data
+
+
 def projects(request):
     template = "app/projects.html"
 
@@ -79,15 +95,8 @@ def projects(request):
         project_subjects = project.subjects.all()
         project_languages = project.languages.all()
 
-        if project_languages.count() < 4:
-            languages_data = ", ".join(sorted(language.name for language in project_languages))
-        else:
-            languages_data = _("Multilingual")
-
-        if project_subjects.count() < 4:
-            subjects_data = ", ".join(sorted([subject.name for subject in project_subjects]))
-        else:
-            subjects_data = _("Multiple subjects")
+        languages_data = get_languages(project_languages)
+        subjects_data = get_subjects(project_subjects)
 
         logo = get_logo(project)
 
@@ -161,8 +170,59 @@ def institution_detail(request, institution_id):
 def documents(request):
     template = "app/documents.html"
 
+    subject_id = request.GET.get("subject")
+    language_id = request.GET.get("language")
+    institution_id = request.GET.get("institution")
+
+    documents = (
+        DocumentFile.objects.select_related("institution")
+        .prefetch_related("subjects", "languages")
+        .order_by("title")
+    )
+
+    if subject_id:
+        documents = documents.filter(subjects__id=subject_id)
+    if language_id:
+        documents = documents.filter(languages__id=language_id)
+    if institution_id:
+        documents = documents.filter(institution__id=institution_id)
+
+    paginator = Paginator(documents, 10)
+
+    page_number = request.GET.get("page")
+    page_obj = paginator.get_page(page_number)
+
+    subjects = Subject.objects.order_by("name")
+    languages = Language.objects.order_by("name")
+    institutions = Institution.objects.order_by("name")
+
+    document_data = []
+    for document in page_obj:
+        document_subjects = document.subjects.all()
+        document_languages = document.languages.all()
+
+        languages_data = get_languages(document_languages)
+        subjects_data = get_subjects(document_subjects)
+
+        document_data.append(
+            {
+                "document": document,
+                "subjects": subjects_data,
+                "languages": languages_data,
+                "institution_name": document.institution.name,
+                "description": document.description,
+                "url": document.url,
+                "category": document.document_type,
+            }
+        )
+
     context = {
         "current_page": "documents",
+        "page_obj": page_obj,
+        "documents": document_data,
+        "subjects": subjects,
+        "languages": languages,
+        "institutions": institutions,
     }
     return render(request, template_name=template, context=context)
 
diff --git a/app/static/css/styles.css b/app/static/css/styles.css
index d6e97f89..d17e3ae5 100755
--- a/app/static/css/styles.css
+++ b/app/static/css/styles.css
@@ -133,6 +133,41 @@ html {
     background-color: var(--primary-fg);
     border-color: var(--primary-fg);
 }
+.pagination-wrapper {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+.pagination {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    border: 1px solid #000;
+    border-radius: 5px;
+}
+.pagination .page-item {
+    margin: 0;
+    border-left: 1px solid #000;
+}
+.pagination .page-item:first-child {
+    border-left: none;
+}
+.pagination .page-link {
+    padding: 5px 10px;
+    text-decoration: none;
+    color: var(--text-color);
+}
+.pagination .page-item.active .page-link {
+    background-color: var(--primary);
+    color: var(--primary-fg);
+}
+.pagination .page-item.disabled .page-link {
+    color: #6c757d;
+}
+.button-spacing {
+    margin-right: 10px;
+}
+
 /*Home page*/
 .content-card {
     border-color: var(--primary-red);
@@ -343,6 +378,10 @@ html {
 .project-date-row {
   font-size: 0.875rem;
 }
+.gap-2 > * {
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+}
 
 /*Accounts*/
 .user-account-body {
@@ -403,6 +442,13 @@ html {
         padding-right: 20px;
         margin-right: 10px;
     }
+    .form-group.col-md-4 {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+    .gap-2 > * {
+        margin-right: 0;
+    }
 }
 
 /*small devices (tablets, 600px and up) */
@@ -436,6 +482,13 @@ html {
     .content-card {
         font-size: smaller;
     }
+    .form-group.col-md-4 {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+    .gap-2 > * {
+        margin-right: 0;
+    }
 }
 
 /*Medium screens (tablets, between 768px and 1001px)*/
@@ -611,12 +664,3 @@ html {
       display: flex;
   }
 }
-
-/*Search Css*/
-.checkbox-container {
-    cursor: pointer;
-    max-height: 130px; /* Adjust based on your line-height and padding to show only 4 rows */
-    overflow-y: auto; /* Enable vertical scrollbar when content overflows */
-    border: 1px solid #ced4da; /* Bootstrap's form control border color */
-    border-radius: 0.25rem; /* Bootstrap's form control border radius */
-}
diff --git a/app/templates/app/documents.html b/app/templates/app/documents.html
index 84d76d25..43e174f7 100644
--- a/app/templates/app/documents.html
+++ b/app/templates/app/documents.html
@@ -3,5 +3,110 @@
 {% load i18n %}
 
 {% block content %}
+<div class="filter-class">
+  <form method="GET" action="">
+      <div class="d-flex flex-wrap gap-2">
+          <div class="form-group flex-fill mb-2">
+              <label for="subject">{% trans "Subject" %}</label>
+              <select id="subject" name="subject" class="form-control">
+                  <option value="">{% trans "All Subjects" %}</option>
+                  {% for subject in subjects %}
+                      <option value="{{ subject.id }}" {% if request.GET.subject == subject.id|stringformat:"s" %}selected{% endif %}>{{ subject.name }}</option>
+                  {% endfor %}
+              </select>
+          </div>
+          <div class="form-group flex-fill mb-2">
+              <label for="language">{% trans "Language" %}</label>
+              <select id="language" name="language" class="form-control">
+                  <option value="">{% trans "All Languages" %}</option>
+                  {% for language in languages %}
+                      <option value="{{ language.id }}" {% if request.GET.language == language.id|stringformat:"s" %}selected{% endif %}>{{ language.name }}</option>
+                  {% endfor %}
+              </select>
+          </div>
+          <div class="form-group flex-fill mb-2">
+              <label for="institution">{% trans "Institution" %}</label>
+              <select id="institution" name="institution" class="form-control">
+                  <option value="">{% trans "All Institutions" %}</option>
+                  {% for institution in institutions %}
+                      <option value="{{ institution.id }}" {% if request.GET.institution == institution.id|stringformat:"s" %}selected{% endif %}>{{ institution.name }}</option>
+                  {% endfor %}
+              </select>
+          </div>
+      </div>
+      <div class="d-flex flex-wrap">
+        <button type="submit" class="btn btn-primary mt-2 button-spacing">{% trans "Filter" %}</button>
+        <a href="{% url 'documents' %}" class="btn btn-secondary mt-2 button-spacing">{% trans "Reset" %}</a>
+      </div>
+  </form>
+</div>
 
-{% endblock content%}
+<br />
+
+<div class="project-list">
+  {% for document in documents %}
+  <div class="project-border">
+    <div class="row">
+          <h3>
+                {{ document.document.title }}
+          </h3>
+        <div class="card-text-project">
+            <a href="{{ document.document.url }}" target="_blank" class="project-url" title="External link">
+                {{ document.document.url }}
+            </a>
+        </div>
+        <div class="card-text-project project-text">
+            {{ document.institution_name }}
+        </div>
+  </div>
+  <div class="project-body">
+    <div class="card-text-description">
+        {{ document.description|truncatewords:30 }} <a href="{% url 'document_detail' document.document.id %}">{% trans "Read more" %}</a>
+    </div>
+    <div class="card-text-project">
+      {% if document.languages %}
+        <span class="icon-text"><i class="project-icon bi-vector-pen"></i></span>
+        <span class="icon-text">{{ document.languages }}</span>
+      {% endif %}
+    </div>
+    <div class="card-text-project">
+      {% if document.subjects %}
+        <span class="icon-text"><i class="project-icon bi-book"></i></span>
+        <span class="icon-text">{{ document.subjects }}</span>
+      {% endif %}
+    </div>
+  </div>
+  </div>
+
+  <br />
+  {% endfor %}
+</div>
+
+<div class="pagination-wrapper">
+    <ul class="pagination">
+        {% if page_obj.has_previous %}
+            <li class="page-item"><a class="page-link" href="?{% if request.GET.subject %}subject={{ request.GET.subject }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.institution %}institution={{ request.GET.institution }}&{% endif %}page=1">&laquo; {% trans "First" %}</a></li>
+            <li class="page-item"><a class="page-link" href="?{% if request.GET.subject %}subject={{ request.GET.subject }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.institution %}institution={{ request.GET.institution }}&{% endif %}page={{ page_obj.previous_page_number }}">&lsaquo; {% trans "Previous" %}</a></li>
+        {% else %}
+            <li class="page-item disabled"><a class="page-link" href="#">&laquo; {% trans "First" %}</a></li>
+            <li class="page-item disabled"><a class="page-link" href="#">&lsaquo; {% trans "Previous" %}</a></li>
+        {% endif %}
+
+        {% for num in page_obj.paginator.page_range %}
+            {% if page_obj.number == num %}
+                <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
+            {% elif num > page_obj.number|add:-3 and num < page_obj.number|add:3 %}
+                <li class="page-item"><a class="page-link" href="?{% if request.GET.subject %}subject={{ request.GET.subject }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.institution %}institution={{ request.GET.institution }}&{% endif %}page={{ num }}">{{ num }}</a></li>
+            {% endif %}
+        {% endfor %}
+
+        {% if page_obj.has_next %}
+            <li class="page-item"><a class="page-link" href="?{% if request.GET.subject %}subject={{ request.GET.subject }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.institution %}institution={{ request.GET.institution }}&{% endif %}page={{ page_obj.next_page_number }}">{% trans "Next" %} &rsaquo;</a></li>
+            <li class="page-item"><a class="page-link" href="?{% if request.GET.subject %}subject={{ request.GET.subject }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.institution %}institution={{ request.GET.institution }}&{% endif %}page={{ page_obj.paginator.num_pages }}">{% trans "Last" %} &raquo;</a></li>
+        {% else %}
+            <li class="page-item disabled"><a class="page-link" href="#">{% trans "Next" %} &rsaquo;</a></li>
+            <li class="page-item disabled"><a class="page-link" href="#">{% trans "Last" %} &raquo;</a></li>
+        {% endif %}
+    </ul>
+</div>
+{% endblock content %}
diff --git a/app/templates/app/projects.html b/app/templates/app/projects.html
index a0bc745d..ef155fcc 100644
--- a/app/templates/app/projects.html
+++ b/app/templates/app/projects.html
@@ -4,53 +4,40 @@
 
 {% block content %}
 <div class="filter-class">
-  <form class="filter-form">
-
-    <div class="filter-label">
-      <label>{% trans "Filter:" %}</label>
-    </div>
-
-    <div class="form-group">
-        <label for="subject_select">{% trans "Subject" %}</label>
-        <select name="subject" class="form-control form-control-lg" id="subject_select">
-            <option value="">{% trans "All subjects" %}</option>
-            {% for subject in subjects %}
-              <option value="{{ subject.id }}" {% if request.GET.subject == subject.id|stringformat:"s" %}selected{% endif %}>
-                {{ subject.name }}
-              </option>
-            {% endfor %}
-        </select>
-    </div>
-
-    <div class="form-group">
-        <label for="language_select">{% trans "Language" %}</label>
-        <select name="language" class="form-control form-control-lg" id="language_select">
-            <option value="">{% trans "All languages" %}</option>
-            {% for language in languages %}
-              <option value="{{ language.id }}" {% if request.GET.language == language.id|stringformat:"s" %}selected{% endif %}>
-                {{ language.name }}
-              </option>
-            {% endfor %}
-        </select>
-    </div>
-
-    <div class="form-group">
-        <label for="institution_select">{% trans "Institution" %}</label>
-        <select name="institution" class="form-control form-control-lg" id="institution_select">
-            <option value="">{% trans "All institutions" %}</option>
-            {% for institution in institutions %}
-              <option value="{{ institution.id }}" {% if request.GET.institution == institution.id|stringformat:"s" %}selected{% endif %}>
-                {{ institution.name }}
-              </option>
-            {% endfor %}
-        </select>
-    </div>
-
-    <div class="button-group">
-      <input class="btn btn-apply" type="submit" value="{% trans 'Apply' %}">
-      <a href="{% url 'projects' %}" class="btn btn-reset">{% trans 'Reset' %}</a>
-    </div>
-
+  <form method="GET" action="">
+      <div class="d-flex flex-wrap gap-2">
+          <div class="form-group flex-fill mb-2">
+              <label for="subject">{% trans "Subject" %}</label>
+              <select id="subject" name="subject" class="form-control">
+                  <option value="">{% trans "All Subjects" %}</option>
+                  {% for subject in subjects %}
+                      <option value="{{ subject.id }}">{{ subject.name }}</option>
+                  {% endfor %}
+              </select>
+          </div>
+          <div class="form-group flex-fill mb-2">
+              <label for="language">{% trans "Language" %}</label>
+              <select id="language" name="language" class="form-control">
+                  <option value="">{% trans "All Languages" %}</option>
+                  {% for language in languages %}
+                      <option value="{{ language.id }}">{{ language.name }}</option>
+                  {% endfor %}
+              </select>
+          </div>
+          <div class="form-group flex-fill mb-2">
+              <label for="institution">{% trans "Institution" %}</label>
+              <select id="institution" name="institution" class="form-control">
+                  <option value="">{% trans "All Institutions" %}</option>
+                  {% for institution in institutions %}
+                      <option value="{{ institution.id }}">{{ institution.name }}</option>
+                  {% endfor %}
+              </select>
+          </div>
+      </div>
+      <div class="d-flex flex-wrap">
+        <button type="submit" class="btn btn-primary mt-2 button-spacing">{% trans "Filter" %}</button>
+        <a href="{% url 'projects' %}" class="btn btn-secondary mt-2 button-spacing">{% trans "Reset" %}</a>
+      </div>
   </form>
 </div>
 
diff --git a/app/templates/base.html b/app/templates/base.html
index 2b8a3967..d5dc7da3 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -51,6 +51,12 @@
                                 class="nav-link" href="{% url 'projects' %}">{% trans "Projects" %}
                         </a>
                     </li>
+                    <li class="nav-item">
+                        <a
+                                {% if current_page == 'documents' %} class="nav-link active" aria-current="page" {% endif %}
+                                class="nav-link" href="{% url 'documents' %}">{% trans "Documents" %}
+                        </a>
+                    </li>
                     <li class="nav-item">
                         <a class="nav-link" href="{% url 'admin:index' %}">{% trans "Admin" %}</a>
                     </li>