diff --git a/src/main/SubtitleEditor.tsx b/src/main/SubtitleEditor.tsx
index 07a957aa3..451e15904 100644
--- a/src/main/SubtitleEditor.tsx
+++ b/src/main/SubtitleEditor.tsx
@@ -167,7 +167,7 @@ const SubtitleEditor: React.FC = () => {
 
 const subtitleButtonStyle = (theme: Theme) => css({
   fontSize: "16px",
-  height: "10px",
+  height: "42px",
   padding: "16px",
   justifyContent: "space-around",
   boxShadow: `${theme.boxShadow}`,
@@ -188,13 +188,13 @@ const DeleteButton: React.FC = () => {
   return (
     <>
       <ThemedTooltip title={t("subtitles.deleteButton-tooltip")}>
-        <div css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
-          role="button"
+        <ProtoButton
           onClick={() => modalRef.current?.open()}
+          css={[basicButtonStyle(theme), subtitleButtonStyle(theme)]}
         >
           <LuTrash2 css={{ fontSize: "16px" }}/>
           <span>{t("subtitles.deleteButton-title")}</span>
-        </div>
+        </ProtoButton>
       </ThemedTooltip>
       {/* Hidden input field for upload */}
       <ConfirmationModal