diff --git a/src/components/AfterServerView.tsx b/src/components/AfterServerView.tsx
index 0b1b7b5..d64f057 100644
--- a/src/components/AfterServerView.tsx
+++ b/src/components/AfterServerView.tsx
@@ -32,13 +32,19 @@
 import { getCommunityServerFavorites, getCustomization } from "@/lib/api";
 import { MHSF } from "@/lib/mhsf";
 import { ServerResponse } from "@/lib/types/mh-server";
-import { MinehutIcon, getMinehutIcons } from "@/lib/types/server-icon";
+import {
+	MinehutIcon,
+	getIndexFromRarity,
+	getMinehutIcons,
+	rarityIndex,
+} from "@/lib/types/server-icon";
 import { Copy, Info } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import FadeIn from "react-fade-in/lib/FadeIn";
 import toast, { CheckmarkIcon } from "react-hot-toast";
 import Markdown from "react-markdown";
+import IconDisplay from "./IconDisplay";
 import AchievementList from "./feat/AchievementList";
 import { Button } from "./ui/button";
 import {
@@ -74,13 +80,13 @@ export default function AfterServerView({ server }: { server: string }) {
 				getCommunityServerFavorites(server).then((c) => {
 					mhsf.setFavorites(c);
 				});
-				getMinehutIcons().then((i) => {
-					setIcons(i);
-				});
 			}
 			fetch("https://api.minehut.com/server/" + server + "?byName=true").then(
 				(c) => c.json().then((n) => setServerObject(n.server)),
 			);
+			getMinehutIcons().then((i) => {
+				setIcons(i);
+			});
 			setLoading(false);
 		});
 	}, []);
@@ -411,16 +417,47 @@ export default function AfterServerView({ server }: { server: string }) {
 							</div>
 						)}
 						{view == "icons" && (
-							<div>
+							<div className="col-span-4">
 								<p>
 									Purchased Icons are icons that are under the server's
 									ownership, they may or may not available at that certain
 									moment either.
 								</p>
 								{serverObject?.purchased_icons.map((icon) => (
-									<div key={icon}>
-										{icons?.find((c) => c._id === icon)?.icon_name}
-									</div>
+									<Card key={icon} className="my-4">
+										<CardContent
+											className="pt-4"
+											style={{
+												color: getIndexFromRarity(
+													icons
+														?.find((c) => c._id === icon)
+														?.rank.toLowerCase(),
+												).text,
+											}}
+										>
+											<IconDisplay
+												server={{
+													icon: icons?.find((c) => c._id === icon)?.icon_name,
+												}}
+												className="mr-2"
+											/>
+											{icons?.find((c) => c._id === icon)?.display_name}
+											<span
+												className="mx-2 p-1 pr-2 rounded italic font-bold"
+												style={{
+													backgroundColor: getIndexFromRarity(
+														icons
+															?.find((c) => c._id === icon)
+															?.rank.toLowerCase(),
+													).bg,
+												}}
+											>
+												{icons
+													?.find((c) => c._id === icon)
+													?.rank.toLocaleUpperCase()}
+											</span>
+										</CardContent>
+									</Card>
 								))}
 							</div>
 						)}
diff --git a/src/config/version.tsx b/src/config/version.tsx
index 9374861..6265e8d 100644
--- a/src/config/version.tsx
+++ b/src/config/version.tsx
@@ -54,6 +54,20 @@ const FeatureList = ({
 
 export const version = "1.4.0";
 export const changelog: { name: string; id: string; changelog: ReactNode }[] = [
+	{
+		id: "ywvhtcs4k9rqjfp57x",
+		name: "v1.4.5",
+		changelog: (
+			<FeatureList
+				features={["Add server icons"]}
+				title={
+					<strong className="flex items-center">
+						Version 1.4.5 (November 6th 2024)
+					</strong>
+				}
+			/>
+		),
+	},
 	{
 		id: "amq4suhgcfwrb7y5j6",
 		name: "v1.4.0",
diff --git a/src/lib/types/server-icon.ts b/src/lib/types/server-icon.ts
index a8e54b0..53535ba 100644
--- a/src/lib/types/server-icon.ts
+++ b/src/lib/types/server-icon.ts
@@ -56,3 +56,12 @@ export const rarityIndex = {
 	epic: { bg: "#4c1a7b", text: "#ce59ff" },
 	legendary: { bg: "#de6e0d", text: "#fce8cf" },
 };
+
+export const getIndexFromRarity = (rank: string | undefined) => {
+	if (rank === undefined) {
+		return rarityIndex.common;
+	}
+	return rarityIndex[
+		rank as "common" | "uncommon" | "rare" | "epic" | "legendary"
+	];
+};