diff --git a/wp-content/themes/ccat/includes/vendors/acf.php b/wp-content/themes/ccat/includes/vendors/acf.php
index 66cedc8..ba23cea 100644
--- a/wp-content/themes/ccat/includes/vendors/acf.php
+++ b/wp-content/themes/ccat/includes/vendors/acf.php
@@ -1,5 +1,12 @@
 <?php
 
+// Google Maps API key
+add_filter( 'acf/fields/google_map/api', 'ccat_acf_google_map_api' );
+function ccat_acf_google_map_api( $api ) {
+	$api['key'] = 'AIzaSyCoB9_Um059jyenVcFfpXTBq-zZAxlBPqk';
+	return $api;
+}
+
 // Override template file path for ACF previews
 add_filter( 'acfe/flexible/render/template', 'ccat_acfe_flexible_render_template', 10, 4 );
 function ccat_acfe_flexible_render_template( $file, $field, $layout, $is_preview ) {
@@ -42,6 +49,13 @@ function ccat_acf_init() {
 	acf_update_setting( 'acfe/modules/templates', false );
 }
 
+// Helper: Get GraphQL field group name for flexible content layout
+function ccat_get_graphql_field_group_name( $field_group_key, $layout_name ) {
+	$field_group_name = \WPGraphQL\Utils\Utils::format_type_name( $field_group_key );
+	$layout_type_name = \WPGraphQL\Utils\Utils::format_type_name( $layout_name );
+	return "{$field_group_name}{$layout_type_name}Layout";
+}
+
 // Helper: Convert field name to GraphQL format
 function ccat_get_graphql_field_name( $field_config ) {
 	return ! empty( $field_config['graphql_field_name'] )
@@ -65,60 +79,18 @@ function ccat_get_graphql_fields_value( $fields, $data ) {
 	return $result;
 }
 
-// Helper: Get current row data in GraphQL format
-function ccat_get_graphql_row_value() {
-	global $acf_loop;
+// Helper: Get current row's preview data in useSection format
+function ccat_get_graphql_preview_data() {
 	if ( empty( $layout_name = get_row_layout() ) ) {
-		return array();
+		throw new Exception( "Erreur de prévisualisation (section invalide)" );
 	}
-
-	// Get layout config
-	$layout_config = null;
-	if ( ! empty( $acf_loop['active']['field']['layouts'] ) ) {
-		foreach ( $acf_loop['active']['field']['layouts'] as $layout ) {
-			if ( $layout['name'] === $layout_name ) {
-				$layout_config = $layout;
-				break;
-			}
+	$result = array(
+		'fieldGroupName' => ccat_get_graphql_field_group_name( 'group_abstract_builder', $layout_name ),
+	);
+	foreach ( get_row( true ) as $key => $value ) {
+		if ( strpos( $key, 'acf_fc_layout' ) !== 0 && strpos( $key, '_' ) !== 0 ) {
+			$result[ ccat_get_graphql_field_name( array( 'name' => $key ) ) ] = $value;
 		}
 	}
-
-	// Fallback to raw data if no config
-	if ( ! $layout_config || ! isset( $layout_config['sub_fields'] ) ) {
-		$raw_data = get_row( true );
-		$result   = array();
-		foreach ( $raw_data as $key => $value ) {
-			if ( strpos( $key, 'acf_fc_layout' ) !== 0 && strpos( $key, '_' ) !== 0 ) {
-				$result[ ccat_get_graphql_field_name( array( 'name' => $key ) ) ] = $value;
-			}
-		}
-		return $result;
-	}
-
-	// Process fields with proper ACF access
-	$result = array();
-	foreach ( $layout_config['sub_fields'] as $field ) {
-		$key = ccat_get_graphql_field_name( $field );
-		if ( $field['type'] === 'repeater' && $field['name'] === 'layout_settings' ) {
-			if ( have_rows( 'layout_settings' ) ) {
-				the_row();
-				$result[ $key ] = ccat_get_graphql_fields_value( $field['sub_fields'], get_row( true ) );
-				wp_reset_postdata();
-			}
-		} else {
-			$value          = get_sub_field( $field['name'] );
-			$result[ $key ] = isset( $field['sub_fields'] ) && $value
-				? ccat_get_graphql_fields_value( $field['sub_fields'], $value )
-				: $value;
-		}
-	}
-
 	return $result;
 }
-
-// Google Maps API key
-add_filter( 'acf/fields/google_map/api', 'ccat_acf_google_map_api' );
-function ccat_acf_google_map_api( $api ) {
-	$api['key'] = 'AIzaSyCoB9_Um059jyenVcFfpXTBq-zZAxlBPqk';
-	return $api;
-}
diff --git a/wp-content/themes/ccat/layouts/preview.php b/wp-content/themes/ccat/layouts/preview.php
index 95d0109..41625c0 100644
--- a/wp-content/themes/ccat/layouts/preview.php
+++ b/wp-content/themes/ccat/layouts/preview.php
@@ -1,9 +1,6 @@
 <?php
-$preview_url = ( defined( 'NUXT_PUBLIC_SITE_URL' ) ? NUXT_PUBLIC_SITE_URL : 'https://cultureat.ca' ) . '/api/acf-preview';
-$data        = array(
-	'fieldGroupName' => get_row_layout(),
-	'value'          => ccat_get_graphql_row_value(),
-);
+$preview_url = ( defined( 'NUXT_PUBLIC_SITE_URL' ) ? NUXT_PUBLIC_SITE_URL : 'https://cultureat.ca' ) . '/api/preview';
+$data        = ccat_get_graphql_preview_data();
 $result      = wp_remote_post( $preview_url, array( 'body' => $data ) );
 if ( is_wp_error( $result ) ) {
 	echo '<div style="color: red;">Erreur: ' . esc_html( $result->get_error_message() ) . '</div>';
diff --git a/wp-content/themes/ccat/nuxt.config.ts b/wp-content/themes/ccat/nuxt.config.ts
index c3f1d4e..27c507a 100644
--- a/wp-content/themes/ccat/nuxt.config.ts
+++ b/wp-content/themes/ccat/nuxt.config.ts
@@ -1,3 +1,5 @@
+import PluginVue from "@vitejs/plugin-vue";
+
 const isDev = process.env.NODE_ENV === "development";
 
 export default defineNuxtConfig({
@@ -48,6 +50,11 @@ export default defineNuxtConfig({
 
   nitro: {
     preset: "cloudflare_module",
+    rollupConfig: {
+      plugins: [
+        PluginVue(),
+      ],
+    },
   },
 
   hub: {
diff --git a/wp-content/themes/ccat/server/api/acf-preview.post.ts b/wp-content/themes/ccat/server/api/acf-preview.post.ts
deleted file mode 100644
index 502ad5e..0000000
--- a/wp-content/themes/ccat/server/api/acf-preview.post.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default defineEventHandler(async (event) => {
-  const body = await readBody(event);
-  console.log(body);
-  return `<div>TODO: Preview from Nuxt API endpoint</div>`;
-});
diff --git a/wp-content/themes/ccat/server/api/preview.post.ts b/wp-content/themes/ccat/server/api/preview.post.ts
new file mode 100644
index 0000000..4899ff4
--- /dev/null
+++ b/wp-content/themes/ccat/server/api/preview.post.ts
@@ -0,0 +1,21 @@
+import { renderToString } from "vue/server-renderer";
+import { createSSRApp, h } from "vue";
+
+export default defineEventHandler(async (event) => {
+  const { fieldGroupName, ...attrs } = await readBody(event);
+  const componentName = fieldGroupName.replace(/^GroupAbstractBuilder(.*)Layout$/, "Section$1");
+  try {
+    const componentModule = await import(`../../app/components/sections/${componentName}.vue`);
+    const app = createSSRApp({
+      render() {
+        return h(componentModule.default, attrs);
+      },
+    });
+    const html = await renderToString(app);
+    return html;
+  }
+  catch (error) {
+    const message = error instanceof Error ? error.message : "Une erreur est survenue.";
+    throw createError({ statusCode: 500, statusMessage: "Erreur interne", message });
+  }
+});