diff --git a/src/pages/shop/section/productList/components/ModalBuy.tsx b/src/pages/shop/section/productList/components/ModalBuy.tsx
index efe4d41..69ead53 100644
--- a/src/pages/shop/section/productList/components/ModalBuy.tsx
+++ b/src/pages/shop/section/productList/components/ModalBuy.tsx
@@ -57,7 +57,7 @@ const ModalBuy = ({ isOpen, setIsOpen, configId }: ModalBuyProps) => {
   const hasExtraDescription = Boolean(
     data?.data?.result?.has_extra_description
   );
-  const extraDescription = data?.data?.result?.extra_description ?? "";
+  const extraDescriptionSections = data?.data?.result?.extra_description ?? [];
   const advancedVerificationFromApi =
     data?.data?.result?.requires_advanced_verification;
   const hasAdvancedVerificationApiFlag =
@@ -246,7 +246,7 @@ const ModalBuy = ({ isOpen, setIsOpen, configId }: ModalBuyProps) => {
     <ModalDnsServiceInfo
       isOpen={isInfoOpen}
       setIsOpen={setIsInfoOpen}
-      description={extraDescription}
+      sections={extraDescriptionSections}
     />
     <MuiModal
       isOpenModal={isOpen}
diff --git a/src/pages/shop/section/productList/components/ModalDnsServiceInfo.tsx b/src/pages/shop/section/productList/components/ModalDnsServiceInfo.tsx
index 58493a6..d2d85fd 100644
--- a/src/pages/shop/section/productList/components/ModalDnsServiceInfo.tsx
+++ b/src/pages/shop/section/productList/components/ModalDnsServiceInfo.tsx
@@ -1,16 +1,40 @@
 import { Dispatch, SetStateAction } from "react";
 import MuiModal from "../../../../../common/modal";
 
+interface DescriptionSection {
+  emoji?: string;
+  title?: string;
+  items?: string[];
+}
+
 interface ModalDnsServiceInfoProps {
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
-  description?: string | null;
+  sections?: DescriptionSection[];
 }
 
+const Section = ({
+  emoji,
+  title,
+  children,
+}: {
+  emoji?: string;
+  title?: string;
+  children: React.ReactNode;
+}) => (
+  <div className="w-full flex flex-col gap-2 bg-gray-900/60 border border-gray-700 rounded-lg p-3">
+    <div className="flex flex-row-reverse items-center gap-1.5 text-secondTheme font-bold">
+      {emoji && <span>{emoji}</span>}
+      {title && <span>{title}</span>}
+    </div>
+    {children}
+  </div>
+);
+
 const ModalDnsServiceInfo = ({
   isOpen,
   setIsOpen,
-  description,
+  sections,
 }: ModalDnsServiceInfoProps) => {
   return (
     <MuiModal
@@ -20,9 +44,27 @@ const ModalDnsServiceInfo = ({
       nameService="توضیحات سرویس"
     >
       <div className="w-full h-full flex flex-col gap-3 max-sm:text-xs max-md:text-sm text-base">
-        <p className="w-full whitespace-pre-line leading-7 text-gray-200 text-start">
-          {description}
-        </p>
+        {(sections ?? []).map((section, sectionIndex) => (
+          <Section
+            key={sectionIndex}
+            emoji={section.emoji}
+            title={section.title}
+          >
+            {section.items && section.items.length > 0 && (
+              <ul className="flex flex-col gap-1.5">
+                {section.items.map((item, itemIndex) => (
+                  <li
+                    key={itemIndex}
+                    className="flex flex-row-reverse items-start gap-2 text-gray-200"
+                  >
+                    <span className="shrink-0">🔹</span>
+                    <span className="text-start leading-6">{item}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </Section>
+        ))}
       </div>
     </MuiModal>
   );