diff --git a/app/models.py b/app/models.py
index 96ef655c..714c5a0e 100644
--- a/app/models.py
+++ b/app/models.py
@@ -338,6 +338,14 @@ class Dependency(db.Model):
 		else:
 			raise Exception("Either meta or package must be given, but not both!")
 
+	def getName(self):
+		if self.meta_package:
+			return self.meta_package.name
+		elif self.package:
+			return self.package.name
+		else:
+			assert False
+
 	def __str__(self):
 		if self.package is not None:
 			return self.package.author.username + "/" + self.package.name
@@ -450,6 +458,21 @@ class Package(db.Model):
 	def getIsFOSS(self):
 		return self.license.is_foss and self.media_license.is_foss
 
+	def getSortedDependencies(self, is_hard=None):
+		query = self.dependencies
+		if is_hard is not None:
+			query = query.filter_by(optional=not is_hard)
+
+		deps = query.all()
+		deps.sort(key = lambda x: x.getName())
+		return deps
+
+	def getSortedHardDependencies(self):
+		return self.getSortedDependencies(True)
+
+	def getSortedOptionalDependencies(self):
+		return self.getSortedDependencies(False)
+
 	def getState(self):
 		if self.approved:
 			return "approved"
diff --git a/app/templates/packages/view.html b/app/templates/packages/view.html
index 362f4f4a..7bed662c 100644
--- a/app/templates/packages/view.html
+++ b/app/templates/packages/view.html
@@ -261,27 +261,40 @@
 				<div class="card my-4">
 					<div class="card-header">Dependencies</div>
 					<div class="card-body">
-						{% for dep in package.dependencies %}
-							{% if dep.optional %}
-								{% set color="secondary" %}
-							{% else %}
-								{% set color="primary" %}
-							{% endif %}
-
+						<div class="card-subtitle mb-2 text-muted">{{ _("Required") }}</div>
+						{% for dep in package.getSortedHardDependencies() %}
 							{%- if dep.package %}
-								<a class="badge badge-{{ color }}"
+								<div					</div class="badge badge-primary"
 										href="{{ dep.package.getDetailsURL() }}">
 									{{ dep.package.title }} by {{ dep.package.author.display_name }}
 							{% elif dep.meta_package %}
-								<a class="badge badge-{{ color }}"
+								<a class="badge badge-primary"
 										href="{{ url_for('metapackages.view', name=dep.meta_package.name) }}">
 									{{ dep.meta_package.name }}
 							{% else %}
 								{{ "Excepted package or meta_package in dep!" | throw }}
 							{% endif %}</a>
 						{% else %}
-							<i>No dependencies</i>
+							<i>No required dependencies</i>
 						{% endfor %}
+
+						{% set optional_deps=package.getSortedOptionalDependencies() %}
+						{% if optional_deps %}
+    						<div class="card-subtitle my-2 text-muted">{{ _("Optional") }}</div>
+							{% for dep in optional_deps %}
+								{%- if dep.package %}
+									<a class="badge badge-secondary"
+											href="{{ dep.package.getDetailsURL() }}">
+										{{ dep.package.title }} by {{ dep.package.author.display_name }}
+								{% elif dep.meta_package %}
+									<a class="badge badge-secondary"
+											href="{{ url_for('metapackages.view', name=dep.meta_package.name) }}">
+										{{ dep.meta_package.name }}
+								{% else %}
+									{{ "Excepted package or meta_package in dep!" | throw }}
+								{% endif %}</a>
+							{% endfor %}
+						{% endif %}
 					</div>
 				</div>
 			{% endif %}