diff --git a/components/DocsSidebarNavigation.jsx b/components/DocsSidebarNavigation.jsx
index 3e9fbe9..d1ca716 100644
--- a/components/DocsSidebarNavigation.jsx
+++ b/components/DocsSidebarNavigation.jsx
@@ -51,7 +51,7 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
           <li key={section.title}>
             <div className="flex items-center">
               <Link href={section.href} passHref>
-                <h2 className="cursor-pointer font-display font-medium text-slate-900 hover:text-slate-600 dark:text-white dark:hover:text-gray-300 block w-full">
+                <h2 className="block w-full cursor-pointer font-display font-medium text-slate-900 hover:text-slate-600 dark:text-white dark:hover:text-gray-300">
                   {section.title}
                 </h2>
               </Link>
@@ -61,7 +61,7 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
               >
                 <svg
                   className={clsx(
-                    'h-4 w-4 transform transition-transform',
+                    'h-4 w-4 transition-transform',
                     expandedSections[section.title] && 'rotate-180'
                   )}
                   xmlns="http://www.w3.org/2000/svg"
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
index 0cff0b9..0a65dcc 100644
--- a/components/ui/accordion.tsx
+++ b/components/ui/accordion.tsx
@@ -24,7 +24,7 @@ const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex my-1">
+  <AccordionPrimitive.Header className="my-1 flex">
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
diff --git a/lib/jsonToPhp.js b/lib/jsonToPhp.js
index 2f2a62a..2ec5b6f 100644
--- a/lib/jsonToPhp.js
+++ b/lib/jsonToPhp.js
@@ -1,34 +1,34 @@
 export function jsonToPhp(obj) {
-  const convertArray = (array) => {
-      return array.map(value => {
-          if (typeof value === 'object' && value !== null) {
-              return jsonToPhp(value);
-          } else if (Array.isArray(value)) {
-              return convertArray(value);
-          } else if (typeof value === 'string') {
-              return `'${value.replace(/'/g, "\\'")}'`;
-          } else if (typeof value === 'boolean') {
-              return value ? 'true' : 'false';
-          } else {
-              return value;
-          }
-      }).join(", ");
-  };
-
-  let result = "array(\n";
-  for (const key in obj) {
-      if (obj.hasOwnProperty(key)) {
-          const value = obj[key];
-          result += `\t\t'${key}' => `;
-          if (Array.isArray(value)) {
-              result += convertArray(value) + ",\n";
-          } else if (typeof value === 'object' && value !== null) {
-              result += jsonToPhp(value) + ",\n";
-          } else {
-              result += `${value},\n`;
-          }
-      }
-  }
-  result += "\t)";
-  return result;
-}
\ No newline at end of file
+    const convertArray = (array) => {
+        return array.map(value => {
+            if (typeof value === 'object' && value !== null) {
+                return jsonToPhp(value);
+            } else if (Array.isArray(value)) {
+                return convertArray(value);
+            } else if (typeof value === 'string') {
+                return `'${value.replace(/'/g, "\\'")}'`;
+            } else if (typeof value === 'boolean') {
+                return value ? 'true' : 'false';
+            } else {
+                return value;
+            }
+        }).join(", ");
+    };
+  
+    let result = "array(\n";
+    for (const key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            const value = obj[key];
+            result += `\t\t'${key}' => `;
+            if (Array.isArray(value)) {
+                result += convertArray(value) + ",\n";
+            } else if (typeof value === 'object' && value !== null) {
+                result += jsonToPhp(value) + ",\n";
+            } else {
+                result += `${value},\n`;
+            }
+        }
+    }
+    result += "\t)";
+    return result;
+}
diff --git a/wp-blocks/AcfFieldTypeConfigurationBlock.js b/wp-blocks/AcfFieldTypeConfigurationBlock.js
index 2145773..176b29d 100644
--- a/wp-blocks/AcfFieldTypeConfigurationBlock.js
+++ b/wp-blocks/AcfFieldTypeConfigurationBlock.js
@@ -1,11 +1,12 @@
-import React from 'react';
 import { gql } from '@apollo/client'
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
-import { snakeToPascalCase } from '@/lib/snakeToPascalCase';
+import React from 'react';
+
 import {
   Card,
   CardHeader,
 } from '@/components/ui/card';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { snakeToPascalCase } from '@/lib/snakeToPascalCase';
 
 const EXAMPLE_KEY = 'example_key'
 
diff --git a/wp-blocks/AcfFieldTypeSettingsBlock.js b/wp-blocks/AcfFieldTypeSettingsBlock.js
index 7d1cdb0..8dc4fcd 100644
--- a/wp-blocks/AcfFieldTypeSettingsBlock.js
+++ b/wp-blocks/AcfFieldTypeSettingsBlock.js
@@ -1,34 +1,41 @@
-import React, { useState } from 'react';
 import { gql } from '@apollo/client';
-import Image from 'next/image';
+import clsx from 'clsx'
+import React, { useState } from 'react';
+
 import { Button } from "@/components/ui/button";
-import { Card, CardFooter, CardContent } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 
-const AccordionItem = ({ title, content, isOpen, onClick }) => (
-  <div className="border-b border-gray-300">
-    <Button
-      onClick={onClick}
-      className="py-2 px-4 w-full text-left text-black bg-white hover:bg-gray-100 flex justify-between items-center"
-    >
-      {title}
-      <svg 
-        xmlns="http://www.w3.org/2000/svg" 
-        className="h-4 w-4 transform transition duration-300" 
-        style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }} 
-        fill="none" 
-        viewBox="0 0 24 24" 
-        stroke="currentColor"
-      >
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-      </svg>
-    </Button>
-    {isOpen && (
-      <div className="p-4 bg-white">
-        {content}
-      </div>
-    )}
-  </div>
-);
+const AccordionItem = ({ title, content, isOpen, onClick }) => {
+  const buttonStyles = {
+    closed:
+      'py-2 px-4 w-full text-left bg-white hover:bg-muted flex justify-between items-center text-black dark:bg-gray-800 dark:text-white',
+    open:
+      'py-2 px-4 w-full text-left bg-muted hover:bg-muted flex justify-between items-center text-black dark:text-white',
+  }
+ 
+  return (
+    <div className="dark:border-dark-gray-300 border-b border-gray-300">
+      <Button onClick={onClick} className={clsx(isOpen ? buttonStyles.open : buttonStyles.closed)}>
+        {title}
+        <svg 
+          xmlns="http://www.w3.org/2000/svg" 
+          className="h-4 w-4 transition duration-300" 
+          style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }} 
+          fill="none" 
+          viewBox="0 0 24 24" 
+          stroke="currentColor"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </Button>
+      {isOpen && (
+        <div className="dark:bg-dark-muted bg-muted px-4 py-2">
+          {content}
+        </div>
+      )}
+    </div>
+  )
+}
 
 export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
   const { fieldTypeSettings } = fieldTypeSettingsBlockFields;
@@ -53,7 +60,7 @@ export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
       <Card>
           {fieldTypeSettings?.nodes?.map((item, index) => {
             const { id, name, description, fieldTypeSettingsMeta } = item;
-            const { impactOnWpgraphql, adminScreenshot } = fieldTypeSettingsMeta;
+            const { impactOnWpgraphql } = fieldTypeSettingsMeta;
 
             return (
               <AccordionItem
@@ -61,19 +68,9 @@ export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
                 title={name}
                 content={
                   <>
-                    {adminScreenshot?.node && (
-                      <Image
-                        src={adminScreenshot?.node?.mediaItemUrl}
-                        alt={adminScreenshot?.node?.altText}
-                        width={adminScreenshot?.node?.mediaDetails?.width}
-                        height={adminScreenshot?.node?.mediaDetails?.height}
-                      />
-                    )}
                     {description && <p>{description}</p>}
                     {impactOnWpgraphql && (
-                      <div className="mt-2 p-2 bg-yellow-300">
-                        <span dangerouslySetInnerHTML={{ __html: impactOnWpgraphql }} />
-                      </div>
+                      <span dangerouslySetInnerHTML={{ __html: impactOnWpgraphql }} />
                     )}
                   </>
                 }
@@ -83,10 +80,10 @@ export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) {
             );
           })}
       </Card>
-      <div className="text-center mt-4">
+      <div className="mt-4 text-center">
         <button
           onClick={toggleAll}
-          className="text-blue-500 hover:text-blue-600 underline"
+          className="text-blue-500 underline hover:text-blue-600"
         >
           {openItems.length === fieldTypeSettings.nodes.length ? 'Collapse All' : 'Expand All'}
         </button>
@@ -112,6 +109,7 @@ AcfFieldTypeSettingsBlock.fragments = {
               name
               description
               fieldTypeSettingsMeta {
+                acfFieldName
                 impactOnWpgraphql
                 adminScreenshot {
                   node {
diff --git a/wp-blocks/index.js b/wp-blocks/index.js
index f023151..359c717 100644
--- a/wp-blocks/index.js
+++ b/wp-blocks/index.js
@@ -1,9 +1,9 @@
 import { CoreBlocks } from '@faustwp/blocks'
 
-import { CoreHeading } from './CoreHeading'
-import { AcfGraphqlQuery } from './AcfGraphqlQuery'
-import { AcfFieldTypeSettingsBlock } from './AcfFieldTypeSettingsBlock'
 import { AcfFieldTypeConfigurationBlock } from './AcfFieldTypeConfigurationBlock'
+import { AcfFieldTypeSettingsBlock } from './AcfFieldTypeSettingsBlock'
+import { AcfGraphqlQuery } from './AcfGraphqlQuery'
+import { CoreHeading } from './CoreHeading'
 
 const blocks = {
   ...CoreBlocks,
diff --git a/wp-templates/single-field_type.js b/wp-templates/single-field_type.js
index fa55c9a..55ba9c8 100644
--- a/wp-templates/single-field_type.js
+++ b/wp-templates/single-field_type.js
@@ -7,8 +7,8 @@ import Head from 'next/head'
 import { Layout } from '@/components/Layout'
 import { Badge } from '@/components/ui/badge'
 import blocks from '@/wp-blocks'
-import { AcfFieldTypeSettingsBlock } from '@/wp-blocks/AcfFieldTypeSettingsBlock'
 import { AcfFieldTypeConfigurationBlock } from '@/wp-blocks/AcfFieldTypeConfigurationBlock'
+import { AcfFieldTypeSettingsBlock } from '@/wp-blocks/AcfFieldTypeSettingsBlock'
 import { AcfGraphqlQuery } from '@/wp-blocks/AcfGraphqlQuery'
 
 export const SingleFieldType = ({ data }) => {