diff --git a/Wave/Components/ArticleComponent.razor b/Wave/Components/ArticleComponent.razor
index d2ced6b..f814fbc 100644
--- a/Wave/Components/ArticleComponent.razor
+++ b/Wave/Components/ArticleComponent.razor
@@ -30,7 +30,7 @@
         </p>
         @if (Article.Categories.Count > 0) {
 	        <p class="flex flex-wrap gap-2 my-3">
-		        @foreach (var category in Article.Categories) {
+		        @foreach (var category in Article.Categories.OrderBy(c => c.Color)) {
 			        <span class="badge badge-@CategoryUtilities.GetCssClassPostfixForColor(category.Color)">
 						@category.Name
 					</span>
diff --git a/Wave/Components/Pages/Home.razor b/Wave/Components/Pages/Home.razor
index 21141b7..bab3b7a 100644
--- a/Wave/Components/Pages/Home.razor
+++ b/Wave/Components/Pages/Home.razor
@@ -29,7 +29,7 @@
 						    <h2 class="text-2xl lg:text-4xl">
 							    @featured.Title
 							    <p class="flex flex-wrap gap-2">
-								    @foreach (var category in featured.Categories) {
+                                    @foreach (var category in featured.Categories.OrderBy(c => c.Color)) {
 									    <span class="badge badge-@CategoryUtilities.GetCssClassPostfixForColor(category.Color)">
 										    @category.Name
 									    </span>