diff --git a/Iceshrimp.Frontend/Components/EmojiManagementEntry.razor b/Iceshrimp.Frontend/Components/EmojiManagementEntry.razor
new file mode 100644
index 00000000..6c208b99
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/EmojiManagementEntry.razor
@@ -0,0 +1,37 @@
+@using Iceshrimp.Frontend.Localization
+@using Iceshrimp.Shared.Schemas.Web
+@using Microsoft.Extensions.Localization
+@using Iceshrimp.Assets.PhosphorIcons
+@inject IStringLocalizer<Localization> Loc;
+
+<div class="emoji-entry">
+    <InlineEmoji Name="@Emoji.Name" Url="@Emoji.PublicUrl" Size="3rem"/>
+    <div class="emoji-details">
+        <span class="emoji-name">@Emoji.Name</span>
+        <span>
+            @foreach (var alias in Emoji.Aliases)
+            {
+                <span class="emoji-alias">@alias</span>
+            }
+        </span>
+        <span class="labels">
+            @if (Source == "remote")
+            {
+                <Icon Name="Icons.ArrowSquareOut" title="@Loc["Remote"]"/>
+            }
+            @if (Emoji.Sensitive)
+            {
+                <Icon Name="Icons.EyeSlash" title="@Loc["Sensitive"]"/>
+            }
+            @if (!string.IsNullOrWhiteSpace(Emoji.License))
+            {
+                <Icon Name="Icons.Article" title="@Emoji.License"/>
+            }
+        </span>
+    </div>
+</div>
+
+@code {
+    [Parameter, EditorRequired] public required EmojiResponse Emoji  { get; set; }
+    [Parameter, EditorRequired] public required string        Source { get; set; }
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/EmojiManagementEntry.razor.css b/Iceshrimp.Frontend/Components/EmojiManagementEntry.razor.css
new file mode 100644
index 00000000..4e2bf636
--- /dev/null
+++ b/Iceshrimp.Frontend/Components/EmojiManagementEntry.razor.css
@@ -0,0 +1,46 @@
+.emoji-entry {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background-color: var(--foreground-color);
+    border-radius: 0.5rem;
+    cursor: pointer;
+}
+
+.emoji-entry:hover {
+    background-color: var(--hover-color);
+}
+
+.emoji-details {
+    display: flex;
+    flex-direction: column;
+    text-wrap: wrap;
+    word-break: break-all;
+    word-wrap: break-word;
+}
+
+.emoji-name::before,
+.emoji-name::after {
+    display: inline;
+    content: ":";
+    opacity: 0.7;
+}
+
+.emoji-alias {
+    opacity: 0.7;
+    font-size: 0.8em;
+}
+
+.emoji-alias::before,
+.emoji-alias::after {
+    display: inline;
+    content: ":";
+}
+
+::deep {
+    .labels .ph {
+        display: inline-block;
+        line-height: 1;
+        color: var(--notice-color);
+    }
+}
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor b/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor
index 7efbd6b6..5b8c99dc 100644
--- a/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor
+++ b/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor
@@ -38,32 +38,7 @@
             <div class="emoji-list">
                 @foreach (var emoji in category.Value)
                 {
-                    <div class="emoji-entry">
-                        <InlineEmoji Name="@emoji.Name" Url="@emoji.PublicUrl" Size="3rem"/>
-                        <div class="emoji-details">
-                            <span class="emoji-name">@emoji.Name</span>
-                            <span>
-                                @foreach (var alias in emoji.Aliases)
-                                {
-                                    <span class="emoji-alias">@alias</span>
-                                }
-                            </span>
-                            <span class="labels">
-                                @if (Source == "remote")
-                                {
-                                    <Icon Name="Icons.ArrowSquareOut" title="@Loc["Remote"]"/>
-                                }
-                                @if (emoji.Sensitive)
-                                {
-                                    <Icon Name="Icons.EyeSlash" title="@Loc["Sensitive"]"/>
-                                }
-                                @if (!string.IsNullOrWhiteSpace(emoji.License))
-                                {
-                                    <Icon Name="Icons.Article" title="@emoji.License"/>
-                                }
-                            </span>
-                        </div>
-                    </div>
+                    <EmojiManagementEntry Emoji="@emoji" Source="@Source"/>
                 }
             </div>
         }
diff --git a/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor.css b/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor.css
index b90f71bf..3206a43d 100644
--- a/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor.css
+++ b/Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor.css
@@ -25,48 +25,6 @@
     width: 100%;
 }
 
-.emoji-entry {
-    display: flex;
-    gap: 0.5rem;
-    padding: 0.5rem;
-    background-color: var(--foreground-color);
-    border-radius: 0.5rem;
-}
-
-.emoji-details {
-    display: flex;
-    flex-direction: column;
-    text-wrap: wrap;
-    word-break: break-all;
-    word-wrap: break-word;
-}
-
-.emoji-name::before,
-.emoji-name::after {
-    display: inline;
-    content: ":";
-    opacity: 0.7;
-}
-
-.emoji-alias {
-    opacity: 0.7;
-    font-size: 0.8em;
-}
-
-.emoji-alias::before,
-.emoji-alias::after {
-    display: inline;
-    content: ":";
-}
-
-::deep {
-    .labels .ph {
-        display: inline-block;
-        line-height: 1;
-        color: var(--notice-color);
-    }
-}
-
 @media (max-width: 1000px) {
     .emoji-list {
         grid-template-columns: 1fr;