diff --git a/Controller/ApiController.php b/Controller/ApiController.php
index c123bd3..6368f44 100755
--- a/Controller/ApiController.php
+++ b/Controller/ApiController.php
@@ -512,4 +512,116 @@ final class ApiController extends Controller
 
         $this->fillJsonResponse($request, $response, NotificationLevel::OK, 'Media', 'Media successfully created.', $ids);
     }
+
+    /**
+     * Routing end-point for application behaviour.
+     *
+     * @param HttpRequest  $request  Request
+     * @param HttpResponse $response Response
+     * @param mixed        $data     Generic data
+     *
+     * @return void
+     *
+     * @api
+     *
+     * @since 1.0.0
+     */
+    public function apiMediaExport(RequestAbstract $request, ResponseAbstract $response, $data = null) : void
+    {
+        /** @var Media $media */
+        $media  = MediaMapper::get((int) $request->getData('id'));
+
+        $view = $this->createView($media, $request, $response);
+        $this->setMediaResponseHeader($view, $media, $request, $response);
+        $view->setData('path', __DIR__ . '/../../../');
+
+        $response->set('export', $view);
+    }
+
+    /**
+     * Set header for report/template
+     *
+     * @param View             $view     Media view
+     * @param string           $name     Template name
+     * @param RequestAbstract  $request  Request
+     * @param ResponseAbstract $response Response
+     *
+     * @return void
+     *
+     * @api
+     *
+     * @since 1.0.0
+     */
+    private function setMediaResponseHeader(View $view, Media $media, RequestAbstract $request, ResponseAbstract $response) : void
+    {
+        switch (\strtolower($media->extension)) {
+            case 'pdf':
+                $response->header->set('Content-Type', MimeType::M_PDF, true);
+                break;
+            case 'c':
+            case 'cpp':
+            case 'h':
+            case 'php':
+            case 'js':
+            case 'css':
+            case 'rs':
+            case 'py':
+            case 'r':
+                $response->header->set('Content-Type', MimeType::M_TXT, true);
+                break;
+            case 'txt':
+            case 'cfg':
+            case 'log':
+                $response->header->set('Content-Type', MimeType::M_TXT, true);
+                break;
+            case 'md':
+                $response->header->set('Content-Type', MimeType::M_TXT, true);
+                break;
+            case 'csv':
+                $response->header->set('Content-Type', MimeType::M_CSV, true);
+                break;
+            case 'xls':
+                $response->header->set('Content-Type', MimeType::M_XLS, true);
+                break;
+            case 'xlsx':
+                $response->header->set('Content-Type', MimeType::M_XLSX, true);
+                break;
+            case 'doc':
+                $response->header->set('Content-Type', MimeType::M_DOC, true);
+                break;
+            case 'docx':
+                $response->header->set('Content-Type', MimeType::M_DOCX, true);
+                break;
+            case 'ppt':
+                $response->header->set('Content-Type', MimeType::M_PPT, true);
+                break;
+            case 'pptx':
+                $response->header->set('Content-Type', MimeType::M_PPTX, true);
+                break;
+            case 'json':
+                $response->header->set('Content-Type', MimeType::M_CSV, true);
+                break;
+            case 'jpg':
+            case 'jpeg':
+                $response->header->set('Content-Type', MimeType::M_JPG, true);
+                break;
+            case 'gif':
+                $response->header->set('Content-Type', MimeType::M_GIF, true);
+                break;
+            case 'png':
+                $response->header->set('Content-Type', MimeType::M_PNG, true);
+                break;
+            case 'mp3':
+                $response->header->set('Content-Type', MimeType::M_MP3, true);
+                break;
+            case 'mp4':
+                $response->header->set('Content-Type', MimeType::M_MP4, true);
+                break;
+            case 'mpeg':
+                $response->header->set('Content-Type', MimeType::M_MPEG, true);
+                break;
+            default:
+                $response->header->set('Content-Type', MimeType::M_BIN, true);
+        }
+    }
 }
diff --git a/Controller/BackendController.php b/Controller/BackendController.php
index e10173a..61145d8 100755
--- a/Controller/BackendController.php
+++ b/Controller/BackendController.php
@@ -21,6 +21,8 @@ use Modules\Media\Models\Media;
 use Modules\Media\Models\MediaMapper;
 use Modules\Media\Models\NullMedia;
 use Modules\Media\Views\MediaView;
+use Modules\Media\Theme\Backend\Components\Media\ElementView;
+use Modules\Media\Theme\Backend\Components\Media\ListView;
 use phpOMS\Contract\RenderableInterface;
 use phpOMS\Message\RequestAbstract;
 use phpOMS\Message\ResponseAbstract;
@@ -174,26 +176,11 @@ final class BackendController extends Controller
         $view->setTemplate('/Modules/Media/Theme/Backend/media-single');
         $view->addData('nav', $this->app->moduleManager->get('Navigation')->createNavigationMid(1000401001, $request, $response));
 
-        $id    = (int) $request->getData('id');
-        $media = MediaMapper::get($id);
-        if ($media->extension === 'collection') {
-            $media = MediaMapper::getByVirtualPath(
-                $media->getVirtualPath() . ($media->getVirtualPath() !== '/' ? '/' : '') . $media->name
-            );
-
-            $collection = CollectionMapper::get((int) $request->getData('id'));
-            $media      = \array_merge($media, $collection->getSources());
-
-            $view->addData('path', $collection->getVirtualPath() . '/' . $collection->name);
-            $view->setTemplate('/Modules/Media/Theme/Backend/media-list');
-        }
-
-        if ($id == 0) {
+        $id = $request->getData('id', 'int');
+        if ($id === 0) {
             $path = \urldecode($request->getData('path'));
-
-            if ($media instanceof NullMedia
-                && \is_file(__DIR__ . '/../Files' . $path)
-            ) {
+            $media = new NullMedia();
+            if (\is_file(__DIR__ . '/../Files' . $path)) {
                 $name = \explode('.', \basename($path));
 
                 $media->name      = $name[0];
@@ -202,6 +189,32 @@ final class BackendController extends Controller
                 $media->setPath('/Modules/Media/Files/' . \ltrim($path, '\\/'));
                 $media->isAbsolute = false;
             }
+        } else {
+            $media = MediaMapper::get($id);
+            if ($media->extension === 'collection') {
+                $media = MediaMapper::getByVirtualPath(
+                    $media->getVirtualPath() . ($media->getVirtualPath() !== '/' ? '/' : '') . $media->name
+                );
+
+                $collection = CollectionMapper::get($id);
+                $media      = \array_merge($media, $collection->getSources());
+
+                $view->addData('path', $collection->getVirtualPath() . '/' . $collection->name);
+                $view->setTemplate('/Modules/Media/Theme/Backend/media-list');
+            } else {
+                $sub = $request->getData('sub') ?? '';
+                if (($media->extension === 'collection'
+                        && !\is_file($media->getPath() . $sub))
+                    || (\is_dir($media->getPath())
+                        && (\is_dir($media->getPath() . $sub))
+                )) {
+                    $listView = new ListView($this->app->l11nManager, $request, $response);
+                    $listView->setTemplate('/modules/Media/Theme/Backend/Components/Media/list');
+                    $view->addData('view', $listView);
+                } else {
+                    $view->addData('view', $this->createMediaView($media, $request, $response));
+                }
+            }
         }
 
         $view->addData('media', $media);
@@ -209,6 +222,79 @@ final class BackendController extends Controller
         return $view;
     }
 
+    /**
+     * Create media view
+     *
+     * @param Media  $media Media
+     *
+     * @return View
+     *
+     * @since 1.0.0
+     */
+    private function createMediaView(Media $media, RequestAbstract $request, ResponseAbstract $response) : View
+    {
+        $view = new ElementView($this->app->l11nManager, $request, $response);
+        switch (\strtolower($media->extension)) {
+            case 'pdf':
+                $view->setTemplate('/Modules/Media/Theme/Backend/Components/Media/pdf');
+                break;
+            case 'c':
+            case 'cpp':
+            case 'h':
+            case 'php':
+            case 'js':
+            case 'css':
+            case 'rs':
+            case 'py':
+            case 'r':
+                $view->setTemplate('/Modules/Media/Theme/Backend/Components/Media/text');
+                break;
+            case 'txt':
+            case 'cfg':
+            case 'log':
+                $view->setTemplate('/Modules/Media/Theme/Backend/Components/Media/text');
+                break;
+            case 'md':
+                $view->setTemplate('/Modules/Media/Theme/Backend/Components/Media/markdown');
+                break;
+            case 'csv':
+                $view->setTemplate('/Modules/Media/Theme/Backend/Components/Media/csv');
+                break;
+            case 'xls':
+            case 'xlsx':
+                $view->setTemplate('/Modules/Media/Theme/Backend/Components/Media/spreadsheet');
+                break;
+            case 'doc':
+            case 'docx':
+                $view->setTemplate('/Modules/Media/Theme/Backend/Components/Media/word');
+                break;
+            case 'ppt':
+            case 'pptx':
+                $view->setTemplate('/Modules/Media/Theme/Backend/Components/Media/powerpoint');
+                break;
+            case 'json':
+                $view->setTemplate('/Modules/Media/Theme/Backend/Components/Media/json');
+                break;
+            case 'jpg':
+            case 'jpeg':
+            case 'gif':
+            case 'png':
+                $view->setTemplate('/Modules/Media/Theme/Backend/Components/Media/image');
+                break;
+            case 'mp3':
+                $view->setTemplate('/Modules/Media/Theme/Backend/Components/Media/audio');
+                break;
+            case 'mp4':
+            case 'mpeg':
+                $view->setTemplate('/Modules/Media/Theme/Backend/Components/Media/video');
+                break;
+            default:
+                $view->setTemplate('/Modules/Media/Theme/Backend/Components/Media/default');
+        }
+
+        return $view;
+    }
+
     /**
      * Routing end-point for application behaviour.
      *
diff --git a/Theme/Api/render.tpl.php b/Theme/Api/render.tpl.php
new file mode 100644
index 0000000..44de2ec
--- /dev/null
+++ b/Theme/Api/render.tpl.php
@@ -0,0 +1,5 @@
+<?php
+
+// @todo: is this chunked/streamed output or bulk output
+// if it is streamed it is not working because of ob_* in the actual response rendering
+\fpassthru($fp);
diff --git a/Theme/Backend/Components/Media/ElementView.php b/Theme/Backend/Components/Media/ElementView.php
new file mode 100644
index 0000000..cde191a
--- /dev/null
+++ b/Theme/Backend/Components/Media/ElementView.php
@@ -0,0 +1,58 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 8.0
+ *
+ * @package   Modules\Media
+ * @copyright Dennis Eichhorn
+ * @license   OMS License 1.0
+ * @version   1.0.0
+ * @link      https://orange-management.org
+ */
+declare(strict_types=1);
+
+namespace Modules\Media\Theme\Backend\Components\Media;
+
+use phpOMS\Localization\L11nManager;
+use phpOMS\Message\RequestAbstract;
+use phpOMS\Message\ResponseAbstract;
+use Modules\Media\Views\MediaView;
+use Modules\Media\Models\Media;
+
+/**
+ * Component view.
+ *
+ * @package Modules\Media
+ * @license OMS License 1.0
+ * @link    https://orange-management.org
+ * @since   1.0.0
+ * @codeCoverageIgnore
+ */
+class ElementView extends MediaView
+{
+    /**
+     * Media files
+     *
+     * @var \Modules\Media\Models\Media
+     * @since 1.0.0
+     */
+    protected Media $media;
+
+    /**
+     * {@inheritdoc}
+     */
+    public function __construct(L11nManager $l11n = null, RequestAbstract $request, ResponseAbstract $response)
+    {
+        parent::__construct($l11n, $request, $response);
+    }
+
+    /**
+     * {@inheritdoc}
+     */
+    public function render(...$data) : string
+    {
+        $this->media = $data[0];
+        return parent::render();
+    }
+}
diff --git a/Theme/Backend/Components/Media/BaseView.php b/Theme/Backend/Components/Media/ListView.php
similarity index 97%
rename from Theme/Backend/Components/Media/BaseView.php
rename to Theme/Backend/Components/Media/ListView.php
index 4ffdeae..c80903a 100755
--- a/Theme/Backend/Components/Media/BaseView.php
+++ b/Theme/Backend/Components/Media/ListView.php
@@ -28,7 +28,7 @@ use phpOMS\Views\View;
  * @since   1.0.0
  * @codeCoverageIgnore
  */
-class BaseView extends View
+class ListView extends View
 {
     /**
      * Media files
diff --git a/Theme/Backend/Components/Media/audio.tpl.php b/Theme/Backend/Components/Media/audio.tpl.php
new file mode 100644
index 0000000..2362971
--- /dev/null
+++ b/Theme/Backend/Components/Media/audio.tpl.php
@@ -0,0 +1,8 @@
+<section id="mediaFile" class="portlet">
+    <div class="portlet-body">
+        <audio width="100%" controls>
+            <source src="<?= $this->media->getPath(); ?>" type="audio/<?= $this->media->extension; ?>">
+            Your browser does not support HTML audio.
+        </audio>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Theme/Backend/Components/Media/csv.tpl.php b/Theme/Backend/Components/Media/csv.tpl.php
new file mode 100644
index 0000000..14b91f2
--- /dev/null
+++ b/Theme/Backend/Components/Media/csv.tpl.php
@@ -0,0 +1,39 @@
+<?php
+
+use phpOMS\Utils\IO\Csv\CsvSettings;
+?>
+<section id="mediaFile" class="portlet">
+    <div class="portlet-body">
+        <div id="media" class="tabview tab-2 m-editor">
+        <ul class="tab-links">
+            <li><label tabindex="0" for="media-c-tab-1"><?= $this->getHtml('Preview', 'Media'); ?></label>
+            <li><label tabindex="0" for="media-c-tab-2"><?= $this->getHtml('Edit', 'Media'); ?></label>
+        </ul>
+        <div class="tab-content">
+            <input type="radio" id="media-c-tab-1" name="tabular-1" checked>
+            <div class="tab">
+                <?php
+                    $f = \fopen(($this->media->isAbsolute ? '' : __DIR__ . '/../../../../../../') . $this->media->getPath(), 'r');
+
+                    echo '<table class="default">';
+                    $delim = CsvSettings::getFileDelimiter($f, 3);
+                    while (($line = \fgetcsv($f, 0, $delim)) !== false) {
+                        echo '<tr>';
+                        foreach ($line as $cell) {
+                            echo '<td>' . \htmlspecialchars($cell);
+                        }
+                    }
+
+                    \fclose($f);
+                    echo '</table>';
+                ?>
+            </div>
+            <input type="radio" id="media-c-tab-2" name="tabular-1">
+            <div class="tab">
+                <pre class="textContent" data-tpl-text="/media/content" data-tpl-value="/media/content"><?= $this->printHtml(
+                    $this->getFileContent(($this->media->isAbsolute ? '' : __DIR__ . '/../../../../../../') . $this->media->getPath())
+                ); ?></pre>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Theme/Backend/Components/Media/default.tpl.php b/Theme/Backend/Components/Media/default.tpl.php
new file mode 100644
index 0000000..e69de29
diff --git a/Theme/Backend/Components/Media/image.tpl.php b/Theme/Backend/Components/Media/image.tpl.php
new file mode 100644
index 0000000..ea1c0e7
--- /dev/null
+++ b/Theme/Backend/Components/Media/image.tpl.php
@@ -0,0 +1,7 @@
+<section id="mediaFile" class="portlet">
+    <div class="portlet-body">
+        <div class="h-overflow centerText">
+            <img style="max-width: 100%" src="<?= $this->media->getPath(); ?>" alt="<?= $this->printHtml($this->media->name); ?>">
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Theme/Backend/Components/Media/json.tpl.php b/Theme/Backend/Components/Media/json.tpl.php
new file mode 100644
index 0000000..e69de29
diff --git a/Theme/Backend/Components/Media/markdown.tpl.php b/Theme/Backend/Components/Media/markdown.tpl.php
new file mode 100644
index 0000000..3479190
--- /dev/null
+++ b/Theme/Backend/Components/Media/markdown.tpl.php
@@ -0,0 +1,27 @@
+<?php
+
+use phpOMS\Utils\Parser\Markdown\Markdown;
+?>
+<section id="mediaFile" class="portlet">
+    <div class="portlet-body">
+        <div id="media" class="tabview tab-2 m-editor">
+        <ul class="tab-links">
+            <li><label tabindex="0" for="media-c-tab-1"><?= $this->getHtml('Preview', 'Media'); ?></label>
+            <li><label tabindex="0" for="media-c-tab-2"><?= $this->getHtml('Edit', 'Media'); ?></label>
+        </ul>
+        <div class="tab-content">
+            <input type="radio" id="media-c-tab-1" name="tabular-1" checked>
+            <div class="tab">
+                <article><?= Markdown::parse(
+                    $this->getFileContent(($this->media->isAbsolute ? '' : __DIR__ . '/../../../../../../') . $this->media->getPath())
+                ); ?></article>
+            </div>
+            <input type="radio" id="media-c-tab-2" name="tabular-1">
+            <div class="tab">
+                <pre class="textContent" data-tpl-text="/media/content" data-tpl-value="/media/content"><?= $this->printHtml(
+                    $this->getFileContent(($this->media->isAbsolute ? '' : __DIR__ . '/../../../../../../') . $this->media->getPath())
+                ); ?></pre>
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Theme/Backend/Components/Media/pdf.tpl.php b/Theme/Backend/Components/Media/pdf.tpl.php
new file mode 100644
index 0000000..0f8aa10
--- /dev/null
+++ b/Theme/Backend/Components/Media/pdf.tpl.php
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 8.0
+ *
+ * @package   Modules\Media
+ * @copyright Dennis Eichhorn
+ * @license   OMS License 1.0
+ * @version   1.0.0
+ * @link      https://orange-management.org
+ */
+declare(strict_types=1);
+
+use \phpOMS\Uri\UriFactory;
+?>
+
+<section id="mediaFile" class="portlet">
+    <div class="portlet-body">
+        <iframe style="min-height: 600px;" data-form="iUiSettings" data-name="iframeHelper" id="iHelperFrame" src="<?= UriFactory::build('{/backend}Resources/mozilla/Pdf/web/viewer.html?{?}&file=' . ($this->media->isAbsolute ? '' : '/../../../../') . $this->media->getPath()); ?>" allowfullscreen></iframe>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Theme/Backend/Components/Media/powerpoint.tpl.php b/Theme/Backend/Components/Media/powerpoint.tpl.php
new file mode 100644
index 0000000..e69de29
diff --git a/Theme/Backend/Components/Media/spreadsheet.tpl.php b/Theme/Backend/Components/Media/spreadsheet.tpl.php
new file mode 100644
index 0000000..f541de8
--- /dev/null
+++ b/Theme/Backend/Components/Media/spreadsheet.tpl.php
@@ -0,0 +1,18 @@
+<?php declare(strict_types=1);
+
+use PhpOffice\PhpSpreadsheet\IOFactory;
+use PhpOffice\PhpSpreadsheet\Writer\Html;
+use PhpOffice\PhpSpreadsheet\Spreadsheet;
+
+$reader = IOFactory::createReaderforFile(($this->media->isAbsolute ? '' : __DIR__ . '/../../../../../../') . $this->media->getPath());
+$reader->setReadDataOnly(true);
+$spreadsheet = $reader->load(($this->media->isAbsolute ? '' : __DIR__ . '/../../../../../../') . $this->media->getPath());
+
+$writer = new Html($spreadsheet);
+$writer->writeAllSheets();
+?>
+<section id="mediaFile" class="portlet">
+    <div class="portlet-body">
+        <?php $writer->save('php://output'); ?>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Theme/Backend/Components/Media/text.tpl.php b/Theme/Backend/Components/Media/text.tpl.php
new file mode 100644
index 0000000..0de3085
--- /dev/null
+++ b/Theme/Backend/Components/Media/text.tpl.php
@@ -0,0 +1,7 @@
+<section id="mediaFile" class="portlet">
+    <div class="portlet-body">
+        <pre class="textContent" data-tpl-text="/media/content" data-tpl-value="/media/content"><?= $this->printHtml(
+            $this->getFileContent(($this->media->isAbsolute ? '' : __DIR__ . '/../../../../../../') . $this->media->getPath())
+        ); ?></pre>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Theme/Backend/Components/Media/video.tpl.php b/Theme/Backend/Components/Media/video.tpl.php
new file mode 100644
index 0000000..0dae646
--- /dev/null
+++ b/Theme/Backend/Components/Media/video.tpl.php
@@ -0,0 +1,8 @@
+<section id="mediaFile" class="portlet">
+    <div class="portlet-body">
+        <video width="100%" controls>
+            <source src="<?= $this->media->getPath(); ?>" type="video/<?= $this->media->extension; ?>">
+            Your browser does not support HTML video.
+        </video>
+    </div>
+</section>
\ No newline at end of file
diff --git a/Theme/Backend/Components/Media/word.tpl.php b/Theme/Backend/Components/Media/word.tpl.php
new file mode 100644
index 0000000..e69de29
diff --git a/Theme/Backend/media-single.tpl.php b/Theme/Backend/media-single.tpl.php
index 537824b..aa98cde 100755
--- a/Theme/Backend/media-single.tpl.php
+++ b/Theme/Backend/media-single.tpl.php
@@ -22,6 +22,7 @@ include __DIR__ . '/template-functions.php';
 
 /** @var \Modules\Media\Models\Media $media */
 $media = $this->getData('media');
+$view = $this->getData('view');
 
 /** @var \Modules\Media\Views\MediaView $this */
 echo $this->getData('nav')->render();
@@ -74,6 +75,13 @@ echo $this->getData('nav')->render();
     </div>
 </div>
 
+<div class="row" style="height: calc(100% - 85px);">
+    <div class="col-xs-12">
+        <?= $view->render($media); ?>
+    </div>
+</div>
+
+<!--
 <div class="row">
     <?php if ($this->isCollectionFunction($media, $this->request->getData('sub') ?? '')) : ?>
     <div class="col-xs-12">
@@ -133,8 +141,6 @@ echo $this->getData('nav')->render();
                         <img style="max-width: 100%" src="<?= $media->getPath(); ?>" alt="<?= $this->printHtml($media->name); ?>">
                     </div>
                 <?php elseif ($this->isTextFile($media, $path)) : ?>
-                    <!-- if markdown show markdown editor, if image show image editor, if text file show textarea only on edit -->
-
                     <?php if (!\is_file(($media->isAbsolute ? '' : __DIR__ . '/../../../../') . $media->getPath())) : ?>
                         <div class="centerText"><i class="fa fa-question fa-5x"></i></div>
                     <?php else : ?>
@@ -180,4 +186,5 @@ echo $this->getData('nav')->render();
         </section>
     </div>
     <?php endif; ?>
-</div>
\ No newline at end of file
+</div>
+-->
\ No newline at end of file