diff --git a/apps/client/src/features/comment/components/comment-actions.tsx b/apps/client/src/features/comment/components/comment-actions.tsx
index 9249a072..e5c4f1a2 100644
--- a/apps/client/src/features/comment/components/comment-actions.tsx
+++ b/apps/client/src/features/comment/components/comment-actions.tsx
@@ -4,13 +4,26 @@ import { useTranslation } from "react-i18next";
 type CommentActionsProps = {
   onSave: () => void;
   isLoading?: boolean;
+  onCancel?: () => void;
+  isCommentEditor?: boolean;
 };
 
-function CommentActions({ onSave, isLoading }: CommentActionsProps) {
+function CommentActions({
+  onSave,
+  isLoading,
+  onCancel,
+  isCommentEditor,
+}: CommentActionsProps) {
   const { t } = useTranslation();
-
+  
   return (
-    <Group justify="flex-end" pt={2} wrap="nowrap">
+    <Group justify="flex-end" pt="sm" wrap="nowrap">
+      {isCommentEditor && (
+        <Button size="compact-sm" variant="default" onClick={onCancel}>
+          {t("Cancel")}
+        </Button>
+      )}
+
       <Button size="compact-sm" loading={isLoading} onClick={onSave}>
         {t("Save")}
       </Button>
diff --git a/apps/client/src/features/comment/components/comment-list-item.tsx b/apps/client/src/features/comment/components/comment-list-item.tsx
index e27bfa79..293c4f9e 100644
--- a/apps/client/src/features/comment/components/comment-list-item.tsx
+++ b/apps/client/src/features/comment/components/comment-list-item.tsx
@@ -58,6 +58,9 @@ function CommentListItem({ comment }: CommentListItemProps) {
   function handleEditToggle() {
     setIsEditing(true);
   }
+  function cancelEdit() {
+    setIsEditing(false);
+  }
 
   return (
     <Box ref={ref} pb="xs">
@@ -115,6 +118,8 @@ function CommentListItem({ comment }: CommentListItemProps) {
             <CommentActions
               onSave={handleUpdateComment}
               isLoading={isLoading}
+              onCancel={cancelEdit}
+              isCommentEditor={true}
             />
           </>
         )}