diff --git a/app/app/views.py b/app/app/views.py
index da58000f..8285f7ce 100644
--- a/app/app/views.py
+++ b/app/app/views.py
@@ -61,7 +61,7 @@ def projects(request):
     projects = (
         Project.objects.select_related("institution")
         .prefetch_related("subjects", "languages")
-        .all()
+        .order_by("name")
     )
 
     if subject_id:
@@ -71,9 +71,9 @@ def projects(request):
     if institution_id:
         projects = projects.filter(institution__id=institution_id)
 
-    subjects = Subject.objects.all()
-    languages = Language.objects.all()
-    institutions = Institution.objects.all()
+    subjects = Subject.objects.order_by("name")
+    languages = Language.objects.order_by("name")
+    institutions = Institution.objects.order_by("name")
 
     project_data = []
     for project in projects:
diff --git a/app/static/css/styles.css b/app/static/css/styles.css
index 059f1586..07a53dc4 100755
--- a/app/static/css/styles.css
+++ b/app/static/css/styles.css
@@ -33,104 +33,81 @@ html {
     position: absolute;
     bottom: 0;
 }
-
 .header-container {
     display: inline-block;
 }
-
 .nav-menu {
     float: left;
     padding: 5px;
     margin: 10px 10px 10px 10px;
 }
-
 .nav-logo {
     margin: 3px 10px 10px 10px;
     float: left;
 }
-
 .nav {
     background: var(--primary-fg);
     width: 100%;
 }
-
 .nav > li > a{
     margin-top: 15px;
     color: var(--text-color);
 }
-
 .nav > li > .active{
     margin-top: 15px;
     background-color: var(--primary) !important;
     color: var(--primary-fg);
 }
-
 .nav > li > a:hover{
     margin-top: 15px;
     background-color: var(--body-quiet-color);
     color: var(--primary-fg);
 }
-
 .nav > li > a:active{
     margin-top: 15px;
     background-color: var(--primary);
     color: var(--primary-fg);
 }
-
 .btn-primary{
     margin-top:20px;
     outline-color: var(--primary);
     background-color: var(--primary);
     border-color: var(--primary);
 }
-
 .btn-outline-primary{
     margin-top:20px;
     background: #2D4481;
     outline-color: var(--primary);
 }
-
 .btn-primary:hover{
     margin-top:20px;
     background: var(--body-quiet-color);
     outline-color: var(--primary);
 }
-
 .app-footer .footer-title {
     color: var(--primary);
 }
-
 .footer > a {
     color: var(--primary-fg);
 }
-
 .section{
     margin-left: 10px;
     margin-right: 10px;
     margin-bottom: 10px;
 }
-
 .main-logo {
     width: 140px;
     height: 75px;
     margin: 20px 10px 10px 10px;
 }
-
 .page-link {
     background-color: var(--primary) !important;
     color: var(--primary-fg) !important;
 }
-
 .page-link:hover{
     background-color: var(--body-quiet-color) !important;
     color: var(--primary-fg) !important;
 }
-
-.row {
-    margin: 10px;
-    padding: 10px;
-}
-
 .footer-class {
     display: flex;
     justify-content: center;
@@ -138,22 +115,18 @@ html {
     position: relative;
     flex-direction: column;
 }
-
 .language-toggle {
     margin-top: 1rem;
 }
-
 .language-toggle form {
     display: flex;
     flex-direction: column;
     align-items: center;
 }
-
 .language-toggle select,
 .language-toggle .btn-language {
     margin-top: 0.5rem;
 }
-
 .btn-language{
     color: var(--text-color);
     outline-color: var(--primary-fg);
@@ -172,17 +145,33 @@ html {
     border-color: var(--primary-red);
     margin: 0 10px 0 10px;
 }
-
 .uni-logo {
     width: auto;
     height: 75px;
     margin: 10px 0 10px 0;
     padding: 0 10px 10px 0;
 }
+.institution-row {
+    margin: 10px;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+}
+.left-col, .right-col {
+    flex: 1;
+    min-width: 200px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
 
 /*Projects page*/
+.filter-class label {
+  font-size: 1.15rem;
+}
 .filter-form {
-    display: flex;
     margin: 30px;
     font-size: 0.875rem;
 }
@@ -199,12 +188,21 @@ html {
     padding: 0 10px;
     width: 230px;
 }
+.form-group-name {
+  margin-bottom: 15px;
+}
+.button-group {
+  display: flex;
+  align-items: center;
+}
 .btn-apply, .btn-reset{
     color: var(--primary-fg);
     outline-color: var(--primary);
     background-color: var(--primary);
     border-color: var(--primary);
+    padding: 10px 20px;
     margin-right: 10px;
+    white-space: nowrap;
 }
 .btn-apply:hover, .btn-reset:hover{
     color: var(--primary-fg);
@@ -242,15 +240,6 @@ html {
     padding: 0 5px 0 0;
     word-wrap: break-word;
 }
-.project-left-col {
-    width: 70%;
-}
-.project-right-col {
-    width: 30%;
-    flex: 0 0 auto;
-    display: flex;
-    justify-content: flex-end;
-}
 .project-header {
     display: flex;
     justify-content: space-between;
@@ -269,8 +258,6 @@ html {
     margin: 3px 0 3px 0;
 }
 .project-row {
-    display: flex;
-    justify-content: space-between;
     width: 100%;
 }
 .project-text {
@@ -280,7 +267,7 @@ html {
     font-size: 0.95rem;
 }
 
-/*Project & Institution detail*/
+/*Projects & Institution detail pages*/
 .detail {
     width: 80%;
     margin: 0 auto;
@@ -304,8 +291,7 @@ html {
 }
 
 .detail-row {
-    display: flex;
-    justify-content: space-between;
+    flex-wrap: wrap;
     margin-bottom: 20px;
 }
 
@@ -321,7 +307,6 @@ html {
 }
 
 .detail-col {
-    flex: 1;
     border-radius: 5px;
 }
 
@@ -343,19 +328,7 @@ html {
     text-decoration: none;
     color: var(--link-text);
 }
-
-.detail-left-col {
-    width: 50%;
-}
-
-.detail-right-col {
-    width: 50%;
-    flex: 0 0 auto;
-    display: flex;
-    justify-content: left;
-}
 .project-date-row {
-  display: flex;
   font-size: 0.875rem;
 }
 
@@ -396,9 +369,14 @@ html {
         width: 98%;
         padding-right: 30px;
     }
-    .col-sm-6 {
-        width: 50%;
+    .institution-row {
+        flex-direction: column;
+        align-items: flex-start;
     }
+    .left-col, .right-col {
+        width: 100%;
+    }
+
     /*Home page*/
     .content-card {
         font-size: smaller;
@@ -409,7 +387,13 @@ html {
     /*Projects page*/
     .filter-form select {
         padding: 0 10px;
-        width: 100px;
+        width: 250px;
+    }
+    .project-row {
+        justify-content: space-between;
+    }
+    .form-group {
+      margin-bottom: 20px
     }
 }
 
@@ -448,7 +432,13 @@ html {
     /*Projects page*/
     .filter-form select {
         padding: 0 10px;
-        width: 150px;
+        width: 400px;
+    }
+    .project-row {
+        justify-content: space-between;
+    }
+    .form-group {
+      margin-bottom: 20px
     }
 }
 
@@ -507,6 +497,32 @@ html {
         padding: 0 10px;
         width: 200px;
     }
+    .project-row {
+        display: flex;
+        justify-content: space-between;
+    }
+    .project-left-col {
+        width: 70%;
+    }
+    .project-right-col {
+        width: 30%;
+        flex: 0 0 auto;
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    /*Projects & Institution detail pages*/
+    .detail-left-col, .detail-right-col {
+      flex: 1;
+      padding: 10px;
+    }
+    .project-date-row {
+      display: flex;
+      font-size: 0.875rem;
+    }
+    .filter-form {
+        display: flex;
+    }
 }
 
  /*Larger screens (desktops, 1001px and up)*/
@@ -565,4 +581,31 @@ html {
       padding: 0 10px;
       width: 230px;
   }
+  .project-row {
+      display: flex;
+      justify-content: space-between;
+  }
+  .project-left-col {
+      width: 70%;
+  }
+  .project-right-col {
+      width: 30%;
+      flex: 0 0 auto;
+      display: flex;
+      justify-content: flex-end;
+  }
+
+  /*Projects & Institution detail pages*/
+  .detail-right-col {
+      flex: 0 0 auto;
+      display: flex;
+      justify-content: left;
+  }
+  .project-date-row {
+    display: flex;
+    font-size: 0.875rem;
+  }
+  .filter-form {
+      display: flex;
+  }
 }
diff --git a/app/templates/app/institution_detail.html b/app/templates/app/institution_detail.html
index 08d8131c..23fab35b 100644
--- a/app/templates/app/institution_detail.html
+++ b/app/templates/app/institution_detail.html
@@ -7,9 +7,8 @@
 <div class="detail">
     <p><a href="{% url 'institutions' %}">{% trans "Institutions" %}</a> > {{ institution.name }}</p>
 
-    <div class="detail-row">
-
-        <div class="col-sm-6 detail-left-col">
+    <div class="detail-row row">
+        <div class="col-12 {% if institution.logo %}col-md-6{% else %}col-md-12{% endif %} detail-left-col">
             <h1>{{ institution.name }} ({{ institution.abbreviation }})</h1>
             {% if institution.url %}
                 <p><a href="{{ institution.url }}">{{ institution.url }}</a></p>
@@ -19,17 +18,15 @@ <h1>{{ institution.name }} ({{ institution.abbreviation }})</h1>
             {% endif %}
         </div>
 
-        <div class="col-sm-6 detail-right-col">
-            {% if institution.logo %}
-                <img src="{{ institution.logo.url }}" alt="{{ institution.name }}" class="project-logo">
-            {% endif %}
+        {% if institution.logo %}
+        <div class="col-12 col-md-6 detail-right-col">
+            <img src="{{ institution.logo.url }}" alt="{{ institution.name }}" class="project-logo">
         </div>
+        {% endif %}
     </div>
 
-    <br/>
-
-    <div class="detail-row">
-        <div class="col-sm-6 detail-col">
+    <div class="detail-row row">
+        <div class="col-md-6 col-12 detail-col">
             <h2>{% trans "Projects" %}</h2>
             {% if projects %}
             <ul>
@@ -44,7 +41,7 @@ <h2>{% trans "Projects" %}</h2>
                 <p>{% trans "No projects available for this institution." %}</p>
             {% endif %}
         </div>
-        <div class="col-sm-6 detail-col">
+        <div class="col-md-6 col-12 detail-col">
             <h2>{% trans "Documents" %}</h2>
             {% if documents %}
             <ul>
@@ -60,7 +57,6 @@ <h2>{% trans "Documents" %}</h2>
             {% endif %}
         </div>
     </div>
-
 </div>
 
 {% endblock content %}
diff --git a/app/templates/app/institutions.html b/app/templates/app/institutions.html
index 663ab27f..8a002a7f 100644
--- a/app/templates/app/institutions.html
+++ b/app/templates/app/institutions.html
@@ -8,8 +8,8 @@
     {% for institution in institutions %}
     <div class="all-cards section">
         <div class="card uni-card">
-            <div class="row">
-                <div class="col-sm-6 left-col">
+            <div class="institution-row">
+                <div class="left-col">
                     <h5 class="card-title"><a href="{% url 'institution_detail' institution.id %}">{{ institution.name }}</a></h5>
                     <p class="card-text">
                         {{ institution.abbreviation }}
@@ -21,7 +21,7 @@ <h5 class="card-title"><a href="{% url 'institution_detail' institution.id %}">{
                       {% endif %}
                     </p>
                 </div>
-                <div class="col-sm-6 right-col">
+                <div class="right-col">
                     <p class="card-text">{% trans "Profile completion:" %}</p>
                     <div class="profile-icons">
                       {% if institution.rating <= 20 %}
diff --git a/app/templates/app/project_detail.html b/app/templates/app/project_detail.html
index c94c1ce1..e16f817e 100644
--- a/app/templates/app/project_detail.html
+++ b/app/templates/app/project_detail.html
@@ -7,9 +7,9 @@
 <div class="detail">
   <p><a href="{% url 'projects' %}">{% trans "Projects" %}</a> > {{ project.name }}</p>
 
-  <div class=detail-row>
+  <div class="detail-row row">
 
-    <div class="col-sm-6 detail-left-col">
+    <div class="col-12 {% if logo %}col-md-6{% else %}col-md-12{% endif %} detail-left-col">
       <h1>{{ project.name }}</h1>
       <a href="{{ project.url }}">{{ project.url }}</a>
       <p>
@@ -36,9 +36,9 @@ <h1>{{ project.name }}</h1>
 
     </div>
 
-    <div class="col-sm-6 detail-right-col">
-      {% if project.logo %}
-      <img src="{{ project.logo.url }}" alt="{% blocktrans with project_name=project.name %}{{ project_name }} logo{% endblocktrans %}"
+    <div class="col-12 col-md-6 detail-right-col">
+      {% if logo %}
+      <img src="{{ logo.url }}" alt="{% blocktrans with project_name=project.name %}{{ project_name }} logo{% endblocktrans %}"
            class="project-logo">
       {% endif %}
     </div>
@@ -46,8 +46,8 @@ <h1>{{ project.name }}</h1>
   </div>
 
 
-  <div class="detail-row">
-    <div class="col-sm-6 detail-col">
+  <div class="detail-row row">
+    <div class="col-md-6 col-12 detail-col">
       <div>
           <h2>{% trans "Subjects" %}</h2>
           <ul>
@@ -61,7 +61,7 @@ <h2>{% trans "Subjects" %}</h2>
       </div>
     </div>
 
-    <div class="col-sm-6 detail-col">
+    <div class="col-md-6 col-12 detail-col">
       <div>
         <h2>{% trans "Languages" %}</h2>
         <ul>
diff --git a/app/templates/app/projects.html b/app/templates/app/projects.html
index 8887d3e9..ba4dab87 100644
--- a/app/templates/app/projects.html
+++ b/app/templates/app/projects.html
@@ -3,105 +3,115 @@
 {% load i18n %}
 
 {% block content %}
+<div class="filter-class">
+  <form class="filter-form">
+    <label for="filter">{% trans "Filter:" %}</label>
 
-    <div class="filter-class">
-      <form class="filter-form">
-        <label for="filter">{% trans "Filter:" %}</label>
-
-            <div class="form-group">
-                <select name="subject" class="form-control">
-                    <option value="">{% trans "Subject" %}</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">
-                <select name="language" class="form-control">
-                    <option value="">{% trans "Language" %}</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="form-group-name">Subject</label>
+            <select name="subject" class="form-control form-control-lg"">
+                <option value="">{% trans "Subject" %}</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">
-                <select name="institution" class="form-control">
-                    <option value="">{% trans "Institution" %}</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="form-group">
+            <label for="form-group-name">Language</label>
+            <select name="language" class="form-control form-control-lg"">
+                <option value="">{% trans "Language" %}</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>
 
-            <input class="btn btn-apply btn-sm" type="submit" value="{% trans 'Apply' %}">
-            <a href="{% url 'projects' %}" class="btn btn-reset btn-sm">{% trans 'Reset' %}</a>
+        <div class="form-group">
+            <label for="form-group-name">Institution</label>
+            <select name="institution" class="form-control form-control-lg"">
+                <option value="">{% trans "Institution" %}</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>
 
-      </form>
-    </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>
 
-    <br />
-    <br />
+  </form>
+</div>
 
+<br />
 
-    <div class="project-list">
-      {% for project in projects %}
-      <div class="project-border">
-      <div class="project-header">
-        <div class="project-row">
-            <div class="col-sm-6 project-left-col">
-              <h3>
-                <a class="project-name" href="{% url 'project_detail' project.project.id %}">
-                    {{ project.project.name }}
-                </a>
-              </h3>
-            <div class="card-text-project">
-                <a href="{{ project.project.url }}" target="_blank" class="project-url">{{ project.project.url }}</a>
-            </div>
-            <div class="card-text-project project-text">
-                {{ project.institution_name }}
-            </div>
-          </div>
-          <div class="col-sm-6 project-right-col">
-            {% if project.logo %}
-            <img src="{{ project.logo.url }}" alt="{{ project.name }} logo"
-                 class="project-logo">
-            {% endif %}
-          </div>
-        </div>
-      </div>
-      <div class="project-body">
-        <div class="card-text-description">
-            {{ project.description|truncatewords:30 }} <a href="{% url 'project_detail' project.project.id %}">Read more</a>
-        </div>
+<div class="project-list">
+  {% for project in projects %}
+  <div class="project-border">
+  <div class="project-header">
+    <div class="project-row">
+        <div class="project-left-col">
+          <h3>
+            <a class="project-name" href="{% url 'project_detail' project.project.id %}">
+                {{ project.project.name }}
+            </a>
+          </h3>
         <div class="card-text-project">
-          <span class="icon-text"><i class="project-icon bi-vector-pen"></i></span>
-          <span class="icon-text">{{ project.languages }}</span>
+            <a href="{{ project.project.url }}" target="_blank" class="project-url" title="External link">
+                {{ project.project.url }}
+            </a>
         </div>
-        <div class="card-text-project">
-            <span class="icon-text"><i class="project-icon bi-book"></i></span>
-            <span class="icon-text">{{ project.subjects }}</span>
+        <div class="card-text-project project-text">
+            {{ project.institution_name }}
         </div>
-        <div class="card-text-project">
-          <span class="icon-text"><i class="project-icon bi-calendar3"></i></span>
-          <span class="icon-text">{{ project.date }}</span>
-        </div>
-
       </div>
+      <div class="project-right-col">
+        {% if project.logo %}
+        <img src="{{ project.logo.url }}" alt="{{ project.name }} logo"
+             class="project-logo">
+        {% endif %}
       </div>
-
-      <br />
-      <br />
-      <br />
-      {% endfor %}
     </div>
+  </div>
+  <div class="project-body">
+    <div class="card-text-description">
+        {{ project.description|truncatewords:30 }} <a href="{% url 'project_detail' project.project.id %}">Read more</a>
+    </div>
+    <div class="card-text-project">
+      {% if project.languages %}
+        <span class="icon-text"><i class="project-icon bi-vector-pen"></i></span>
+        <span class="icon-text">{{ project.languages }}</span>
+      {% endif %}
+    </div>
+    <div class="card-text-project">
+      {% if project.subjects %}
+        <span class="icon-text"><i class="project-icon bi-book"></i></span>
+        <span class="icon-text">{{ project.subjects }}</span>
+      {% endif %}
+    </div>
+    <div class="card-text-project">
+      {% if project.date %}
+        <span class="icon-text"><i class="project-icon bi-calendar3"></i></span>
+        <span class="icon-text">{{ project.date }}</span>
+      {% endif %}
+    </div>
+
+  </div>
+  </div>
+
+  <br />
+  <br />
+  <br />
+  {% endfor %}
+</div>