diff --git a/code/game/verbs/records.dm b/code/game/verbs/records.dm
index c421b28fe581..1997e80eec1b 100644
--- a/code/game/verbs/records.dm
+++ b/code/game/verbs/records.dm
@@ -184,6 +184,8 @@
 
 GLOBAL_DATUM_INIT(medals_view_tgui, /datum/medals_view_tgui, new)
 
+GLOBAL_SUBTYPE_PATHS_LIST_INDEXED(all_medals, /obj/item/clothing/accessory/medal, name)
+
 /datum/medals_view_tgui/tgui_interact(mob/user, datum/tgui/ui)
 	ui = SStgui.try_update_ui(user, src, ui)
 	if(!ui)
@@ -195,18 +197,26 @@ GLOBAL_DATUM_INIT(medals_view_tgui, /datum/medals_view_tgui, new)
 	.["medals"] = list()
 
 	for(var/datum/view_record/medal_view/medal as anything in DB_VIEW(/datum/view_record/medal_view, DB_COMP("player_id"), DB_EQUALS, user.client.player_data.id))
-		.["medals"] += list(
+		var/list/current_medal = list(
 			"round_id" = medal.round_id,
 			"medal_type" = medal.medal_type,
+			"medal_icon" = replacetext(medal.medal_type, " ", "-"),
 			"recipient_name" = medal.recipient_name,
 			"recipient_role" = medal.recipient_role,
 			"giver_name" = medal.giver_name,
 			"citation" = medal.citation
 		)
 
-/datum/medals_view_tgui/ui_status(mob/user, datum/ui_state/state)
+		.["medals"] += list(current_medal)
+
+/datum/medals_view_tgui/ui_state(mob/user)
 	return GLOB.always_state
 
+/datum/medals_view_tgui/ui_assets(mob/user)
+	return list(
+		get_asset_datum(/datum/asset/spritesheet/medal)
+	)
+
 /client/verb/view_own_medals()
 	set name = "View Own Medals"
 	set category = "OOC.Records"
diff --git a/code/modules/asset_cache/assets/medals.dm b/code/modules/asset_cache/assets/medals.dm
new file mode 100644
index 000000000000..1d7214331e65
--- /dev/null
+++ b/code/modules/asset_cache/assets/medals.dm
@@ -0,0 +1,10 @@
+/datum/asset/spritesheet/medal
+	name = "medal"
+
+/datum/asset/spritesheet/medal/register()
+	for(var/obj/item/clothing/accessory/medal/medal as anything in subtypesof(/obj/item/clothing/accessory/medal))
+		var/icon/current_icon = icon(initial(medal.icon), initial(medal.icon_state), SOUTH)
+		var/imgid = replacetext("[initial(medal.name)]", " ", "-")
+
+		Insert(imgid, current_icon)
+	return ..()
diff --git a/colonialmarines.dme b/colonialmarines.dme
index a2c032428adf..b24f5afe14c4 100644
--- a/colonialmarines.dme
+++ b/colonialmarines.dme
@@ -1458,6 +1458,7 @@
 #include "code\modules\asset_cache\asset_list.dm"
 #include "code\modules\asset_cache\asset_list_items.dm"
 #include "code\modules\asset_cache\assets\fontawesome.dm"
+#include "code\modules\asset_cache\assets\medals.dm"
 #include "code\modules\asset_cache\assets\tgfont.dm"
 #include "code\modules\asset_cache\assets\tgui.dm"
 #include "code\modules\asset_cache\assets\vending.dm"
diff --git a/tgui/packages/tgui/interfaces/MedalsViewer.tsx b/tgui/packages/tgui/interfaces/MedalsViewer.tsx
index 6fd0914d0ffa..cf84bcc77b79 100644
--- a/tgui/packages/tgui/interfaces/MedalsViewer.tsx
+++ b/tgui/packages/tgui/interfaces/MedalsViewer.tsx
@@ -1,5 +1,6 @@
+import { classes } from 'common/react';
 import { useBackend } from '../backend';
-import { Flex } from '../components';
+import { Section } from '../components';
 import { Window } from '../layouts';
 
 interface MedalProps {
@@ -9,6 +10,7 @@ interface MedalProps {
 interface Medal {
   round_id: string;
   medal_type?: string;
+  medal_icon?: string;
   recipient_name?: string;
   recipient_role?: string;
   giver_name?: string;
@@ -20,20 +22,31 @@ export const MedalsViewer = (props, context) => {
   const { medals } = data;
 
   return (
-    <Window width={350} height={350}>
+    <Window width={700} height={350}>
       <Window.Content scrollable>
-        <Flex direction="column">
-          {medals.map((medal) => {
-            return (
-              <Flex.Item key={medal.citation}>
-                {medal.round_id}: {medal.medal_type} issued to{' '}
-                {medal.recipient_name} ({medal.recipient_role}) by{' '}
-                {medal.giver_name} for: <br />
-                {medal.citation}
-              </Flex.Item>
-            );
-          })}
-        </Flex>
+        {medals.map((medal) => {
+          const medalType = medal.medal_type
+            ? medal.medal_type
+            : 'Unknown Medal';
+          const sectionTitle = `Round ${medal.round_id} - ${medalType}`;
+          return (
+            <Section key={medal.citation} title={sectionTitle}>
+              Issued to{' '}
+              <b>
+                {medal.recipient_name} ({medal.recipient_role})
+              </b>{' '}
+              by <b>{medal.giver_name}</b> for: <br />
+              <span
+                className={classes([
+                  'medal32x32',
+                  medal.medal_icon,
+                  'medal-icon',
+                ])}
+              />
+              {medal.citation}
+            </Section>
+          );
+        })}
       </Window.Content>
     </Window>
   );
diff --git a/tgui/packages/tgui/styles/interfaces/MedalsViewer.scss b/tgui/packages/tgui/styles/interfaces/MedalsViewer.scss
new file mode 100644
index 000000000000..78a604ea6554
--- /dev/null
+++ b/tgui/packages/tgui/styles/interfaces/MedalsViewer.scss
@@ -0,0 +1,3 @@
+.medal-icon {
+  vertical-align: -50%;
+}
diff --git a/tgui/packages/tgui/styles/main.scss b/tgui/packages/tgui/styles/main.scss
index 1614d2129f35..bf1e77eb9f9a 100644
--- a/tgui/packages/tgui/styles/main.scss
+++ b/tgui/packages/tgui/styles/main.scss
@@ -54,6 +54,7 @@
 @include meta.load-css('./interfaces/ElevatorControl.scss');
 @include meta.load-css('./interfaces/ExperimentConfigure.scss');
 @include meta.load-css('./interfaces/MarkMenu.scss');
+@include meta.load-css('./interfaces/MedalsViewer.scss');
 @include meta.load-css('./interfaces/NavigationShuttle.scss');
 @include meta.load-css('./interfaces/NuclearBomb.scss');
 @include meta.load-css('./interfaces/Paper.scss');