diff --git a/packages/ui/src/progress/linear-progress-indicator.tsx b/packages/ui/src/progress/linear-progress-indicator.tsx
index 467285024..7cf9717a0 100644
--- a/packages/ui/src/progress/linear-progress-indicator.tsx
+++ b/packages/ui/src/progress/linear-progress-indicator.tsx
@@ -1,13 +1,20 @@
 import React from "react";
 import { Tooltip } from "../tooltip";
+import { cn } from "../../helpers";
 
 type Props = {
   data: any;
   noTooltip?: boolean;
   inPercentage?: boolean;
+  size?: "sm" | "md" | "lg";
 };
 
-export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip = false, inPercentage = false }) => {
+export const LinearProgressIndicator: React.FC<Props> = ({
+  data,
+  noTooltip = false,
+  inPercentage = false,
+  size = "sm",
+}) => {
   const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let progress = 0;
@@ -23,18 +30,24 @@ export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip = fal
     if (noTooltip) return <div style={style} />;
     else
       return (
-        <Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}%`}>
-          <div style={style} className="first:rounded-l-full last:rounded-r-full" />
+        <Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}${inPercentage ? "%" : ""}`}>
+          <div style={style} className="first:rounded-l-sm last:rounded-r-sm" />
         </Tooltip>
       );
   });
 
   return (
-    <div className="flex h-1 w-full items-center justify-between gap-1">
+    <div
+      className={cn("flex w-full items-center justify-between gap-[1px] rounded-sm", {
+        "h-2": size === "sm",
+        "h-3": size === "md",
+        "h-3.5": size === "lg",
+      })}
+    >
       {total === 0 ? (
-        <div className="flex h-full w-full gap-1 bg-neutral-500">{bars}</div>
+        <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
       ) : (
-        <div className="flex h-full w-full gap-1">{bars}</div>
+        <div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
       )}
     </div>
   );
diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
index b1d144d15..12d836695 100644
--- a/web/components/cycles/active-cycle-details.tsx
+++ b/web/components/cycles/active-cycle-details.tsx
@@ -165,7 +165,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
                     <h3 className="break-words text-lg font-semibold">{truncateText(activeCycle.name, 70)}</h3>
                   </Tooltip>
                 </span>
-                <span className="flex items-center gap-1 capitalize">
+                <span className="flex items-center gap-1">
                   <span className="flex gap-1 whitespace-nowrap rounded-sm text-sm px-3 py-0.5 bg-amber-500/10 text-amber-500">
                     {`${daysLeft} ${daysLeft > 1 ? "days" : "day"} left`}
                   </span>
@@ -255,7 +255,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
             <div className="flex h-full w-full flex-col p-4 text-custom-text-200">
               <div className="flex w-full items-center gap-2 py-1">
                 <span>Progress</span>
-                <LinearProgressIndicator data={progressIndicatorData} inPercentage />
+                <LinearProgressIndicator size="md" data={progressIndicatorData} inPercentage />
               </div>
               <div className="mt-2 flex flex-col items-center gap-1">
                 {Object.keys(groupedIssues).map((group, index) => (