diff --git a/web/components/issues/peek-overview/view.tsx b/web/components/issues/peek-overview/view.tsx
index d5b723f66..37f92134d 100644
--- a/web/components/issues/peek-overview/view.tsx
+++ b/web/components/issues/peek-overview/view.tsx
@@ -13,6 +13,8 @@ import {
   ArchiveIssueModal,
   PeekOverviewIssueAttachments,
 } from "@/components/issues";
+// helpers
+import { cn } from "@/helpers/common.helper";
 // hooks
 import { useIssueDetail, useUser } from "@/hooks/store";
 import useKeypress from "@/hooks/use-keypress";
@@ -110,11 +112,14 @@ export const IssueView: FC<IIssueView> = observer((props) => {
         {issueId && (
           <div
             ref={issuePeekOverviewRef}
-            className={`fixed z-20 flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300 
-          ${peekMode === "side-peek" ? `bottom-0 right-0 top-0 w-full md:w-[50%]` : ``}
-          ${peekMode === "modal" ? `left-[50%] top-[50%] h-5/6 w-5/6 -translate-x-[50%] -translate-y-[50%]` : ``}
-          ${peekMode === "full-screen" ? `bottom-0 left-0 right-0 top-0 m-4` : ``}
-          `}
+            className={cn(
+              "fixed z-20 flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300",
+              {
+                "bottom-0 right-0 top-0 w-full md:w-[50%]": peekMode === "side-peek",
+                "size-5/6 top-[8.33%] left-[8.33%]": peekMode === "modal",
+                "inset-0 m-4": peekMode === "full-screen",
+              }
+            )}
             style={{
               boxShadow:
                 "0px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 6px 12px 0px rgba(16, 24, 40, 0.12), 0px 1px 16px 0px rgba(16, 24, 40, 0.12)",