diff --git a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/media/MediaBrowser.vue b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/media/MediaBrowser.vue
index 7e342d48d..0c471bc6a 100644
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/media/MediaBrowser.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/media/MediaBrowser.vue
@@ -25,11 +25,16 @@ interface Media {
   name: string;
 }
 
+const emit = defineEmits(['select-media']);
 const folders = ref<Folder[]>([]);
+
+const selectMedia = (media: Media) => {
+  emit('select-media', media);
+};
 const media = ref<Media[]>([]);
 const selectedFolder = ref<string | null>(null);
 const currentPage = ref(1);
-const totalPages = ref(1);
+const totalMedia = ref(0);
 
 const loadFolders = async () => {
   try {
@@ -48,7 +53,7 @@ const loadMedia = async (folderId: string, page: number = 1) => {
     const response: any = await fetchMediaByFolder(folderId, page);
     media.value = response.data;
     currentPage.value = response.currentPage;
-    totalPages.value = response.lastPage;
+    totalMedia.value = response.count;
   } catch (error) {
     console.error(`Failed to fetch media for folder ${folderId}`, error);
   }
@@ -75,7 +80,7 @@ onMounted(() => {
     <h1 class="text-2xl font-bold mb-4">Media Browser</h1>
     <ResizablePanelGroup direction="horizontal" class="flex-grow rounded-lg border">
       <ResizablePanel :default-size="25">
-        <div class="flex h-full items-start justify-center p-6">
+        <div class="h-full overflow-y-auto p-6">
           <FolderTree :folders="folders" :selected-folder-id="selectedFolder" @select-folder="selectFolder" />
         </div>
       </ResizablePanel>
@@ -83,12 +88,12 @@ onMounted(() => {
       <ResizablePanel :default-size="75">
         <div class="flex flex-col h-full p-6">
           <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 flex-grow">
-            <div v-for="item in media" :key="item.uuid" class="aspect-square bg-gray-100 rounded-lg overflow-hidden">
+            <div v-for="item in media" :key="item.uuid" class="aspect-square bg-gray-100 rounded-lg overflow-hidden cursor-pointer" @click="selectMedia(item)">
               <img :src="item.url" :alt="item.name" class="w-full h-full object-cover" />
             </div>
           </div>
           <div class="mt-4 flex justify-center">
-            <Pagination v-if="totalPages > 1" :total="totalPages" :sibling-count="1" show-edges :default-page="currentPage" @update:page="onPageChange">
+            <Pagination v-if="totalMedia > 12" :items-per-page="12" :total="totalMedia" :sibling-count="1" show-edges :default-page="currentPage" @update:page="onPageChange">
               <PaginationContent v-slot="{ items }" class="flex items-center gap-1">
                 <PaginationPrevious />
                 <template v-for="(page, index) in items">
diff --git a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/MediaElement.vue b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/MediaElement.vue
index 1e51480cd..5f5e2fcd0 100644
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/MediaElement.vue
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/src/components/app/properties/MediaElement.vue
@@ -23,7 +23,14 @@ interface Folder {
   uuid: string
   title: string
 }
+const dialogOpen = ref(false);
 const uploadProgress = ref(0);
+
+const handleMediaSelect = (media: any) => {
+  theModel.value.default = media.uuid;
+  theModel.value.url = media.url;
+  dialogOpen.value = false;
+};
 const isDragging = ref(false);
 const directories = ref<Folder[]>([]);
 const selectedDirectory = ref<string>('');
@@ -89,12 +96,12 @@ const handleFile = async (file: File) => {
     <div>
         <label>{{ $t('id') }}</label>
         <Input v-model="theModel!.id" />
-        <Dialog>
+        <Dialog v-model:open="dialogOpen">
           <DialogTrigger as-child>
             <Button class="my-2 w-full">Mediabrowser</Button>
           </DialogTrigger>
           <DialogContent class="sm:max-w-5xl max-h-[80vh] overflow-y-auto">
-            <MediaBrowser />
+            <MediaBrowser @select-media="handleMediaSelect" />
           </DialogContent>
         </Dialog>
         <div
diff --git a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/vite.config.ts b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/vite.config.ts
index 05da45019..e7ab6cb0a 100644
--- a/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/vite.config.ts
+++ b/src/new/var/plugins/Custom/PSC/FormBuilder/FormBuilderTS/vite.config.ts
@@ -33,7 +33,7 @@ export default defineConfig({
         changeOrigin: true,
         configure: (proxy) => {
           proxy.on('proxyReq', (proxyReq) => {
-            proxyReq.setHeader('Authorization', 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE3NTM5NTU4MzMsImV4cCI6MTc1Mzk1OTQzMywicm9sZXMiOlsiUk9MRV9BRE1JTiIsIlJPTEVfU0hPUF9PUEVSQVRPUiIsIlJPTEVfVVNFUiIsIlJPTEVfVVNFUiIsIlJPTEVfUFNDX0NvbGxlY3RfQ29udGFjdF9FZGl0IiwiUk9MRV9QU0NfQ29sbGVjdF9Db250YWN0X0FkZCIsIlJPTEVfUFNDX0NvbGxlY3RfQ29udGFjdF9EZWxldGUiLCJST0xFX1BTQ19Db2xsZWN0X0NvbnRhY3RfTG9jayIsIlJPTEVfUFNDX1IyX1NlbmRjbG91ZF9TaG93Il0sInVpZCI6MX0.rUlkpFBa-RKQAxSa6e0UmggiqPlDj-Mz4I56T-kTOT5j5veI3JFYHOvptbeEjITPdmHM_Dm86CpEuIkezQC1UBsuzGkSYLQRy8Cb_YnNEEbaoCsg28q60Wu_dfBbDEFRjXnbEVSrwbfawRMq4FUTuky7r8qstORRhL1bPtfL3cN_lPEruffSreuvUReM7inkjOHU4utGuVhMm1D3oK1p398YmZACmQfiYLYOM6c07Isop5IZ0Mfq0LZ_BEVptQi7Thb4nAHiEUZfyBqhLrrWxmUFcpF2Mp7-_dZZeiA9w2ZYZBA-sGMAF0EwCDU1_WK-o0BDZDk-qKMj4zrFHe8TEg');
+            proxyReq.setHeader('Authorization', 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJpYXQiOjE3NTM5NjM0MjksImV4cCI6MTc1Mzk2NzAyOSwicm9sZXMiOlsiUk9MRV9BRE1JTiIsIlJPTEVfU0hPUF9PUEVSQVRPUiIsIlJPTEVfVVNFUiIsIlJPTEVfVVNFUiIsIlJPTEVfUFNDX0NvbGxlY3RfQ29udGFjdF9FZGl0IiwiUk9MRV9QU0NfQ29sbGVjdF9Db250YWN0X0FkZCIsIlJPTEVfUFNDX0NvbGxlY3RfQ29udGFjdF9EZWxldGUiLCJST0xFX1BTQ19Db2xsZWN0X0NvbnRhY3RfTG9jayIsIlJPTEVfUFNDX1IyX1NlbmRjbG91ZF9TaG93Il0sInVpZCI6MX0.OdEjvrvnZQs5Rty_t5gPIr7N4FV4Sq8KWvWDD76qHiIcLdj89IGtShFfFBUk4jtF6Y4heS7uDOAsTuY1KhhiusCPp9zXhCne3HoygK5EQPQ72u9LkMghpuGjStBVAPECaxoxufSfoKYAmBl7D3bcowZ8rfx2fKRwWl0vDWO7Vj9uu2cf3HrRzNl4zrbJMk0xtrQjPs5zF5j1AFSnd2OpYU7j3od5GPZqmQPZofd-vhbO85eMyDpaucJ7UMsef8G1Gq0TO6CBh1Hg7hqCXVX_nDKhhNz4Hi26DqK6GjX8a4AkJFeyfCxictYsAvIQsEmhL8oP52WcXdRV3Tqr2RwaSw');
           });
         },
       },