diff --git a/Configuration/TCA/Overrides/sys_template.php b/Configuration/TCA/Overrides/sys_template.php
index ecb4ed8..a8d036c 100644
--- a/Configuration/TCA/Overrides/sys_template.php
+++ b/Configuration/TCA/Overrides/sys_template.php
@@ -1,13 +1,22 @@
 <?php
-defined('TYPO3_MODE') || die();
+defined('TYPO3') || die();
 
 call_user_func(function () {
     /**
      * Default TypoScript for Headless News
      */
-    \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
-        'headless_news',
-        'Configuration/TypoScript',
-        'Headless News'
-    );
+    $versionInformation = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Information\Typo3Version::class);
+    if ($versionInformation->getMajorVersion() > 11) {
+        \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
+            'headless_news',
+            'Configuration/TypoScript/v12',
+            'Headless News For V12'
+        );
+    } else {
+        \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addStaticFile(
+            'headless_news',
+            'Configuration/TypoScript',
+            'Headless News'
+        );
+    }
 });
diff --git a/Configuration/TypoScript/v12/constants.typoscript b/Configuration/TypoScript/v12/constants.typoscript
new file mode 100644
index 0000000..3b6afe8
--- /dev/null
+++ b/Configuration/TypoScript/v12/constants.typoscript
@@ -0,0 +1,7 @@
+plugin.tx_news {
+  view {
+    templateRootPath = EXT:headless_news/Resources/Private/News/Templates/
+    partialRootPath = EXT:headless_news/Resources/Private/News/Partials/
+    layoutRootPath = EXT:headless_news/Resources/Private/News/Layouts/
+  }
+}
\ No newline at end of file
diff --git a/Configuration/TypoScript/v12/setup.typoscript b/Configuration/TypoScript/v12/setup.typoscript
new file mode 100644
index 0000000..c241ef7
--- /dev/null
+++ b/Configuration/TypoScript/v12/setup.typoscript
@@ -0,0 +1,100 @@
+tt_content.news_pi1 =< lib.contentElementWithHeader
+tt_content.news_pi1 {
+  fields {
+    content {
+      fields {
+        data = USER
+        data {
+          userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
+          vendorName = GeorgRinger
+          extensionName = News
+          pluginName = Pi1
+          controller = News
+          view < plugin.tx_news.view
+          persistence < plugin.tx_news.persistence
+          settings < plugin.tx_news.settings
+          settings {
+            dateFormat = TEXT
+            dateFormat = M d Y
+            dateTimeFormat = TEXT
+            dateTimeFormat = Y-m-d H:i:s
+          }
+        }
+      }
+    }
+  }
+}
+
+tt_content.news_newsliststicky < tt_content.news_pi1
+tt_content.news_newsliststicky {
+  fields {
+    content {
+      fields {
+        data = USER
+        data {
+          pluginName = NewsListSticky
+        }
+      }
+    }
+  }
+}
+
+tt_content.news_newsdatemenu < tt_content.news_pi1
+
+tt_content.news_newssearchresult < tt_content.news_pi1
+tt_content.news_newssearchresult {
+  fields {
+    content {
+      fields {
+        data = USER
+        data {
+          pluginName = NewsSearchForm
+        }
+      }
+    }
+  }
+}
+
+tt_content.news_categorylist < tt_content.news_pi1
+tt_content.news_categorylist {
+  fields {
+    content {
+      fields {
+        data = USER
+        data {
+          pluginName = CategoryList
+          controller = Category
+        }
+      }
+    }
+  }
+}
+
+tt_content.news_taglist < tt_content.news_pi1
+tt_content.news_taglist {
+  fields {
+    content {
+      fields {
+        data = USER
+        data {
+          pluginName = TagList
+          controller = Tag
+        }
+      }
+    }
+  }
+}
+
+tt_content.news_newsdetail < tt_content.news_pi1
+tt_content.news_newsdetail {
+  fields {
+    content {
+      fields {
+        data = USER
+        data {
+          pluginName = NewsDetail
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/Resources/Private/News/Partials/Files.html b/Resources/Private/News/Partials/Files.html
index a717d39..0be8f68 100644
--- a/Resources/Private/News/Partials/Files.html
+++ b/Resources/Private/News/Partials/Files.html
@@ -2,7 +2,7 @@
     <f:format.raw>
         [
         <f:for each="{files}" as="file" iteration="iterator">
-            <f:if condition="{file.showinpreview} == 0 && {0: view} == {0: 'detail'} || {file.showinpreview} == 1 || {file.showinpreview} == 2 && {0: view} == {0: 'list'} || {0: type} == {0: 'relatedFiles'}">
+            <f:if condition="{file.showinpreview} == 0 && {0: view} == {0: 'detail'} || {file.showinpreview} == 1 || {file.showinpreview} == 2 && {0: view} == {0: 'list'} || {0: type} == {0: 'relatedFiles'} || {0: type} == {0: 'media'}">
                 {f:if(condition: imageSet, then: ',')}
                 <f:render section="File" arguments="{file: file, view: view}"/>
                 <f:variable name="imageSet" value="1"/>
diff --git a/Resources/Private/News/Templates/News/List.html b/Resources/Private/News/Templates/News/List.html
index 62cc4dd..73b2849 100644
--- a/Resources/Private/News/Templates/News/List.html
+++ b/Resources/Private/News/Templates/News/List.html
@@ -20,7 +20,8 @@
                     orderBy: settings.orderBy,
                     orderDirection: settings.orderDirection,
                     templateLayout: settings.templateLayout,
-                    action: 'list'
+                    action: 'list',
+                    cropMaxCharacters: settings.cropMaxCharacters
                 }"/>
             </f:format.raw>
             }
@@ -46,7 +47,8 @@
                         orderBy: settings.orderBy,
                         orderDirection: settings.orderDirection,
                         templateLayout: settings.templateLayout,
-                        action: 'list'
+                        action: 'list',
+                        cropMaxCharacters: settings.cropMaxCharacters
                     }"/>
                 </f:format.raw>
             }
@@ -69,7 +71,7 @@
                       author: newsItem.author,
                       authorEmail: newsItem.authorEmail
                     },
-                    media: '{f:render(partial: \'Files\', arguments: \'{files: newsItem.media, view: \\\'list\\\', type: \\\'media\\\'}\') -> headless:format.json.decode()}',
+                    media: '{f:render(partial: \'Files\', arguments: \'{files: newsItem.falMedia, view: \\\'list\\\', type: \\\'media\\\'}\') -> headless:format.json.decode()}',
                     falRelatedFiles: '{f:render(partial: \'Files\', arguments: \'{files: newsItem.falRelatedFiles, view: \\\'list\\\', type: \\\'relatedFiles\\\'}\') -> headless:format.json.decode()}',
                     categories: '{f:render(partial: \'Categories\', arguments: \'{categories: newsItem.categories}\') -> headless:format.json.decode()}',
                     tags: '{f:render(partial: \'Tags\', arguments: \'{tags: newsItem.tags}\') -> headless:format.json.decode()}',
diff --git a/Resources/Private/News/Templates/Vue/CeNews_pi1.vue b/Resources/Private/News/Templates/Vue/CeNews_pi1.vue
index 741d5e2..237009b 100644
--- a/Resources/Private/News/Templates/Vue/CeNews_pi1.vue
+++ b/Resources/Private/News/Templates/Vue/CeNews_pi1.vue
@@ -5,7 +5,7 @@
   </div>
 </template>
 <script>
-import baseCe from "~typo3/mixins/component/baseCe";
+import baseCe from "~typo3/components/content/mixins/baseCe";
 import NewsList from "./Components/NewsList";
 import NewsSingle from "./Components/NewsSingle";
 
diff --git a/composer.json b/composer.json
index bd818b7..0c7a564 100644
--- a/composer.json
+++ b/composer.json
@@ -28,11 +28,11 @@
     }
   ],
   "require": {
-    "typo3/cms-core": "^10.0 || ^11.5"
+    "typo3/cms-core": "^10.0 || ^12.0"
   },
   "suggest": {
-  	"friendsoftypo3/headless": "^2.0 || ^3.0",
-    "georgringer/news": "^9.0"
+  	"friendsoftypo3/headless": "^2.0 || ^4.0",
+    "georgringer/news": "^9.0 || ^11.0"
   },
   "extra": {
      "typo3/cms": {
diff --git a/ext_emconf.php b/ext_emconf.php
index d9c654f..663a63e 100644
--- a/ext_emconf.php
+++ b/ext_emconf.php
@@ -12,12 +12,12 @@
     'version' => '2.0.0',
     'constraints' => [
         'depends' => [
-            'typo3' => '10.0.0-11.5.99',
-            'frontend' => '10.0.0-11.5.99',
+            'typo3' => '10.0.0-12.5.99',
+            'frontend' => '10.0.0-12.5.99',
         ],
         'conflicts' => [],
         'suggests' => [
-            'headless' => '2.0.0-3.9.9',
+            'headless' => '2.0.0-4.9.9',
         ],
     ],
 ];