diff --git a/backend/DTOs/WarrantyCard/WarrantyCardDTO.cs b/backend/DTOs/WarrantyCard/WarrantyCardDTO.cs
index 948eead..8d3789e 100644
--- a/backend/DTOs/WarrantyCard/WarrantyCardDTO.cs
+++ b/backend/DTOs/WarrantyCard/WarrantyCardDTO.cs
@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
+using backend.DTOs.Accessory;
 
 namespace backend.DTOs.WarrantyCard
 {
@@ -13,7 +14,9 @@ public class WarrantyCardDTO
         public string? CustomerName { get; set; }
         public string? AccessoryName { get; set; }
         public string? DiamondName { get; set; }
+        public AccessoryDTO? Accessory { get; set; }
+        public DiamondDTO? Diamond { get; set; }
         public DateTime StartTime { get; set; } = DateTime.Now;
         public DateTime EndTime { get; set; } = DateTime.Now.AddMonths(12);
     }
-}
\ No newline at end of file
+}
diff --git a/backend/Enums/WarrantyStatus.cs b/backend/Enums/WarrantyStatus.cs
index 4920ecf..d3e98f7 100644
--- a/backend/Enums/WarrantyStatus.cs
+++ b/backend/Enums/WarrantyStatus.cs
@@ -9,4 +9,4 @@ public enum WarrantyStatus
         Failed,
         Completed,
     }
-}
\ No newline at end of file
+}
diff --git a/backend/Repository/WarrantyCardRepository.cs b/backend/Repository/WarrantyCardRepository.cs
index 5366df8..6d80298 100644
--- a/backend/Repository/WarrantyCardRepository.cs
+++ b/backend/Repository/WarrantyCardRepository.cs
@@ -5,8 +5,10 @@
 using System.Threading.Tasks;
 using backend.Data;
 using backend.DTOs.WarrantyCard;
+using backend.Enums;
 using backend.Helper;
 using backend.Interfaces;
+using backend.Mappers;
 using backend.Models;
 using Microsoft.EntityFrameworkCore;
 using Microsoft.IdentityModel.Tokens;
@@ -33,23 +35,35 @@ public WarrantyCardRepository(ApplicationDbContext context)
                 .WarrantyCards.Include(x => x.Diamond)
                 .ThenInclude(x => x.Shape)
                 .Include(x => x.Accessory)
-                .Where(x => x.OrderDetail!.Order.CustomerId == userId)
+                .Where(x =>
+                    x.OrderDetail!.Order.CustomerId == userId
+                    && (
+                        // Only get warranty cards that have no request or have warranty requests that are completed
+                        !x.WarrantyRequests.Any()
+                        || x.WarrantyRequests.Any(wr =>
+                            wr.WarrantyStatus == WarrantyStatus.Completed
+                        )
+                    )
+                )
                 .ToListAsync();
             return warrantyCardQueries;
         }
 
         public async Task<WarrantyCardResult?> getWarrantyCards(WarrantyCardQuery query)
         {
-            var warrantyCardQueries = _context.WarrantyCards.Include(x => x.OrderDetail)
+            var warrantyCardQueries = _context
+                .WarrantyCards.Include(x => x.OrderDetail)
                 .ThenInclude(x => x.Order)
+                .Include(x => x.Accessory)
+                .ThenInclude(x => x.AccessoryImages)
                 .AsQueryable();
 
-            // if (query.WarrantyCardId.HasValue)
-            // {
-            //     warrantyCardQueries = warrantyCardQueries.Where(x =>
-            //         x.WarrantyCardId == query.WarrantyCardId
-            //     );
-            // }
+            if (query.WarrantyCardId.HasValue)
+            {
+                warrantyCardQueries = warrantyCardQueries.Where(x =>
+                    x.WarrantyCardId == query.WarrantyCardId
+                );
+            }
             // if (query.DiamondId.HasValue)
             // {
             //     warrantyCardQueries = warrantyCardQueries.Where(x =>
@@ -80,19 +94,18 @@ public WarrantyCardRepository(ApplicationDbContext context)
 
             if (!query.ProductName.IsNullOrEmpty())
             {
-
-                warrantyCardQueries = warrantyCardQueries.Where((x) =>
-                    x.Accessory != null ? 
-                        (
-                        x.Accessory.Name.Contains(query.ProductName!) 
-                        ):(
-                        (x.Diamond!.Carat + " Carat, " + x.Diamond.Shape.Name).Contains(query.ProductName!)
-                        )
+                warrantyCardQueries = warrantyCardQueries.Where(
+                    (x) =>
+                        x.Accessory != null
+                            ? (x.Accessory.Name.Contains(query.ProductName!))
+                            : (
+                                (x.Diamond!.Carat + " Carat, " + x.Diamond.Shape.Name).Contains(
+                                    query.ProductName!
+                                )
+                            )
                 );
             }
 
-
-
             var totalCount = await warrantyCardQueries.CountAsync();
 
             var totalPages = (int)Math.Ceiling(totalCount / (double)query.PageSize);
@@ -106,11 +119,19 @@ public WarrantyCardRepository(ApplicationDbContext context)
                     WarrantyCardId = x.WarrantyCardId,
                     DiamondId = x.DiamondId,
                     AccessoryId = x.AccessoryId,
+                    Accessory = x.Accessory != null ? x.Accessory.ToAccessoryDTO() : null,
+                    Diamond = x.Diamond != null ? x.Diamond.ToDiamondDTO() : null,
                     StartTime = x.StartTime,
                     EndTime = x.EndTime,
-                    CustomerName = x.OrderDetail!.Order.Customer != null ? x.OrderDetail.Order.Customer.Name : null,
+                    CustomerName =
+                        x.OrderDetail!.Order.Customer != null
+                            ? x.OrderDetail.Order.Customer.Name
+                            : null,
                     AccessoryName = x.Accessory != null ? x.Accessory.Name : null,
-                    DiamondName = x.Diamond != null ? x.Diamond.Carat + " Carat, " + x.Diamond.Shape.Name : null
+                    DiamondName =
+                        x.Diamond != null
+                            ? x.Diamond.Carat + " Carat, " + x.Diamond.Shape.Name
+                            : null
                 })
                 .ToListAsync();
 
@@ -123,6 +144,5 @@ public WarrantyCardRepository(ApplicationDbContext context)
                 TotalCount = totalCount
             };
         }
-
     }
 }
diff --git a/frontend/src/components/nav/TopNav.tsx b/frontend/src/components/nav/TopNav.tsx
index 1aa8524..b3297d0 100644
--- a/frontend/src/components/nav/TopNav.tsx
+++ b/frontend/src/components/nav/TopNav.tsx
@@ -16,6 +16,7 @@ import { useCartStore } from "../../store/cartStore";
 import { GET } from "../../utils/request";
 import { jwtDecode } from "jwt-decode";
 import { getCookie } from "../../utils/cookie";
+import { useQueries } from "@tanstack/react-query";
 
 const TopNavItem = ({
   children,
@@ -60,16 +61,24 @@ export default function TopNav() {
   const [diamondDrop, setDiamondDrop] = useState(false);
   const [menuDrop, setMenuDrop] = useState(false);
   const { message } = App.useApp();
-  const [account, setAccount] = useState<any>();
   const location = useLocation();
   const navigate = useNavigate();
-  useEffect(() => {
-    const fetchData = async () => {
-      const response = await GET("/api/Accounts/me");
-      setAccount(response);
-    };
-    fetchData();
-  }, [location, account]);
+  // useEffect(() => {
+  //   const fetchData = async () => {
+  //     const response = await GET("/api/Accounts/me");
+  //     setAccount(response);
+  //   };
+  //   fetchData();
+  // }, [location, account]);
+  const [info] = useQueries({
+    queries: [
+      {
+        queryKey: ["info"],
+        queryFn: () => GET("/api/Accounts/me"),
+        staleTime: Infinity,
+      },
+    ],
+  });
   return (
     <div className="top-0 left-0 relative gap-4 py-3 px-4 bg-white w-full shadow-lg h-full">
       <div className="flex justify-between md:hidden">
@@ -102,27 +111,27 @@ export default function TopNav() {
               className="cursor-pointer"
               onClick={async () => {
                 const response = await GET("/api/Accounts/me");
-                console.log(response);    
-                  switch(response.role) {
-                    case "Manager":
-                      navigate("/admin");
-                      break;
-                    case "SaleStaff":
-                      navigate("/admin/sale-staffs");
-                      break;
-                    case "DeliveryStaff":
-                      navigate("/admin/delivery-staffs");
-                      break;
-                    case "Administrator":
-                      navigate("/admin");
-                      break;
-                    case "WarrantyStaff":
-                      navigate("/admin/warranty-request");
-                      break;
-                    default:
-                      navigate("/");
-                      break;
-                  }                
+                console.log(response);
+                switch (response.role) {
+                  case "Manager":
+                    navigate("/admin");
+                    break;
+                  case "SaleStaff":
+                    navigate("/admin/sale-staffs");
+                    break;
+                  case "DeliveryStaff":
+                    navigate("/admin/delivery-staffs");
+                    break;
+                  case "Administrator":
+                    navigate("/admin");
+                    break;
+                  case "WarrantyStaff":
+                    navigate("/admin/warranty-request");
+                    break;
+                  default:
+                    navigate("/");
+                    break;
+                }
               }}
             >
               <LineChart size={20} strokeWidth={2} absoluteStrokeWidth />
@@ -139,9 +148,9 @@ export default function TopNav() {
               )}
             </Link>
           </div>
-          {account && (
+          {info?.data && (
             <div className="text-lg font-semibold text-gray-800 pl-4 py-2">
-              Welcome, {account?.name}
+              Welcome, {info?.data?.name}
             </div>
           )}
           <div
@@ -198,7 +207,7 @@ export default function TopNav() {
             Diamond
           </Link>
           <TopNavItem setMenuDrop={setMenuDrop} href="/blogs">
-            Blogs
+            Blog
           </TopNavItem>
           <TopNavItem setMenuDrop={setMenuDrop} href="/about">
             About us
diff --git a/frontend/src/pages/account/CreateWarrantyRequest.tsx b/frontend/src/pages/account/CreateWarrantyRequest.tsx
index 7ec3291..101927f 100644
--- a/frontend/src/pages/account/CreateWarrantyRequest.tsx
+++ b/frontend/src/pages/account/CreateWarrantyRequest.tsx
@@ -11,13 +11,36 @@ import { useQueries } from "@tanstack/react-query";
 import Loading from "../../components/Loading";
 import moment from "moment";
 import dayjs from "dayjs";
+import WarrantyInfo from "./components/WarrantyInfo";
 
 const phoneRegex = new RegExp(
   /^([+]?[\s0-9]+)?(\d{3}|[(]?[0-9]+[)])?([-]?[\s]?[0-9])+$/
 );
 
+const reasonOptions = [
+  {
+    value: "The ring may need to be resized to fit the wearer's finger",
+    label: "The ring may need to be resized to fit the wearer's finger",
+  },
+  {
+    value: "The prongs holding the diamond in place are loose or broken",
+    label: "The prongs holding the diamond in place are loose or broken",
+  },
+  {
+    value:
+      "Requiring cleaning and polishing to restore diamond ring appearance",
+    label:
+      "Requiring cleaning and polishing to restore diamond ring appearance",
+  },
+  {
+    value: "Upgrade the diamond or redesign the setting for a new look.",
+    label: "Upgrade the diamond or redesign the setting for a new look.",
+  },
+  { value: "Other", label: "Other" },
+];
+
 const schema = z.object({
-  warrantyCardId: z.coerce.number().min(0, "Please choose your product!"),
+  warrantyCardId: z.coerce.number().min(1, "Please choose your product!"),
   phoneNumber: z
     .string()
     .regex(phoneRegex, "Invalid phone number!")
@@ -40,10 +63,13 @@ type Option = {
   value: string;
   label: string;
   key: number;
+  info: any;
 };
 
 export default function CreateWarrantyRequest() {
   const [isLoading, setIsLoading] = useState(false);
+  const [warrantyCardId, setWarrantyCardId] = useState(0);
+  const [reason, setReason] = useState("");
   const navigate = useNavigate();
   const [messageApi, contextHolder] = message.useMessage();
   const [warrantyCards] = useQueries({
@@ -62,25 +88,10 @@ export default function CreateWarrantyRequest() {
       ? `${warrantyCard?.diamond?.carat} ct ${warrantyCard?.diamond?.shape?.name} Shape Diamond #${warrantyCard?.diamond.certificateNumber}`
       : warrantyCard?.accessory?.name,
   }));
-  // const options: Option[] = warrantyCards?.data?.orders
-  //   ?.map((order: any) =>
-  //     order.orderDetails.map((orderDetail: any) => ({
-  //       key: orderDetail.warrantyCardId,
-  //       value: orderDetail.warrantyCardId,
-  //       label: `${orderDetail?.diamond.carat} ct ${
-  //         orderDetail?.diamond.shape
-  //       } Shape Diamond #${orderDetail?.diamond.certificateNumber} ${
-  //         orderDetail?.accessory?.name
-  //           ? "+ " + orderDetail?.accessory?.name
-  //           : ""
-  //       }`,
-  //     }))
-  //   )
-  //   .flat();
 
   console.log(warrantyCards?.data);
 
-  const { control, handleSubmit, reset } = useForm({
+  const { control, handleSubmit, reset, setValue, getValues } = useForm({
     defaultValues: {
       warrantyCardId: "",
       warrantyReason: "",
@@ -109,7 +120,7 @@ export default function CreateWarrantyRequest() {
       }
     })();
   }, [reset]);
-
+  console.log(getValues().warrantyCardId);
   return (
     <>
       {contextHolder}
@@ -119,7 +130,6 @@ export default function CreateWarrantyRequest() {
           <div className="uppercase font-semibold text-xl">
             Request a warranty service
           </div>
-          <div></div>
           <div>
             <Form
               layout="vertical"
@@ -160,8 +170,12 @@ export default function CreateWarrantyRequest() {
                       .localeCompare((optionB?.label ?? "").toLowerCase())
                   }
                   options={options}
+                  onChange={(value) => {
+                    setWarrantyCardId(value);
+                  }}
                 />
               </FormItem>
+              <WarrantyInfo id={warrantyCardId} />
 
               <FormItem
                 className=""
@@ -176,7 +190,7 @@ export default function CreateWarrantyRequest() {
                 />
               </FormItem>
               <FormItem
-                label="Receive time (The day delivery staff can come to get your item)"
+                label="Receive date (The day delivery staff can come to get your item)"
                 name="receiveTime"
                 control={control}
                 className="w-full"
@@ -200,19 +214,40 @@ export default function CreateWarrantyRequest() {
                   className="border text-sm py-2 px-2 without-ring w-full rounded-none"
                 />
               </FormItem>
-              <FormItem
-                className="col-span-2"
-                label="Warranty reason"
-                name="warrantyReason"
-                control={control}
-                required
-              >
-                <Input.TextArea
-                  rows={4}
-                  placeholder="Describe the problem happen with your product (What need to be fixed)"
-                  className="text-black text-sm border py-2 px-2 without-ring w-full rounded-none"
+
+              <div className="col-span-2 mb-4">
+                <div className="flex items-center gap-2">
+                  <span className="text-red-500 text-xl">*</span> Warranty
+                  reason
+                </div>
+                <Select
+                  size="large"
+                  className="font-thin border w-full text-sm"
+                  options={reasonOptions}
+                  onChange={(e: any) => {
+                    setReason(e);
+                    if (e != "Other") {
+                      setValue("warrantyReason", e);
+                    } else {
+                      setValue("warrantyReason", "");
+                    }
+                  }}
                 />
-              </FormItem>
+              </div>
+              {reason == "Other" && (
+                <FormItem
+                  className="mt-4 col-span-2"
+                  name="warrantyReason"
+                  control={control}
+                  required
+                >
+                  <Input.TextArea
+                    rows={4}
+                    placeholder="Describe the problem happen with your product (What need to be fixed)"
+                    className="text-black text-sm border py-2 px-2 without-ring w-full rounded-none"
+                  />
+                </FormItem>
+              )}
               <div className="w-[100px]">
                 <Form.Item className="mb-0">
                   <Button
diff --git a/frontend/src/pages/account/components/WarrantyInfo.tsx b/frontend/src/pages/account/components/WarrantyInfo.tsx
new file mode 100644
index 0000000..6f4b18a
--- /dev/null
+++ b/frontend/src/pages/account/components/WarrantyInfo.tsx
@@ -0,0 +1,88 @@
+import { useQueries } from "@tanstack/react-query";
+import { GET } from "../../../utils/request";
+
+const DiamondInfo = ({ diamond }: { diamond: any }) => {
+  return (
+    <div className="flex gap-4">
+      <img
+        className="w-[140px] aspect-square object-cover"
+        src={diamond?.imageUrl}
+      />
+      <div className="max-h-[100px] text-lg grid grid-cols-2 gap-x-2">
+        <div className="col-span-2">
+          <span className="font-bold">Certificate Number: </span>
+          {diamond?.certificateNumber}
+        </div>
+        <div>
+          <span className="font-bold">Carat: </span>
+          {diamond?.carat}
+        </div>
+        <div>
+          <span className="font-bold">Color: </span>
+          {diamond?.color}
+        </div>
+        <div>
+          <span className="font-bold">Clarity: </span>
+          {diamond?.clarity}
+        </div>
+        <div>
+          <span className="font-bold">Cut: </span>
+          {diamond?.cut}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const AccessoryInfo = ({ accessory }: { accessory: any }) => {
+  return (
+    <div className="flex gap-4">
+      <img
+        className="w-[140px] aspect-square object-cover border"
+        src={accessory?.accessoryImages[0].url}
+      />
+      <div className="max-h-[60px] text-lg grid grid-cols-2 gap-x-3">
+        <div className="col-span-2">
+          <span className="font-bold">Name: </span>
+          {accessory?.name}
+        </div>
+        <div>
+          <span className="font-bold">Material Weight: </span>
+          {accessory?.materialWeight.toFixed(2)} g
+        </div>
+        <div>
+          <span className="font-bold">Karat: </span>
+          {accessory?.karat}K
+        </div>
+      </div>
+    </div>
+  );
+};
+export default function WarrantyInfo({ id }: { id: any }) {
+  const [warrantyCard] = useQueries({
+    queries: [
+      {
+        queryKey: ["warrantyCard", id],
+        queryFn: () => GET(`/api/WarrantyCards?WarrantyCardId=${id}`),
+        staleTime: 0,
+      },
+    ],
+  });
+  console.log(warrantyCard?.data?.warrantyCards);
+  const data = warrantyCard?.data?.warrantyCards;
+  return (
+    id != 0 && (
+      <div className="col-span-2 mb-4">
+        {warrantyCard?.data?.warrantyCards[0]?.diamondId != null ? (
+          <DiamondInfo
+            diamond={warrantyCard?.data?.warrantyCards[0]?.diamond}
+          />
+        ) : (
+          <AccessoryInfo
+            accessory={warrantyCard?.data?.warrantyCards[0]?.accessory}
+          />
+        )}
+      </div>
+    )
+  );
+}
diff --git a/frontend/src/pages/dashboard/accessory/AccessoryView.tsx b/frontend/src/pages/dashboard/accessory/AccessoryView.tsx
index a317f44..0fa180c 100644
--- a/frontend/src/pages/dashboard/accessory/AccessoryView.tsx
+++ b/frontend/src/pages/dashboard/accessory/AccessoryView.tsx
@@ -21,6 +21,19 @@ import UploadImage from "./components/UploadImage";
 import { storage } from "../../../utils/firebase";
 import { useMutation, useQueries, useQueryClient } from "@tanstack/react-query";
 
+const shapeOptions = [
+  { value: 1, label: "Round" },
+  { value: 2, label: "Emerald" },
+  { value: 3, label: "Heart" },
+  { value: 4, label: "Pear" },
+  { value: 5, label: "Oval" },
+  { value: 6, label: "Cushion" },
+  { value: 7, label: "Princess" },
+  { value: 8, label: "Radiant" },
+  { value: 9, label: "Marquise" },
+  { value: 10, label: "Asscher" },
+];
+
 const schema = z.object({
   name: z
     .string()
@@ -259,11 +272,7 @@ export default function AccessoryView() {
             <Select
               size="large"
               className="font-thin border w-full text-sm"
-              options={[
-                { value: "Round", label: "Round" },
-                { value: "Emerald", label: "Emerald" },
-                { value: "Oval", label: "Oval" },
-              ]}
+              options={shapeOptions}
             />
           </FormItem>
           <FormItem
diff --git a/frontend/src/pages/dashboard/diamond/DiamondView.tsx b/frontend/src/pages/dashboard/diamond/DiamondView.tsx
index ec37110..dee545e 100644
--- a/frontend/src/pages/dashboard/diamond/DiamondView.tsx
+++ b/frontend/src/pages/dashboard/diamond/DiamondView.tsx
@@ -54,6 +54,7 @@ const Clarity = {
   I2: "I2",
   I3: "I3",
 };
+
 const shapeOptions = [
   { value: 1, label: "Round" },
   { value: 2, label: "Emerald" },
diff --git a/frontend/src/pages/product/diamond/components/Filter.tsx b/frontend/src/pages/product/diamond/components/Filter.tsx
index 6823bde..00f3e23 100644
--- a/frontend/src/pages/product/diamond/components/Filter.tsx
+++ b/frontend/src/pages/product/diamond/components/Filter.tsx
@@ -41,13 +41,6 @@ const color: { [key: number]: string } = {
   18: "D",
 };
 
-// const cut: { [key: number]: string } = {
-//   0: "Ideal",
-//   1: "Excellent",
-//   2: "Very Good",
-//   3: "Good",
-// };
-
 const carat: { [key: number]: string } = {
   0: "0",
   1: "1",
@@ -60,6 +53,27 @@ const carat: { [key: number]: string } = {
   8: "8",
 };
 
+const info = {
+  carat: {
+    title: "Carat",
+    description:
+      "Carat is the unit of measurement for the physical weight of diamonds. One carat equals 0.200 grams or 1/5 gram and is subdivided into 100 points. One carat equals 0.007 ounce avoirdupois. Which would require over 2,265 carats to equal 1 pound!",
+    img: "https://kimcuongdaquy.info/wp-content/uploads/2019/04/Hero_Carat-Weight_990x500.jpg",
+  },
+  clarity: {
+    title: "Clarity",
+    description:
+      "Diamond purity, also known as clarity/cleanliness, is a qualitative measure that evaluates the appearance of each diamond. The fewer impurities and imperfections a diamond has, the higher its purity.",
+    img: "https://kimcuongdaquy.info/wp-content/uploads/2019/04/diamond-clarity-1-e1629346957837-1024x390.jpg",
+  },
+  color: {
+    title: "Color",
+    description:
+      "Diamond color is a measurable grade given to an individual diamond to quantify how colorless it is along a standardized diamond color chart. The higher-rated diamonds will be as close to colorless as possible, while lower-rated diamonds will often have an increasingly noticeable coloration tint as the ratings move along the color diamond scale chart.",
+    img: "https://www.iconicjewelry.com/app/uploads/2017/07/color-of-a-diamond-2923-diamond-color-clarity-chart-2920-x-870-copy.jpg",
+  },
+};
+
 const items = [
   {
     element: <Round className="w-[50px] h-[50px]" />,
@@ -141,7 +155,7 @@ export default function Filter() {
         /> */}
         <SliderItem
           step={0.01}
-          title="BY CARAT"
+          info={info.carat}
           mark={carat}
           min={0}
           max={8}
@@ -160,7 +174,7 @@ export default function Filter() {
         />
       </div>
       <SliderItem
-        title="BY CLARITY"
+        info={info.clarity}
         mark={clarity}
         min={0}
         max={11}
@@ -178,7 +192,7 @@ export default function Filter() {
         }}
       />
       <SliderItem
-        title="BY COLOR"
+        info={info.color}
         mark={color}
         min={9}
         max={18}
diff --git a/frontend/src/pages/product/diamond/components/SliderItem.tsx b/frontend/src/pages/product/diamond/components/SliderItem.tsx
index 4984d94..4b8e63b 100644
--- a/frontend/src/pages/product/diamond/components/SliderItem.tsx
+++ b/frontend/src/pages/product/diamond/components/SliderItem.tsx
@@ -1,17 +1,37 @@
-import { Slider } from "antd";
+import { Popover, Slider } from "antd";
 import { useDebouncedCallback } from "use-debounce";
 import scrollTo from "../../../../utils/scroll";
+import { CircleHelp } from "lucide-react";
+import { Link } from "react-router-dom";
+
+const Content = (description: string, img: string) => {
+  return (
+    <div className="w-[400px] text-sm">
+      {description}
+      <div
+        className="w-full h-[100px] bg-no-repeat bg-cover bg-center mt-2 rounded-lg"
+        style={{
+          backgroundImage: `url(${img})`,
+        }}
+      ></div>
+      <Link className="mt-2 block text-blue-500" to={"/blogs/1"}>
+        More detail
+      </Link>
+    </div>
+  );
+};
+
 export default function SliderItem({
   mark,
   min,
   max,
   defaultValue,
-  title,
+  info,
   step,
   debounceCallback,
 }: {
   step?: number;
-  title: string;
+  info: any;
   mark: { [key: number]: string };
   min: number;
   max: number;
@@ -19,10 +39,19 @@ export default function SliderItem({
   debounceCallback: any;
 }) {
   const debounced = useDebouncedCallback(debounceCallback, 800);
-
   return (
     <div className="flex flex-col">
-      <div className="font-bold mulish-regular mb-2">{title}</div>
+      <div className="font-bold mulish-regular mb-2 flex items-center gap-2">
+        BY {info.title.toUpperCase()}
+        <Popover
+          placement="right"
+          content={Content(info.description, info.img)}
+          title={info.title}
+          trigger="hover"
+        >
+          <CircleHelp className="cursor-pointer w-5 h-5 inline" />
+        </Popover>
+      </div>
       <div className="w-full">
         <Slider
           onChange={(value) => {