diff --git a/app/Domain/Files/Templates/components/file-manager.blade.php b/app/Domain/Files/Templates/components/file-manager.blade.php
index 0af676aef..6ea6bcf6f 100644
--- a/app/Domain/Files/Templates/components/file-manager.blade.php
+++ b/app/Domain/Files/Templates/components/file-manager.blade.php
@@ -31,7 +31,7 @@
 
 
         <div id="fileManager">
-            <div class="maincontentinner">
+            <div class="">
                 @displayNotification()
                 <h5 class="subtitle"><?= $tpl->__('headline.browse_files_headline') ?></h5>
 
@@ -64,7 +64,7 @@
                 </div>
                 <?php } ?>
             </div>
-            <div class="maincontentinner">
+            <div class="">
 
                 <div class='mediamgr'>
 
diff --git a/app/Domain/Goalcanvas/Templates/components/canvas.blade.php b/app/Domain/Goalcanvas/Templates/components/canvas.blade.php
index 7a864b57d..2a8509390 100644
--- a/app/Domain/Goalcanvas/Templates/components/canvas.blade.php
+++ b/app/Domain/Goalcanvas/Templates/components/canvas.blade.php
@@ -22,9 +22,9 @@
                 href="#/goalcanvas/editCanvasItem?type=goal&canvasId={{ $canvasId }}">
                 <i class="fa fa-plus"></i> Create New Goal
             </x-global::forms.button>
-            <h5 class="text-3xl	font-bold">
-                <a class="text-primary" href='{{ BASE_URL }}/goalcanvas/showCanvas/{{ $canvasId }}'>
-                    {{ $canvas->title }}
+            <h5 class='subtitle'>
+                <a href='{{ BASE_URL }}/goalcanvas/showCanvas/{{ $canvasId }}'>
+                    {{ $canvasTitle }}
                 </a>
             </h5>
         </div>
diff --git a/app/Domain/Ideas/Js/ideasController.js b/app/Domain/Ideas/Js/ideasController.js
index dc885b2ff..43685042a 100644
--- a/app/Domain/Ideas/Js/ideasController.js
+++ b/app/Domain/Ideas/Js/ideasController.js
@@ -176,11 +176,55 @@ export const initIdeaKanban = function (statusList) {
     });
 };
 
+var initStatusDropdown = function () {
+    jQuery("body").on(
+        "click",
+        ".statusDropdown .dropdown .menu li a",
+        function () {
+
+            var value = jQuery(this).attr("data-value");
+            var dataValue = value.split("_");
+            // var dataValue = jQuery(this).attr("data-value").split("_");
+            var dataLabel = jQuery(this).attr('data-label');
+
+            if (dataValue.length == 3) {
+                var canvasItemId = dataValue[0];
+                var status = dataValue[1];
+                var statusClass = dataValue[2];
+
+
+                jQuery.ajax(
+                    {
+                        type: 'PATCH',
+                        url: appUrl + '/api/ideas',
+                        data:
+                            {
+                                id : canvasItemId,
+                                box:status
+                        }
+                    }
+                )
+                // .done(
+                //     function () {
+                //         jQuery("#statusDropdownMenuLink" + canvasItemId + " span.text").text(dataLabel);
+                //         jQuery("#statusDropdownMenuLink" + canvasItemId).removeClass().addClass("" + statusClass + " dropdown-toggle f-left status ");
+                //         jQuery.growl({message: leantime.i18n.__("short_notifications.status_updated")});
+
+                //     }
+                // );
+            }
+        }
+    );
+
+};
+
 // Make public what you want to have public, everything else is private
-export default {
-    initMasonryWall: initMasonryWall,
+export const  ideasController= {
+    // initMasonryWall: initMasonryWall,
     initBoardControlModal: initBoardControlModal,
     initWallImageModals: initWallImageModals,
     setKanbanHeights: setKanbanHeights,
-    initIdeaKanban: initIdeaKanban
+    initIdeaKanban: initIdeaKanban,
+    initStatusDropdown: initStatusDropdown
+
 };
diff --git a/app/Domain/Ideas/Templates/showBoards.blade.php b/app/Domain/Ideas/Templates/showBoards.blade.php
index 5aa922167..3c65ccadd 100644
--- a/app/Domain/Ideas/Templates/showBoards.blade.php
+++ b/app/Domain/Ideas/Templates/showBoards.blade.php
@@ -156,8 +156,9 @@ class="active">
                                     <div class="clearfix" style="padding-bottom: 8px;"></div>
 
                                     <div class="dropdown ticketDropdown statusDropdown show firstDropdown colorized">
-                                        <x-global::actions.dropdown contentRole="link" position="bottom" align="start"
-                                            class="f-left status {{ $canvasLabels[$row->box]['class'] }}">
+                                        <x-global::actions.dropdown scale="sm" contentRole="link" position="bottom"
+                                            align="start" class="f-left status {{ $canvasLabels[$row->box]['class'] }}"
+                                             :indicator-class="$canvasLabels[$row->box]['class']" selectable="true">
                                             <!-- Dropdown Button -->
                                             <x-slot:labelText>
                                                 <span class="text">{{ $canvasLabels[$row->box]['name'] }}</span>&nbsp;<i
@@ -174,7 +175,8 @@ class="fa fa-caret-down" aria-hidden="true"></i>
                                                 <!-- Dropdown Items -->
                                                 @foreach ($canvasLabels as $key => $label)
                                                     <x-global::actions.dropdown.item href="javascript:void(0);"
-                                                        class="{{ $label['class'] }}" :data-label="$label['name']" :data-value="$row->id . '_' . $key . '_' . $label['class']"
+                                                        class="{{ $label['class'] }}" :data-label="$label['name']" :data-class="$label['class']"
+                                                        :data-value="$row->id . '_' . $key . '_' . $label['class']"
                                                         id="ticketStatusChange{{ $row->id }}{{ $key }}">
                                                         {{ $label['name'] }}
                                                     </x-global::actions.dropdown.item>
@@ -290,24 +292,17 @@ class="f-left">
                     <div class="modal-content">
                         <form action="" method="post">
                             <div class="modal-header">
-                            <x-global::forms.button
-                                type="button"
-                                class="close"
-                                data-dismiss="modal"
-                                aria-hidden="true">
-                                &times;
-                            </x-global::forms.button>
+                                <x-global::forms.button type="button" class="close" data-dismiss="modal"
+                                    aria-hidden="true">
+                                    &times;
+                                </x-global::forms.button>
 
                                 <h4 class="modal-title">{!! __('headlines.start_new_idea_board') !!}</h4>
                             </div>
                             <div class="modal-body">
-                                <x-global::forms.text-input
-                                    type="text"
-                                    name="canvastitle"
+                                <x-global::forms.text-input type="text" name="canvastitle"
                                     placeholder="{{ __('input.placeholders.name_for_idea_board') }}"
-                                    labelText="{{ __('label.topic_idea_board') }}"
-                                    variant="title"
-                                 />
+                                    labelText="{{ __('label.topic_idea_board') }}" variant="title" />
 
                             </div>
                             <div class="modal-footer">
@@ -330,24 +325,17 @@ class="close"
                     <div class="modal-content">
                         <form action="" method="post">
                             <div class="modal-header">
-                            <x-global::forms.button
-                                type="button"
-                                class="close"
-                                data-dismiss="modal"
-                                aria-hidden="true">
-                                &times;
-                            </x-global::forms.button>
+                                <x-global::forms.button type="button" class="close" data-dismiss="modal"
+                                    aria-hidden="true">
+                                    &times;
+                                </x-global::forms.button>
 
                                 <h4 class="modal-title">{!! __('headlines.edit_board_name') !!}</h4>
                             </div>
                             <div class="modal-body">
-                            <x-global::forms.text-input
-                                type="text"
-                                name="canvastitle"
-                                value="{{ $canvasTitle }}"
-                                labelText="{{ __('label.title_idea_board') }}"
-                                variant="title"
-                            />
+                                <x-global::forms.text-input type="text" name="canvastitle"
+                                    value="{{ $canvasTitle }}" labelText="{{ __('label.title_idea_board') }}"
+                                    variant="title" />
 
                             </div>
                             <div class="modal-footer">
@@ -368,17 +356,20 @@ class="close"
     </div>
 
 
-    <script type="text/javascript">
+
+    <script type="module">
+        import "@mix('/js/Domain/Ideas/Js/ideasController.js')"
+        import "@mix('/js/Domain/Canvas/Js/canvasController.js')"
         jQuery(document).ready(function() {
             //new SlimSelect({ select: '#searchCanvas' });
 
-            leantime.ideasController.initMasonryWall();
-            leantime.ideasController.initBoardControlModal();
-            leantime.ideasController.initWallImageModals();
+            // initMasonryWall();
+            // initBoardControlModal();
+            // initWallImageModals();
 
+            ideasController.initStatusDropdown();
             @if ($login::userIsAtLeast($roles::$editor))
-            leantime.canvasController.initUserDropdown('ideas');
-            leantime.canvasController.initStatusDropdown('ideas');
+                initUserDropdown('ideas');
             @else
                 leantime.authController.makeInputReadonly(".maincontentinner");
             @endif
@@ -398,5 +389,4 @@ class="close"
             @endif
         });
     </script>
-
 @endsection
diff --git a/app/Domain/Tickets/Controllers/NewTicket.php b/app/Domain/Tickets/Controllers/NewTicket.php
index 194f2a1c0..20d30bccc 100644
--- a/app/Domain/Tickets/Controllers/NewTicket.php
+++ b/app/Domain/Tickets/Controllers/NewTicket.php
@@ -114,49 +114,20 @@ public function post($params): Response
                 $params['timeTo'] = format(value: $params['timeTo'] ?? '', fromFormat: FromFormat::User24hTime)->userTime24toUserTime();
 
                 $result = $this->ticketService->addTicket($params);
-
-                if (is_array($result) === false) {
+                if ($result !== false) {
                     $this->tpl->setNotification($this->language->__('notifications.ticket_saved'), 'success');
-                    return response()->json(['success' => true]);
-
-                    // if (isset($params['saveAndCloseTicket']) === true && $params['saveAndCloseTicket'] == 1) {
-                    //     return Frontcontroller::redirectHtmx('#/tickets/showTicket/'.$result.'?closeModal=1');
-                    // } else {
-                    //     return Frontcontroller::redirectHtmx('#/tickets/showTicket/'.$result);
-                    // }
-                } else {
-                    // $this->tpl->setNotification($this->language->__($result['msg']), 'error');
-
-                    $ticket = app()->makeWith(TicketModel::class, ['values' => $params]);
-                    $ticket->userLastname = session('userdata.name');
-
-                    $this->tpl->assign('ticket', $ticket);
-                    $this->tpl->assign('statusLabels', $this->ticketService->getStatusLabels());
-                    $this->tpl->assign('ticketTypes', $this->ticketService->getTicketTypes());
-                    $this->tpl->assign('efforts', $this->ticketService->getEffortLabels());
-                    $this->tpl->assign('priorities', $this->ticketService->getPriorityLabels());
-                    $this->tpl->assign('milestones', $this->ticketService->getAllMilestones(['sprint' => '', 'type' => 'milestone', 'currentProject' => session('currentProject')]));
-                    $this->tpl->assign('sprints', $this->sprintService->getAllSprints(session('currentProject')));
-
-                    $this->tpl->assign('kind', $this->timesheetService->getLoggableHourTypes());
-                    $this->tpl->assign('ticketHours', 0);
-                    $this->tpl->assign('userHours', 0);
-
-                    $this->tpl->assign('timesheetsAllHours', 0);
-                    $this->tpl->assign('remainingHours', 0);
-
-                    $this->tpl->assign('userInfo', $this->userService->getUser(session('userdata.id')));
-                    $this->tpl->assign('users', $this->projectService->getUsersAssignedToProject(session('currentProject')));
-
-                    $allAssignedprojects = $this->projectService->getProjectsUserHasAccessTo(session('userdata.id'), 'open');
-                    $this->tpl->assign('allAssignedprojects', $allAssignedprojects);
-
-                    // return $this->tpl->displayPartial('tickets::partials.newTicketModal');
-                    return response()->json(['success' => false]);
-                }
+                    
+                    if (isset($params['saveAndCloseTicket']) === true && $params['saveAndCloseTicket'] == 1) {
+                        return Frontcontroller::redirect('#/tickets/showTicket/'.$result.'?closeModal=1');
+                    } else {
+                        return Frontcontroller::redirect(url: session('lastPage').'#/tickets/showTicket/'.$result);
+                    }
+                } 
             }
 
-            return response()->json(['success' => true]);
+            return Frontcontroller::redirect(url: session('lastPage')."#/tickets/newTicket");
+            // return Frontcontroller::redirect(CURRENT_URL);
+
         }
     }
 }
diff --git a/app/Domain/Tickets/Hxcontrollers/NewTicket.php b/app/Domain/Tickets/Hxcontrollers/NewTicket.php
index 2753c57c3..320a2f07b 100644
--- a/app/Domain/Tickets/Hxcontrollers/NewTicket.php
+++ b/app/Domain/Tickets/Hxcontrollers/NewTicket.php
@@ -50,8 +50,7 @@ public function post($params): Response
             $result = $this->ticketService->addTicket($params);
 
             if (is_array($result) === false) {
-                $this->tpl->setNotification($this->language->__('notifications.ticket_saved'), 'success');
-                return response()->json(['success' => true]);
+                return response()->json(['success' => true, 'id' => $result]);
             } else {
 
                 $ticket = app()->makeWith(TicketModel::class, ['values' => $params]);
@@ -60,7 +59,11 @@ public function post($params): Response
             }
         }
 
-        return response()->json(['success' => true]);
+        return response()->json([
+            'success' => true,
+            
+
+        ]);
     }
 
 
diff --git a/app/Domain/Tickets/Hxcontrollers/ShowKanban.php b/app/Domain/Tickets/Hxcontrollers/ShowKanban.php
new file mode 100644
index 000000000..9400d85d6
--- /dev/null
+++ b/app/Domain/Tickets/Hxcontrollers/ShowKanban.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace Leantime\Domain\Tickets\Hxcontrollers;
+
+use Leantime\Core\Controller\HtmxController;
+use Leantime\Domain\Tickets\Services\Tickets;
+use Leantime\Domain\Timesheets\Services\Timesheets;
+use Leantime\Domain\Projects\Services\Projects;
+use Symfony\Component\HttpFoundation\Response;
+use Leantime\Core\Support\FromFormat;
+
+
+class ShowKanban extends HtmxController
+{
+    protected static string $view = 'tickets::components.ticket-column';
+
+    private Tickets $ticketService;
+    private Timesheets $timesheetService;
+    /**
+     * Controller constructor
+     *
+     */
+    public function init(Tickets $ticketService): void
+    {
+        $this->ticketService = $ticketService;
+    }
+
+
+    public function post($params): Response
+    {
+        $result = $this->ticketService->quickAddTicket($params);
+        return response()->json(['success' => $result]);
+    }
+}
diff --git a/app/Domain/Tickets/Js/ticketsController.js b/app/Domain/Tickets/Js/ticketsController.js
index 5a9c8ed51..a525c5e5c 100644
--- a/app/Domain/Tickets/Js/ticketsController.js
+++ b/app/Domain/Tickets/Js/ticketsController.js
@@ -45,7 +45,7 @@ export const updateRemainingHours = function (element, id) {
         id,
         value,
         function () {
-            jQuery.growl({message: i18n.__("short_notifications.remaining_hours_updated"), style: "success"});
+            jQuery.growl({message: window.leantime.i18n.__("short_notifications.remaining_hours_updated"), style: "success"});
         }
     );
 };
@@ -56,7 +56,7 @@ export const updatePlannedHours = function (element, id) {
         id,
         value,
         function () {
-            jQuery.growl({message: i18n.__("short_notifications.planned_hours_updated"), style: "success"});
+            jQuery.growl({message: window.leantime.i18n.__("short_notifications.planned_hours_updated"), style: "success"});
         }
     );
 };
@@ -88,8 +88,8 @@ export const initGanttChart = function (tasks, viewMode, readonly) {
                         arrow_curve: 5,
                         padding:20,
                         view_mode: 'Month',
-                        date_format: i18n.__("language.momentJSDate"),
-                        language: i18n.__("language.code").slice(0, 2), //Get first 2 characters of language code
+                        date_format: window.leantime.i18n.__("language.momentJSDate"),
+                        language: window.leantime.i18n.__("language.code").slice(0, 2), //Get first 2 characters of language code
                         additional_rows: 5,
                         custom_popup_html: function (task) {
 
@@ -108,13 +108,13 @@ export const initGanttChart = function (tasks, viewMode, readonly) {
 
                             if (task.type === 'milestone') {
                                 popUpHTML += '<h4><a href="#/tickets/editMilestone/' + task.id + '" >' + htmlEntities(task.name) + '</a></h4><br /> ' +
-                                 '<p>' + i18n.__("text.expected_to_finish_by") + ' <strong>' + dateTime + '</strong><br /> ' +
+                                 '<p>' + window.leantime.i18n.__("text.expected_to_finish_by") + ' <strong>' + dateTime + '</strong><br /> ' +
                                  '' + Math.round(task.progress) + '%</p> ' +
-                                 '<a href="#/tickets/editMilestone/' + task.id + '" ><span class="fa fa-map"></span> ' + i18n.__("links.edit_milestone") + '</a> | ' +
-                                 '<a href="' + appUrl + '/tickets/showKanban?milestone=' + task.id + '"><span class="fa-pushpin"></span> ' + i18n.__("links.view_todos") + '</a> ';
+                                 '<a href="#/tickets/editMilestone/' + task.id + '" ><span class="fa fa-map"></span> ' + window.leantime.i18n.__("links.edit_milestone") + '</a> | ' +
+                                 '<a href="' + appUrl + '/tickets/showKanban?milestone=' + task.id + '"><span class="fa-pushpin"></span> ' + window.leantime.i18n.__("links.view_todos") + '</a> ';
                             } else {
                                 popUpHTML += '<h4><a href="#/tickets/showTicket/' + task.id + '">' + htmlEntities(task.name) + '</a></h4><br /> ' +
-                                 '<a href="#/tickets/showTicket/' + task.id + '"><span class="fa fa-thumb-tack"></span> ' + i18n.__("links.edit_todo") + '</a> ';
+                                 '<a href="#/tickets/showTicket/' + task.id + '"><span class="fa fa-thumb-tack"></span> ' + window.leantime.i18n.__("links.edit_todo") + '</a> ';
                             }
 
                              popUpHTML += '</div>';
@@ -175,9 +175,9 @@ export const initGanttChart = function (tasks, viewMode, readonly) {
                             return '<div class="details-container"> ' +
                                 '<small><b>' + task.projectName + '</b></small>' +
                                 '<h4>' + htmlEntities(task.name) + '</h4><br /> ' +
-                                '<p>' + i18n.__("text.expected_to_finish_by") + ' <strong>' + end_date + '</strong><br /> ' +
+                                '<p>' + window.leantime.i18n.__("text.expected_to_finish_by") + ' <strong>' + end_date + '</strong><br /> ' +
                                 '' + Math.round(task.progress) + '%</p> ' +
-                                '<a href="#/tickets/showKanban&milestone=' + task.id + '"><span class="fa-pushpin"></span> ' + i18n.__("links.view_todos") + '</a> ' +
+                                '<a href="#/tickets/showKanban&milestone=' + task.id + '"><span class="fa-pushpin"></span> ' + window.leantime.i18n.__("links.view_todos") + '</a> ' +
 
                                 '</div>';
                         },
@@ -238,18 +238,18 @@ export const initSprintDates = function () {
                 {
                     numberOfMonths: 1,
                     dateFormat: getFormatFromSettings("dateformat", "jquery"),
-                    dayNames: i18n.__("language.dayNames").split(","),
-                    dayNamesMin:  i18n.__("language.dayNamesMin").split(","),
-                    dayNamesShort: i18n.__("language.dayNamesShort").split(","),
-                    monthNames: i18n.__("language.monthNames").split(","),
-                    currentText: i18n.__("language.currentText"),
-                    closeText: i18n.__("language.closeText"),
-                    buttonText: i18n.__("language.buttonText"),
-                    isRTL: i18n.__("language.isRTL") === "true" ? 1 : 0,
-                    nextText: i18n.__("language.nextText"),
-                    prevText: i18n.__("language.prevText"),
-                    weekHeader: i18n.__("language.weekHeader"),
-                    firstDay: i18n.__("language.firstDayOfWeek"),
+                    dayNames: window.leantime.i18n.__("language.dayNames").split(","),
+                    dayNamesMin:  window.leantime.i18n.__("language.dayNamesMin").split(","),
+                    dayNamesShort: window.leantime.i18n.__("language.dayNamesShort").split(","),
+                    monthNames: window.leantime.i18n.__("language.monthNames").split(","),
+                    currentText: window.leantime.i18n.__("language.currentText"),
+                    closeText: window.leantime.i18n.__("language.closeText"),
+                    buttonText: window.leantime.i18n.__("language.buttonText"),
+                    isRTL: window.leantime.i18n.__("language.isRTL") === "true" ? 1 : 0,
+                    nextText: window.leantime.i18n.__("language.nextText"),
+                    prevText: window.leantime.i18n.__("language.prevText"),
+                    weekHeader: window.leantime.i18n.__("language.weekHeader"),
+                    firstDay: window.leantime.i18n.__("language.firstDayOfWeek"),
                 }
             )
             .on(
@@ -267,18 +267,18 @@ export const initSprintDates = function () {
                 defaultDate: "+1w",
                 numberOfMonths: 1,
                 dateFormat: getFormatFromSettings("dateformat", "jquery"),
-                dayNames: i18n.__("language.dayNames").split(","),
-                dayNamesMin:  i18n.__("language.dayNamesMin").split(","),
-                dayNamesShort: i18n.__("language.dayNamesShort").split(","),
-                monthNames: i18n.__("language.monthNames").split(","),
-                currentText: i18n.__("language.currentText"),
-                closeText: i18n.__("language.closeText"),
-                buttonText: i18n.__("language.buttonText"),
-                isRTL: i18n.__("language.isRTL") === "true" ? 1 : 0,
-                nextText: i18n.__("language.nextText"),
-                prevText: i18n.__("language.prevText"),
-                weekHeader: i18n.__("language.weekHeader"),
-                firstDay: i18n.__("language.firstDayOfWeek"),
+                dayNames: window.leantime.i18n.__("language.dayNames").split(","),
+                dayNamesMin:  window.leantime.i18n.__("language.dayNamesMin").split(","),
+                dayNamesShort: window.leantime.i18n.__("language.dayNamesShort").split(","),
+                monthNames: window.leantime.i18n.__("language.monthNames").split(","),
+                currentText: window.leantime.i18n.__("language.currentText"),
+                closeText: window.leantime.i18n.__("language.closeText"),
+                buttonText: window.leantime.i18n.__("language.buttonText"),
+                isRTL: window.leantime.i18n.__("language.isRTL") === "true" ? 1 : 0,
+                nextText: window.leantime.i18n.__("language.nextText"),
+                prevText: window.leantime.i18n.__("language.prevText"),
+                weekHeader: window.leantime.i18n.__("language.weekHeader"),
+                firstDay: window.leantime.i18n.__("language.firstDayOfWeek"),
             }
         )
         .on(
@@ -309,18 +309,18 @@ export const _initMilestoneDates = function () {
                 {
                     numberOfMonths: 1,
                     dateFormat: getFormatFromSettings("dateformat", "jquery"),
-                    dayNames: i18n.__("language.dayNames").split(","),
-                    dayNamesMin:  i18n.__("language.dayNamesMin").split(","),
-                    dayNamesShort: i18n.__("language.dayNamesShort").split(","),
-                    monthNames: i18n.__("language.monthNames").split(","),
-                    currentText: i18n.__("language.currentText"),
-                    closeText: i18n.__("language.closeText"),
-                    buttonText: i18n.__("language.buttonText"),
-                    isRTL: i18n.__("language.isRTL") === "true" ? 1 : 0,
-                    nextText: i18n.__("language.nextText"),
-                    prevText: i18n.__("language.prevText"),
-                    weekHeader: i18n.__("language.weekHeader"),
-                    firstDay: i18n.__("language.firstDayOfWeek"),
+                    dayNames: window.leantime.i18n.__("language.dayNames").split(","),
+                    dayNamesMin:  window.leantime.i18n.__("language.dayNamesMin").split(","),
+                    dayNamesShort: window.leantime.i18n.__("language.dayNamesShort").split(","),
+                    monthNames: window.leantime.i18n.__("language.monthNames").split(","),
+                    currentText: window.leantime.i18n.__("language.currentText"),
+                    closeText: window.leantime.i18n.__("language.closeText"),
+                    buttonText: window.leantime.i18n.__("language.buttonText"),
+                    isRTL: window.leantime.i18n.__("language.isRTL") === "true" ? 1 : 0,
+                    nextText: window.leantime.i18n.__("language.nextText"),
+                    prevText: window.leantime.i18n.__("language.prevText"),
+                    weekHeader: window.leantime.i18n.__("language.weekHeader"),
+                    firstDay: window.leantime.i18n.__("language.firstDayOfWeek"),
                 }
             )
             .on(
@@ -334,18 +334,18 @@ export const _initMilestoneDates = function () {
                 defaultDate: "+1w",
                 numberOfMonths: 1,
                 dateFormat: getFormatFromSettings("dateformat", "jquery"),
-                dayNames: i18n.__("language.dayNames").split(","),
-                dayNamesMin:  i18n.__("language.dayNamesMin").split(","),
-                dayNamesShort: i18n.__("language.dayNamesShort").split(","),
-                monthNames: i18n.__("language.monthNames").split(","),
-                currentText: i18n.__("language.currentText"),
-                closeText: i18n.__("language.closeText"),
-                buttonText: i18n.__("language.buttonText"),
-                isRTL: i18n.__("language.isRTL") === "true" ? 1 : 0,
-                nextText: i18n.__("language.nextText"),
-                prevText: i18n.__("language.prevText"),
-                weekHeader: i18n.__("language.weekHeader"),
-                firstDay: i18n.__("language.firstDayOfWeek"),
+                dayNames: window.leantime.i18n.__("language.dayNames").split(","),
+                dayNamesMin:  window.leantime.i18n.__("language.dayNamesMin").split(","),
+                dayNamesShort: window.leantime.i18n.__("language.dayNamesShort").split(","),
+                monthNames: window.leantime.i18n.__("language.monthNames").split(","),
+                currentText: window.leantime.i18n.__("language.currentText"),
+                closeText: window.leantime.i18n.__("language.closeText"),
+                buttonText: window.leantime.i18n.__("language.buttonText"),
+                isRTL: window.leantime.i18n.__("language.isRTL") === "true" ? 1 : 0,
+                nextText: window.leantime.i18n.__("language.nextText"),
+                prevText: window.leantime.i18n.__("language.prevText"),
+                weekHeader: window.leantime.i18n.__("language.weekHeader"),
+                firstDay: window.leantime.i18n.__("language.firstDayOfWeek"),
             }
         )
             .on(
@@ -377,18 +377,18 @@ export const initMilestoneDatesAsyncUpdate = function () {
                 {
                     numberOfMonths: 1,
                     dateFormat: getFormatFromSettings("dateformat", "jquery"),
-                    dayNames: i18n.__("language.dayNames").split(","),
-                    dayNamesMin:  i18n.__("language.dayNamesMin").split(","),
-                    dayNamesShort: i18n.__("language.dayNamesShort").split(","),
-                    monthNames: i18n.__("language.monthNames").split(","),
-                    currentText: i18n.__("language.currentText"),
-                    closeText: i18n.__("language.closeText"),
-                    buttonText: i18n.__("language.buttonText"),
-                    isRTL: i18n.__("language.isRTL") === "true" ? 1 : 0,
-                    nextText: i18n.__("language.nextText"),
-                    prevText: i18n.__("language.prevText"),
-                    weekHeader: i18n.__("language.weekHeader"),
-                    firstDay: i18n.__("language.firstDayOfWeek"),
+                    dayNames: window.leantime.i18n.__("language.dayNames").split(","),
+                    dayNamesMin:  window.leantime.i18n.__("language.dayNamesMin").split(","),
+                    dayNamesShort: window.leantime.i18n.__("language.dayNamesShort").split(","),
+                    monthNames: window.leantime.i18n.__("language.monthNames").split(","),
+                    currentText: window.leantime.i18n.__("language.currentText"),
+                    closeText: window.leantime.i18n.__("language.closeText"),
+                    buttonText: window.leantime.i18n.__("language.buttonText"),
+                    isRTL: window.leantime.i18n.__("language.isRTL") === "true" ? 1 : 0,
+                    nextText: window.leantime.i18n.__("language.nextText"),
+                    prevText: window.leantime.i18n.__("language.prevText"),
+                    weekHeader: window.leantime.i18n.__("language.weekHeader"),
+                    firstDay: window.leantime.i18n.__("language.firstDayOfWeek"),
                 }
             )
             .on(
@@ -406,7 +406,7 @@ export const initMilestoneDatesAsyncUpdate = function () {
                     console.log(date);
                     console.log(dateTo);
                     updateEditFromDates(id, date, function() {
-                        jQuery.growl({message: i18n.__("short_notifications.date_updated"), style: "success"});
+                        jQuery.growl({message: window.leantime.i18n.__("short_notifications.date_updated"), style: "success"});
                     });
 
 
@@ -420,18 +420,18 @@ export const initMilestoneDatesAsyncUpdate = function () {
                 defaultDate: "+1w",
                 numberOfMonths: 1,
                 dateFormat: getFormatFromSettings("dateformat", "jquery"),
-                dayNames: i18n.__("language.dayNames").split(","),
-                dayNamesMin:  i18n.__("language.dayNamesMin").split(","),
-                dayNamesShort: i18n.__("language.dayNamesShort").split(","),
-                monthNames: i18n.__("language.monthNames").split(","),
-                currentText: i18n.__("language.currentText"),
-                closeText: i18n.__("language.closeText"),
-                buttonText: i18n.__("language.buttonText"),
-                isRTL: i18n.__("language.isRTL") === "true" ? 1 : 0,
-                nextText: i18n.__("language.nextText"),
-                prevText: i18n.__("language.prevText"),
-                weekHeader: i18n.__("language.weekHeader"),
-                firstDay: i18n.__("language.firstDayOfWeek"),
+                dayNames: window.leantime.i18n.__("language.dayNames").split(","),
+                dayNamesMin:  window.leantime.i18n.__("language.dayNamesMin").split(","),
+                dayNamesShort: window.leantime.i18n.__("language.dayNamesShort").split(","),
+                monthNames: window.leantime.i18n.__("language.monthNames").split(","),
+                currentText: window.leantime.i18n.__("language.currentText"),
+                closeText: window.leantime.i18n.__("language.closeText"),
+                buttonText: window.leantime.i18n.__("language.buttonText"),
+                isRTL: window.leantime.i18n.__("language.isRTL") === "true" ? 1 : 0,
+                nextText: window.leantime.i18n.__("language.nextText"),
+                prevText: window.leantime.i18n.__("language.prevText"),
+                weekHeader: window.leantime.i18n.__("language.weekHeader"),
+                firstDay: window.leantime.i18n.__("language.firstDayOfWeek"),
             }
         )
             .on(
@@ -449,7 +449,7 @@ export const initMilestoneDatesAsyncUpdate = function () {
                     console.log(dateFrom);
                     console.log(date);
                     updateEditToDates(id, date, function() {
-                        jQuery.growl({message: i18n.__("short_notifications.date_updated"), style: "success"});
+                        jQuery.growl({message: window.leantime.i18n.__("short_notifications.date_updated"), style: "success"});
                     });
 
                 }
@@ -506,7 +506,7 @@ export const initEffortDropdown = function () {
             ).done(
                 function () {
                     jQuery("#effortDropdownMenuLink" + ticketId + " span.text").text(storyPointLabels[effortId]);
-                    jQuery.growl({message: i18n.__("short_notifications.effort_updated"), style: "success"});
+                    jQuery.growl({message: window.leantime.i18n.__("short_notifications.effort_updated"), style: "success"});
 
                 }
             );
@@ -555,7 +555,7 @@ export const initPriorityDropdown = function () {
                     jQuery("#priorityDropdownMenuLink" + ticketId + "").parents(".ticketBox").addClass("priority-border-" + priorityId);
 
 
-                    jQuery.growl({message: i18n.__("short_notifications.priority_updated"), style: "success"});
+                    jQuery.growl({message: window.leantime.i18n.__("short_notifications.priority_updated"), style: "success"});
 
                 }
             );
@@ -568,7 +568,7 @@ export const initPriorityDropdown = function () {
 
 export const initMilestoneDropdown = function () {
 
-    jQuery(".milestoneDropdown .dropdown-menu a").unbind().on("click", function () {
+    jQuery(".milestoneDropdown .dropdown .menu li  a").unbind().on("click", function () {
 
             var dataValue = jQuery(this).attr("data-value").split("_");
             var dataLabel = jQuery(this).attr('data-label');
@@ -594,7 +594,7 @@ export const initMilestoneDropdown = function () {
                 function () {
                     jQuery("#milestoneDropdownMenuLink" + ticketId + " span.text").text(dataLabel);
                     jQuery("#milestoneDropdownMenuLink" + ticketId).css("backgroundColor", color);
-                    jQuery.growl({message: i18n.__("short_notifications.milestone_updated"), style: "success"});
+                    jQuery.growl({message: window.leantime.i18n.__("short_notifications.milestone_updated"), style: "success"});
                 }
             );
         }
@@ -627,7 +627,7 @@ export const initStatusDropdown = function () {
                 function (response) {
                     jQuery("#statusDropdownMenuLink" + ticketId + " span.text").text(dataLabel);
                     jQuery("#statusDropdownMenuLink" + ticketId).removeClass().addClass(className + " dropdown-toggle f-left status ");
-                    jQuery.growl({message: i18n.__("short_notifications.status_updated"), style: "success"});
+                    jQuery.growl({message: window.leantime.i18n.__("short_notifications.status_updated"), style: "success"});
 
                     handleAsyncResponse(response);
 
@@ -664,7 +664,7 @@ export const initUserDropdown = function () {
                 function () {
                     jQuery("#userDropdownMenuLink" + ticketId + " span.text span#userImage" + ticketId + " img").attr("src", appUrl + "/api/users?profileImage=" + userId);
                     jQuery("#userDropdownMenuLink" + ticketId + " span.text span#user" + ticketId).text(dataLabel);
-                    jQuery.growl({message: i18n.__("short_notifications.user_updated"), style: "success"});
+                    jQuery.growl({message: window.leantime.i18n.__("short_notifications.user_updated"), style: "success"});
                 }
             );
         }
@@ -694,7 +694,7 @@ export const initAsyncInputChange = function () {
                 }
             ).done(
                 function () {
-                    jQuery.growl({message: i18n.__("notifications.subtask_saved"), style: "success"});
+                    jQuery.growl({message: window.leantime.i18n.__("notifications.subtask_saved"), style: "success"});
                 }
             );
         }
@@ -726,7 +726,7 @@ export const initSprintDropdown = function () {
             ).done(
                 function () {
                     jQuery("#sprintDropdownMenuLink" + ticketId + " span.text").text(dataLabel);
-                    jQuery.growl({message: i18n.__("short_notifications.sprint_updated"), style: "success"});
+                    jQuery.growl({message: window.leantime.i18n.__("short_notifications.sprint_updated"), style: "success"});
                 }
             );
         }
@@ -784,7 +784,7 @@ export const initDueDateTimePickers = function () {
         var id = jQuery(this).attr("data-id");
 
         updateDueDates(id, parsed, function () {
-            jQuery.growl({message: i18n.__("short_notifications.duedate_updated"), style: "success"});
+            jQuery.growl({message: window.leantime.i18n.__("short_notifications.duedate_updated"), style: "success"});
         });
 
     });
@@ -792,19 +792,21 @@ export const initDueDateTimePickers = function () {
 };
 
 export const initTimeSheetChart = function (labels, d2, d3, canvasId) {
+    console.log(labels);
+    console.log(window.leantime.i18n)
     var ctx = document.getElementById(canvasId).getContext('2d');
     var stackedLine = new Chart(ctx, {
         type: 'line',
         data: {
             labels: labels,
             datasets:[{
-                label: i18n.__("label.booked_hours"),
+                label: window.leantime.i18n.__("label.booked_hours"),
                 backgroundColor: 'rgba(201,48,44, 0.5)',
                 borderColor: 'rgb(201,48,44)',
                 data:d2
             },
                 {
-                    label:i18n.__("label.planned_hours"),
+                    label:window.leantime.i18n.__("label.planned_hours"),
                     backgroundColor: 'rgba(54, 162, 235, 0.5)',
                     borderColor:'rgb(54, 162, 235)',
                     data:d3
@@ -816,7 +818,7 @@ export const initTimeSheetChart = function (labels, d2, d3, canvasId) {
                     display: true,
                     title: {
                         display: true,
-                        text: i18n.__("label.booked_hours"),
+                        text: window.leantime.i18n.__("label.booked_hours"),
                     },
                     type: 'time',
                     time: {
@@ -827,7 +829,7 @@ export const initTimeSheetChart = function (labels, d2, d3, canvasId) {
                     display: true,
                     title: {
                         display: true,
-                        text: i18n.__("label.planned_hours")
+                        text: window.leantime.i18n.__("label.planned_hours")
                     },
                     ticks: {
                         beginAtZero: true
@@ -1149,31 +1151,31 @@ export const initTicketsTable = function (groupBy) {
 
         var allTickets = jQuery(".ticketTable").DataTable({
             "language": {
-                "decimal":        i18n.__("datatables.decimal"),
-                "emptyTable":     i18n.__("datatables.emptyTable"),
-                "info":           i18n.__("datatables.info"),
-                "infoEmpty":      i18n.__("datatables.infoEmpty"),
-                "infoFiltered":   i18n.__("datatables.infoFiltered"),
-                "infoPostFix":    i18n.__("datatables.infoPostFix"),
-                "thousands":      i18n.__("datatables.thousands"),
-                "lengthMenu":     i18n.__("datatables.lengthMenu"),
-                "loadingRecords": i18n.__("datatables.loadingRecords"),
-                "processing":     i18n.__("datatables.processing"),
-                "search":         i18n.__("datatables.search"),
-                "zeroRecords":    i18n.__("datatables.zeroRecords"),
+                "decimal":        window.leantime.i18n.__("datatables.decimal"),
+                "emptyTable":     window.leantime.i18n.__("datatables.emptyTable"),
+                "info":           window.leantime.i18n.__("datatables.info"),
+                "infoEmpty":      window.leantime.i18n.__("datatables.infoEmpty"),
+                "infoFiltered":   window.leantime.i18n.__("datatables.infoFiltered"),
+                "infoPostFix":    window.leantime.i18n.__("datatables.infoPostFix"),
+                "thousands":      window.leantime.i18n.__("datatables.thousands"),
+                "lengthMenu":     window.leantime.i18n.__("datatables.lengthMenu"),
+                "loadingRecords": window.leantime.i18n.__("datatables.loadingRecords"),
+                "processing":     window.leantime.i18n.__("datatables.processing"),
+                "search":         window.leantime.i18n.__("datatables.search"),
+                "zeroRecords":    window.leantime.i18n.__("datatables.zeroRecords"),
                 "paginate": {
-                    "first":      i18n.__("datatables.first"),
-                    "last":       i18n.__("datatables.last"),
-                    "next":       i18n.__("datatables.next"),
-                    "previous":   i18n.__("datatables.previous"),
+                    "first":      window.leantime.i18n.__("datatables.first"),
+                    "last":       window.leantime.i18n.__("datatables.last"),
+                    "next":       window.leantime.i18n.__("datatables.next"),
+                    "previous":   window.leantime.i18n.__("datatables.previous"),
                 },
                 "aria": {
-                    "sortAscending":  i18n.__("datatables.sortAscending"),
-                    "sortDescending":i18n.__("datatables.sortDescending"),
+                    "sortAscending":  window.leantime.i18n.__("datatables.sortAscending"),
+                    "sortDescending":window.leantime.i18n.__("datatables.sortDescending"),
                 },
                 "buttons": {
-                    colvis: i18n.__("datatables.buttons.colvis"),
-                    csv: i18n.__("datatables.buttons.download")
+                    colvis: window.leantime.i18n.__("datatables.buttons.colvis"),
+                    csv: window.leantime.i18n.__("datatables.buttons.download")
                 }
 
             },
@@ -1292,7 +1294,7 @@ export const initTicketsTable = function (groupBy) {
             buttons: [
                 {
                     extend: 'csvHtml5',
-                    title: i18n.__("label.filename_fileexport"),
+                    title: window.leantime.i18n.__("label.filename_fileexport"),
                     charset: 'utf-8',
                     bom: true,
                     exportOptions: {
@@ -1376,31 +1378,31 @@ export const initTicketsList = function (groupBy) {
 
         var allTickets = jQuery(".listStyleTable").DataTable({
             "language": {
-                "decimal":        i18n.__("datatables.decimal"),
-                "emptyTable":     i18n.__("datatables.emptyTable"),
-                "info":           i18n.__("datatables.info"),
-                "infoEmpty":      i18n.__("datatables.infoEmpty"),
-                "infoFiltered":   i18n.__("datatables.infoFiltered"),
-                "infoPostFix":    i18n.__("datatables.infoPostFix"),
-                "thousands":      i18n.__("datatables.thousands"),
-                "lengthMenu":     i18n.__("datatables.lengthMenu"),
-                "loadingRecords": i18n.__("datatables.loadingRecords"),
-                "processing":     i18n.__("datatables.processing"),
-                "search":         i18n.__("datatables.search"),
-                "zeroRecords":    i18n.__("datatables.zeroRecords"),
+                "decimal":        window.leantime.i18n.__("datatables.decimal"),
+                "emptyTable":     window.leantime.i18n.__("datatables.emptyTable"),
+                "info":           window.leantime.i18n.__("datatables.info"),
+                "infoEmpty":      window.leantime.i18n.__("datatables.infoEmpty"),
+                "infoFiltered":   window.leantime.i18n.__("datatables.infoFiltered"),
+                "infoPostFix":    window.leantime.i18n.__("datatables.infoPostFix"),
+                "thousands":      window.leantime.i18n.__("datatables.thousands"),
+                "lengthMenu":     window.leantime.i18n.__("datatables.lengthMenu"),
+                "loadingRecords": window.leantime.i18n.__("datatables.loadingRecords"),
+                "processing":     window.leantime.i18n.__("datatables.processing"),
+                "search":         window.leantime.i18n.__("datatables.search"),
+                "zeroRecords":    window.leantime.i18n.__("datatables.zeroRecords"),
                 "paginate": {
-                    "first":      i18n.__("datatables.first"),
-                    "last":       i18n.__("datatables.last"),
-                    "next":       i18n.__("datatables.next"),
-                    "previous":   i18n.__("datatables.previous"),
+                    "first":      window.leantime.i18n.__("datatables.first"),
+                    "last":       window.leantime.i18n.__("datatables.last"),
+                    "next":       window.leantime.i18n.__("datatables.next"),
+                    "previous":   window.leantime.i18n.__("datatables.previous"),
                 },
                 "aria": {
-                    "sortAscending":  i18n.__("datatables.sortAscending"),
-                    "sortDescending":i18n.__("datatables.sortDescending"),
+                    "sortAscending":  window.leantime.i18n.__("datatables.sortAscending"),
+                    "sortDescending":window.leantime.i18n.__("datatables.sortDescending"),
                 },
                 "buttons": {
-                    colvis: i18n.__("datatables.buttons.colvis"),
-                    csv: i18n.__("datatables.buttons.download")
+                    colvis: window.leantime.i18n.__("datatables.buttons.colvis"),
+                    csv: window.leantime.i18n.__("datatables.buttons.download")
                 }
 
             },
@@ -1441,31 +1443,31 @@ export const initMilestoneTable = function (groupBy) {
 
         var allTickets = jQuery(".ticketTable").DataTable({
             "language": {
-                "decimal":        i18n.__("datatables.decimal"),
-                "emptyTable":     i18n.__("datatables.emptyTable"),
-                "info":           i18n.__("datatables.info"),
-                "infoEmpty":      i18n.__("datatables.infoEmpty"),
-                "infoFiltered":   i18n.__("datatables.infoFiltered"),
-                "infoPostFix":    i18n.__("datatables.infoPostFix"),
-                "thousands":      i18n.__("datatables.thousands"),
-                "lengthMenu":     i18n.__("datatables.lengthMenu"),
-                "loadingRecords": i18n.__("datatables.loadingRecords"),
-                "processing":     i18n.__("datatables.processing"),
-                "search":         i18n.__("datatables.search"),
-                "zeroRecords":    i18n.__("datatables.zeroRecords"),
+                "decimal":        window.leantime.i18n.__("datatables.decimal"),
+                "emptyTable":     window.leantime.i18n.__("datatables.emptyTable"),
+                "info":           window.leantime.i18n.__("datatables.info"),
+                "infoEmpty":      window.leantime.i18n.__("datatables.infoEmpty"),
+                "infoFiltered":   window.leantime.i18n.__("datatables.infoFiltered"),
+                "infoPostFix":    window.leantime.i18n.__("datatables.infoPostFix"),
+                "thousands":      window.leantime.i18n.__("datatables.thousands"),
+                "lengthMenu":     window.leantime.i18n.__("datatables.lengthMenu"),
+                "loadingRecords": window.leantime.i18n.__("datatables.loadingRecords"),
+                "processing":     window.leantime.i18n.__("datatables.processing"),
+                "search":         window.leantime.i18n.__("datatables.search"),
+                "zeroRecords":    window.leantime.i18n.__("datatables.zeroRecords"),
                 "paginate": {
-                    "first":      i18n.__("datatables.first"),
-                    "last":       i18n.__("datatables.last"),
-                    "next":       i18n.__("datatables.next"),
-                    "previous":   i18n.__("datatables.previous"),
+                    "first":      window.leantime.i18n.__("datatables.first"),
+                    "last":       window.leantime.i18n.__("datatables.last"),
+                    "next":       window.leantime.i18n.__("datatables.next"),
+                    "previous":   window.leantime.i18n.__("datatables.previous"),
                 },
                 "aria": {
-                    "sortAscending":  i18n.__("datatables.sortAscending"),
-                    "sortDescending":i18n.__("datatables.sortDescending"),
+                    "sortAscending":  window.leantime.i18n.__("datatables.sortAscending"),
+                    "sortDescending":window.leantime.i18n.__("datatables.sortDescending"),
                 },
                 "buttons": {
-                    colvis: i18n.__("datatables.buttons.colvis"),
-                    csv: i18n.__("datatables.buttons.download")
+                    colvis: window.leantime.i18n.__("datatables.buttons.colvis"),
+                    csv: window.leantime.i18n.__("datatables.buttons.download")
                 }
 
             },
@@ -1486,7 +1488,7 @@ export const initMilestoneTable = function (groupBy) {
             buttons: [
                 {
                     extend: 'csvHtml5',
-                    title: i18n.__("label.filename_fileexport"),
+                    title: window.leantime.i18n.__("label.filename_fileexport"),
                     charset: 'utf-8',
                     bom: true,
                     exportOptions: {
diff --git a/app/Domain/Tickets/Templates/components/milestone-dropdown.blade.php b/app/Domain/Tickets/Templates/components/milestone-dropdown.blade.php
index d136e455d..a0b3c461a 100644
--- a/app/Domain/Tickets/Templates/components/milestone-dropdown.blade.php
+++ b/app/Domain/Tickets/Templates/components/milestone-dropdown.blade.php
@@ -17,6 +17,7 @@
         position="bottom" 
         align="start"
         :selectable="true"
+        class="milestoneDropdown"
     >
         <x-slot:menu>
             <li class="nav-header border">{{ __('dropdown.choose_milestone') }}</li>
@@ -37,10 +38,21 @@
                     id="ticketMilestoneChange{{ $ticket['id'] . $milestone->id }}"
                     style="background-color: {{ $milestone->tags }}"
                     data-style="background-color: {{ $milestone->tags }}"
+                    buttonStyle="background-color: {{ $milestone->tags }}"
                 >
                     {{ $milestone->headline }}
                 </x-global::actions.dropdown.item>
             @endforeach
         </x-slot:menu>
     </x-global::actions.dropdown>
-</div> 
\ No newline at end of file
+</div> 
+
+<script type="module">
+    import "@mix('/js/Domain/Tickets/Js/ticketsController.js')"
+
+    jquery(document).ready(function() {
+        ticketsController.initMilestoneDropdown();
+    });
+</script>
+
+
diff --git a/app/Domain/Tickets/Templates/components/timesheet.blade.php b/app/Domain/Tickets/Templates/components/timesheet.blade.php
index de1ea0f94..4ab4a5100 100644
--- a/app/Domain/Tickets/Templates/components/timesheet.blade.php
+++ b/app/Domain/Tickets/Templates/components/timesheet.blade.php
@@ -17,7 +17,7 @@
         <br />
 
         <form hx-post="{{ BASE_URL }}/tickets/showTicket/{{ $ticket->id }}#timesheet" hx-trigger="submit"
-            hx-swap="none" class="space-y-4">
+            hx-swap="none" class="space-y-4" hx-indicator="#save-indicator">
             <input type="hidden" name="saveTimes" value="1" />
 
             <x-global::forms.select :label-text="__('label.timesheet_kind')" name="kind" id="kind">
@@ -28,7 +28,7 @@
                 @endforeach
             </x-global::forms.select>
 
-            <x-global::forms.text-input :label-text="__('label.date')" name="date" id="timesheetdate" :value="$values['date']" />
+            <x-global::forms.text-input :label-text="__('label.date')" name="date" id="timesheetdate" :value="format($values['date'])->date()" />
 
             <x-global::forms.text-input :label-text="__('label.hours')" type="number" name="hours" id="hours"
                 :value="$values['hours']" />
@@ -41,7 +41,10 @@
             </div>
 
             <br>
-            <x-global::forms.button variant="primary" labelText="Save" />
+            <x-global::forms.button variant="primary" labelText="Save" scale="sm" />
+            <div id="save-indicator" class="htmx-indicator">
+                <span class="loading loading-spinner"></span> Saving...
+            </div>
         </form>
 
     </div>
@@ -51,40 +54,40 @@
         <br />
         <canvas id="canvas"></canvas>
         <p><br />
-            <?php echo $tpl->__('label.planned_hours'); ?>: <?php echo $ticket->planHours; ?><br />
-            <?php echo $tpl->__('label.booked_hours'); ?>: <?php echo $tpl->get('timesheetsAllHours'); ?><br />
-            <?php echo $tpl->__('label.actual_hours_remaining'); ?>: <?php echo $remainingHours; ?><br />
+            {!! __('label.planned_hours') !!}: {{ $ticket->planHours }}<br />
+            {!! __('label.booked_hours') !!}: {{ $tpl->get('timesheetsAllHours') }}<br />
+            {!! __('label.actual_hours_remaining') !!}: {{ $remainingHours }}<br />
         </p>
     </div>
 </div>
-
-<script type="text/javascript">
+<script type="module">
+    import "@mix('/js/Domain/Tickets/Js/ticketsController.js')"
     jQuery(document).ready(function($) {
-
         var d2 = [];
         var d3 = [];
         var labels = [];
-        <?php
-        $sum = 0;
-        $ticketHours = $tpl->get('ticketHours');
-        foreach ($ticketHours as $hours) {
-            $sum = $sum + $hours['summe'];
-        
-            echo "labels.push('" .
-                date('Y-m-d', strtotime($hours['utc'] ?? '')) .
-                "');
-                                            ";
-            echo 'd2.push(' .
-                $sum .
-                ');
-                                            ';
-            echo 'd3.push(' .
-                $ticket->planHours .
-                ');
-                                            ';
-        } ?>
+        @php
+            $sum = 0;
+            $ticketHours = $tpl->get('ticketHours');
+            foreach ($ticketHours as $hours) {
+                $sum = $sum + $hours['summe'];
 
-        leantime.ticketsController.initTimeSheetChart(labels, d2, d3, "canvas")
+                echo "labels.push('" .
+                    date('Y-m-d', strtotime($hours['utc'] ?? '')) .
+                    "');
+                                                                                            ";
+                echo 'd2.push(' .
+                    $sum .
+                    ');
+                                                                                            ';
+                echo 'd3.push(' .
+                    $ticket->planHours .
+                    ');
+                                                                                            ';
+            }
+        @endphp
 
+        ticketsController.initTimeSheetChart(labels, d2, d3, "canvas")
+        console.log('Timesheet chart initialized');
     });
 </script>
diff --git a/app/Domain/Tickets/Templates/components/type-select.blade.php b/app/Domain/Tickets/Templates/components/type-select.blade.php
index 871cff0f8..91fc23a24 100644
--- a/app/Domain/Tickets/Templates/components/type-select.blade.php
+++ b/app/Domain/Tickets/Templates/components/type-select.blade.php
@@ -2,19 +2,23 @@
     'contentRole' => 'default',
     'variant' => '',
     'ticketTypes' => '',
-    'labelPosition' => 'top'
+    'labelPosition' => 'top',
 ])
 
 @php
-    $typeIcons = array('story' => 'fa-book', 'task' => 'fa-check-square', 'subtask' => 'fa-diagram-successor', 'bug' => 'fa-bug');
+    $typeIcons = [
+        'story' => 'fa-book',
+        'task' => 'fa-check-square',
+        'subtask' => 'fa-diagram-successor',
+        'bug' => 'fa-bug',
+    ];
 @endphp
 
-<x-global::forms.select id='type' name='type' search="false" :content-role="$contentRole" :label-position="$labelPosition"  :variant="$variant">
+<x-global::forms.select id='type' name='type' search="false" :content-role="$contentRole" :label-position="$labelPosition" :variant="$variant">
     @foreach ($ticketTypes as $type)
-        <x-global::forms.select.option
-            :value="strtolower($type)"
-            :selected="strtolower($type) == strtolower($ticket->type ?? '') ? 'true' : 'false'">
-            <span class="size-sm pr-xs"><x-global::content.icon :icon="strtolower($type)"/> {{  __("label." . strtolower($type)) }}
+        <x-global::forms.select.option :value="strtolower($type)" :selected="strtolower($type) == strtolower($ticket->type ?? '') ? 'true' : 'false'">
+            <span class="size-sm pr-xs"><x-global::content.icon :icon="strtolower($type)" />
+                {!! __('label.' . strtolower($type)) !!}
         </x-global::forms.select.option>
     @endforeach
 </x-global::forms.select>
diff --git a/app/Domain/Tickets/Templates/includes/ticketHeader.blade.php b/app/Domain/Tickets/Templates/includes/ticketHeader.blade.php
index 2e6fe6a79..adbaaec6f 100644
--- a/app/Domain/Tickets/Templates/includes/ticketHeader.blade.php
+++ b/app/Domain/Tickets/Templates/includes/ticketHeader.blade.php
@@ -107,7 +107,7 @@ class="wikiModal inlineEdit"
                         <i class="fa-solid fa-plus"></i> {{ $tpl->__("links.create_sprint_no_icon") }}
                     </x-global::actions.dropdown.item>
             
-                    <li class="nav-header border"></li>
+                    <li class="border"></li>
             
                     <!-- Static Menu Items -->
                     <x-global::actions.dropdown.item 
diff --git a/app/Domain/Tickets/Templates/includes/ticketNewBtn.blade.php b/app/Domain/Tickets/Templates/includes/ticketNewBtn.blade.php
index d61e62208..09c60b621 100644
--- a/app/Domain/Tickets/Templates/includes/ticketNewBtn.blade.php
+++ b/app/Domain/Tickets/Templates/includes/ticketNewBtn.blade.php
@@ -1,7 +1,7 @@
 @if ($login::userIsAtLeast($roles::$editor) && !empty($newField))
     <x-global::actions.dropdown scale="sm">
         <x-slot:label-text>
-                {!! __("links.new_with_icon") !!} <span class="caret"></span>
+                {!! __("links.new_with_icon") !!} <span class="fa fa-caret-down"></span>
         </x-slot:label-text>
         <x-slot:menu>
             @foreach ($newField as $option)
diff --git a/app/Domain/Tickets/Templates/partials/newTicketModal.blade.php b/app/Domain/Tickets/Templates/partials/newTicketModal.blade.php
index b282ab43b..8a4c9e935 100644
--- a/app/Domain/Tickets/Templates/partials/newTicketModal.blade.php
+++ b/app/Domain/Tickets/Templates/partials/newTicketModal.blade.php
@@ -1,6 +1,6 @@
-@php use Leantime\Core\Support\EditorTypeEnum; 
+@php use Leantime\Core\Support\EditorTypeEnum;
 
-$tags = explode(',', $ticket->tags);
+    $tags = explode(',', $ticket->tags);
 @endphp
 
 
@@ -14,18 +14,20 @@
     <div class="row">
 
         <div class="col-md-7">
-            <form hx-post="{{ BASE_URL }}/hx/tickets/newTicket" hx-trigger="submit" hx-swap="none"
-                hx-indicator="#save-indicator">
+            {{-- <form hx-post="{{ BASE_URL }}/hx/tickets/newTicket" hx-trigger="submit" hx-swap="none"
+                hx-indicator="#save-indicator"> --}}
+            <form method="post" action="/tickets/newTicket" >
                 {{-- @include("tickets::includes.ticketDetails") --}}
                 <input type="hidden" name="saveTicket" value="1">
-                <label class="pl-m pb-sm">📄 Details</label>
 
-                <x-global::forms.select label-text="Tags" name="tags[]" content-role="secondary" variant="tags">
 
-                </x-global::forms.select>
 
                 <x-global::forms.text-input type="text" name="headline" value="{{ $ticket->headline }}"
-                    labelText="Title" variant="title" />
+                    placeholder="Add Title" variant="title" />
+
+                <x-global::forms.select label-text="Tags" name="tags[]" content-role="secondary" variant="tags">
+
+                </x-global::forms.select>
 
                 <div class="viewDescription mce-content-body">
                     <div class="min-h-[100px]">
@@ -39,17 +41,17 @@
 
                 <div class="form-group" id="descriptionEditor" style="display:none;">
                     <x-global::forms.text-editor name="description" customId="ticketDescription" :type="EditorTypeEnum::Complex->value"
-                        :value="$ticket->description !== null ? $ticket->description : ''" 
-                        url="{{ BASE_URL }}/hx/tickets/newTicket" />
+                        :value="$ticket->description !== null ? $ticket->description : ''" url="{{ BASE_URL }}/hx/tickets/newTicket" />
                     <br />
                 </div>
                 <br>
 
                 <div class="flex items-center gap-2">
-                    <x-global::forms.button variant="primary" labelText="Save" />
+                    <x-global::forms.button variant="primary" labelText="Save" scale="sm" />
 
-                    <x-global::forms.button tag="button" type="button" variant="link" contentRole="ghost"
-                        labelText="Cancel" onclick="htmx.find('#modal-wrapper #main-page-modal').close();" />
+                    <x-global::forms.button tag="button" type="button" variant="link" scale="sm"
+                        contentRole="ghost" labelText="Cancel"
+                        onclick="htmx.find('#modal-wrapper #main-page-modal').close();" />
 
                     <div id="save-indicator" class="htmx-indicator">
                         <span class="loading loading-spinner"></span> Saving...
diff --git a/app/Domain/Tickets/Templates/partials/showTicket.blade.php b/app/Domain/Tickets/Templates/partials/showTicket.blade.php
index cd0dbeaf4..c20f2be48 100644
--- a/app/Domain/Tickets/Templates/partials/showTicket.blade.php
+++ b/app/Domain/Tickets/Templates/partials/showTicket.blade.php
@@ -36,10 +36,12 @@
 <div class="row">
     <div class="col-md-7">
 
-        <form hx-post="{{ BASE_URL }}hx/tickets/showTicket/{{ $ticket->id }}" hx-trigger="submit" hx-swap="none"
+        <form hx-post="/hx/tickets/showTicket/{{ $ticket->id }}" hx-trigger="submit" hx-swap="none"
             hx-indicator="#save-indicator">
             <input type="hidden" name="saveTicket" value="1">
-            <label class="pl-m pb-sm">📄 Details</label>
+
+            <x-global::forms.text-input type="text" name="headline" value="{{ $ticket->headline }}" placeholder="Add Title"
+                variant="title" />
 
             <x-global::forms.select label-text="Tags" name="tags[]" content-role="secondary" variant="tags">
                 @foreach ($tags as $tag)
@@ -47,16 +49,15 @@
                 @endforeach
             </x-global::forms.select>
 
-            <x-global::forms.text-input type="text" name="headline" value="{{ $ticket->headline }}" labelText="Title"
-                variant="title" />
-
-            <div class="viewDescription mce-content-body">
+            <div class="viewDescription mce-content-body input-bordered">
                 <div class="min-h-[100px]">
-                    @if (!empty($ticket->description))
-                        {!! $ticket->description !!}
-                    @else
-                        <p>Add Description</p>
-                    @endif
+                    <p class="input-bordered">
+                        @if (!empty($ticket->description))
+                            {!! $ticket->description !!}
+                        @else
+                            Add Description
+                        @endif
+                    </p>
                 </div>
             </div>
 
@@ -68,11 +69,12 @@
             <br>
 
             <div class="flex items-center gap-2">
-                <x-global::forms.button variant="primary" labelText="Save" />
+                <x-global::forms.button variant="primary" labelText="Save" scale="sm" />
 
                 {{-- TODO: This should just close the modal --}}
-                <x-global::forms.button tag="button" variant="link" contentRole="ghost" labelText="Cancel"
-                    name="cancel" type="button" onclick="htmx.find('#modal-wrapper #main-page-modal').close();" />
+                <x-global::forms.button tag="button" variant="link" scale="sm" contentRole="ghost"
+                    labelText="Cancel" name="cancel" type="button"
+                    onclick="htmx.find('#modal-wrapper #main-page-modal').close();" />
                 <div id="save-indicator" class="htmx-indicator">
                     <span class="loading loading-spinner"></span> Saving...
                 </div>
@@ -82,7 +84,7 @@
 
 
     <div class="col-md-5" style="border-radius:10px; padding:0px;">
-        <x-global::navigations.tabs name="ticket-details" variant="bordered" size="md">
+        <x-global::navigations.tabs name="ticket-details" variant="bordered" size="md" class="mb-2">
             <x-slot:contents>
                 <x-global::navigations.tabs.content id="connections" ariaLabel="Connections" classExtra="p-sm"
                     :checked="true">
@@ -106,9 +108,8 @@
                 </x-global::navigations.tabs.content>
                 <x-global::navigations.tabs.content id="ticket-settings" ariaLabel="Settings" classExtra="p-sm">
                     <x-tickets::settings :ticket="$ticket" :allAssignedprojects="$allAssignedprojects" :statusLabels="$statusLabels" :ticketTypes="$ticketTypes"
-                        :priorities="$priorities" :efforts="$efforts" :remainingHours="$remainingHours" 
-                        url="{{ BASE_URL }}/hx/tickets/showTicket/{{ $ticket->id }}"
-                        />
+                        :priorities="$priorities" :efforts="$efforts" :remainingHours="$remainingHours"
+                        url="{{ BASE_URL }}/hx/tickets/showTicket/{{ $ticket->id }}" />
                 </x-global::navigations.tabs.content>
             </x-slot:contents>
         </x-global::navigations.tabs>
@@ -124,6 +125,13 @@
         //All accordions start open
         //leantime.editorController.initComplexEditor();
         //tinymce.activeEditor.hide()
+
+        htmx.on('htmx:afterRequest', (event) => {
+            if (event.detail.successful && event.target.matches('form')) {
+                jQuery('#descriptionEditor').hide();
+                jQuery('.viewDescription').show();
+            }
+        });
     });
 
     //leantime.editorController.initComplexEditor();
diff --git a/app/Domain/Tickets/Templates/showKanban.blade.php b/app/Domain/Tickets/Templates/showKanban.blade.php
index 7a2da2d70..2e94fa33f 100644
--- a/app/Domain/Tickets/Templates/showKanban.blade.php
+++ b/app/Domain/Tickets/Templates/showKanban.blade.php
@@ -98,23 +98,27 @@ class="flex justify-between items-center widgettitle title-primary title-border-
                             <div class="hideOnLoad" id="ticket_new_{{ $key }}"
                                 style="padding-top:5px; padding-bottom:5px;">
 
-                                <form method="post">
-                                    <x-global::forms.text-input type="text" name="headline"
+                                <form hx-post="/hx/tickets/showKanban" hx-indicator="#save-indicator" hx-swap="none"
+                                    class="mb-2 quickadd-ticket" data-key="{{ $key }}">
+                                    <x-global::forms.text-input type="text" class="mb-2" name="headline"
                                         placeholder="Enter To-Do Title" title="{{ __('label.headline') }}" />
 
                                     <input type="hidden" name="milestone" value="{{ $searchCriteria['milestone'] }}" />
                                     <input type="hidden" name="status" value="{{ $key }}" />
                                     <input type="hidden" name="sprint" value="{{ session('currentSprint') }}" />
-                                    <div class="my-2">
-                                        <x-global::forms.button class="mx-0 my-2" type="submit" scale="xs" name="quickadd">
-                                            Save
-                                        </x-global::forms.button>
-
-                                        <x-global::forms.button class="mx-0 mt-2" tag="a" scale="xs" class="btn btn-default"
-                                            content-role="ghost" href="javascript:void(0);"
-                                            onclick="jQuery('#ticket_new_{{ $key }}, #ticket_new_link_{{ $key }}').toggle('fast');">
-                                            {{ __('links.cancel') }}
-                                        </x-global::forms.button>
+
+
+                                    <x-global::forms.button type="submit" scale="sm" name="quickadd">
+                                        Save
+                                    </x-global::forms.button>
+
+                                    <x-global::forms.button tag="a" scale="sm" content-role="secondary"
+                                        href="javascript:void(0);"
+                                        onclick="jQuery('#ticket_new_{{ $key }}, #ticket_new_link_{{ $key }}').toggle('fast');">
+                                        {{ __('links.cancel') }}
+                                    </x-global::forms.button>
+                                    <div id="save-indicator" class="htmx-indicator">
+                                        <span class="loading loading-spinner"></span> Saving...
                                     </div>
 
                                 </form>
@@ -168,26 +172,29 @@ class="flex justify-between items-center widgettitle title-primary title-border-
     </div>
 
     <script type="module">
+
+        import "@mix('/js/Domain/Tickets/Js/ticketsController.js')"
+
         jQuery(document).ready(function() {
             document.body.addEventListener('htmx:afterSettle', function() {
                 @if ($login::userIsAtLeast($roles::$editor))
-                    leantime.ticketsController.initUserDropdown();
-                    leantime.ticketsController.initMilestoneDropdown();
-                    leantime.ticketsController.initDueDateTimePickers();
-                    leantime.ticketsController.initEffortDropdown();
-                    leantime.ticketsController.initPriorityDropdown();
+                    ticketsController.initUserDropdown();
+                    ticketsController.initMilestoneDropdown();
+                    ticketsController.initDueDateTimePickers();
+                    ticketsController.initEffortDropdown();
+                    ticketsController.initPriorityDropdown();
 
                     var ticketStatusList = [
                         @foreach ($tpl->get('allTicketStates') as $key => $statusRow)
                             '{{ $key }}',
                         @endforeach
                     ];
-                    leantime.ticketsController.initTicketKanban(ticketStatusList);
+                    ticketsController.initTicketKanban(ticketStatusList);
                 @else
                     leantime.authController.makeInputReadonly(".maincontentinner");
                 @endif
 
-                leantime.ticketsController.setUpKanbanColumns();
+                ticketsController.setUpKanbanColumns();
 
                 @if (isset($_GET['showTicketModal']))
                     @php
@@ -245,6 +252,14 @@ function() {})
                 @endforeach
             });
 
+            jQuery(document).on("htmx:afterRequest", ".quickadd-ticket", function() {
+                let key = jQuery(this).data('key');
+                console.log(`ticketColumn_${key}`); 
+                htmx.trigger(`#ticketColumn_${key}`, 'reload');
+                jQuery(this).find('input[name=headline]').val(''); 
+            });
+
+
             jQuery("#modal-wrapper #main-page-modal").on('close', function() {
                 jQuery('.ticketColumn').each(function() {
                     htmx.trigger(this, 'reload');
diff --git a/app/Domain/Timesheets/Services/Timesheets.php b/app/Domain/Timesheets/Services/Timesheets.php
index 13e64e747..0d4ca0e22 100644
--- a/app/Domain/Timesheets/Services/Timesheets.php
+++ b/app/Domain/Timesheets/Services/Timesheets.php
@@ -303,7 +303,7 @@ public function getWeeklyTimesheets(int $projectId, CarbonInterface $fromDate, i
             //to avoid timezone collisions we disable adding new times to rows that were created in an different timezone
             $timezonedTime = $currentWorkDate->format('H:i:s');
 
-            $groupKey = $timesheet['ticketId'].'-'.$timesheet['kind'].'-'.$timezonedTime;
+            $groupKey = $timesheet['ticketId'] . '-' . $timesheet['kind'] . '-' . $timezonedTime;
             if (! isset($timesheetGroups[$groupKey])) {
                 // Build an array of 7 days for the weekly timesheet. Include the start date of the current users
                 // timezone in UTC. That way we can compare the dates coming from the db
@@ -379,13 +379,13 @@ public function getWeeklyTimesheets(int $projectId, CarbonInterface $fromDate, i
             // If the value is not exact but falls within the time period we're adding a new row
             for ($i = 1; $i < 8; $i++) {
 
-                $start = $timesheetGroups[$groupKey]['day'.$i]['start'];
-                $end = $timesheetGroups[$groupKey]['day'.$i]['end'];
+                $start = $timesheetGroups[$groupKey]['day' . $i]['start'];
+                $end = $timesheetGroups[$groupKey]['day' . $i]['end'];
 
                 if ($currentWorkDate->gte($start) && $currentWorkDate->lt($end)) {
-                    $timesheetGroups[$groupKey]['day'.$i]['hours'] += $timesheet['hours'];
-                    $timesheetGroups[$groupKey]['day'.$i]['actualWorkDate'] = $currentWorkDate;
-                    $timesheetGroups[$groupKey]['day'.$i]['description'] = $timesheet['description'];
+                    $timesheetGroups[$groupKey]['day' . $i]['hours'] += $timesheet['hours'];
+                    $timesheetGroups[$groupKey]['day' . $i]['actualWorkDate'] = $currentWorkDate;
+                    $timesheetGroups[$groupKey]['day' . $i]['description'] = $timesheet['description'];
 
                     // No need to check further, we found what we came for
                     break;
@@ -440,7 +440,6 @@ public function pollForNewTimesheets(?int $projectId = null): array|false
         }
 
         return $timesheets;
-
     }
 
     /**
@@ -454,7 +453,7 @@ public function pollForUpdatedTimesheets(?int $projectId = null): array|false
 
         foreach ($timesheets as $key => $timesheet) {
             $timesheets[$key] = $this->prepareDatesForApiResponse($timesheet);
-            $timesheets[$key]['id'] = $timesheet['id'].'-'.$timesheet['modified'];
+            $timesheets[$key]['id'] = $timesheet['id'] . '-' . $timesheet['modified'];
         }
 
         return $timesheets;
@@ -494,6 +493,5 @@ private function prepareDatesForApiResponse($timesheet)
         }
 
         return $timesheet;
-
     }
 }
diff --git a/app/Views/Templates/components/actions/dropdown/index.blade.php b/app/Views/Templates/components/actions/dropdown/index.blade.php
index cfc264cfa..9188520cc 100644
--- a/app/Views/Templates/components/actions/dropdown/index.blade.php
+++ b/app/Views/Templates/components/actions/dropdown/index.blade.php
@@ -12,6 +12,10 @@
     'buttonVariant' => '',
     'scale' => '',
     'selectable' => false, // Add selectable prop with default false
+    'selectableUpdateColor' => false,
+
+    'buttonStyle' => '', // this is to sytle the button accoridng the saved option
+    'indicatorClass' => '', // this is to sytle the button accoridng the saved option
 ])
 
 @php
@@ -92,6 +96,19 @@
             const $dropdown = $button.closest('.dropdown');
             const $items = $dropdown.find('[data-selectable-item] li, [data-selectable-item] li a');
 
+            @if ($selectable == true)
+                @if (!empty($buttonStyle))
+                    $button.attr('style', '{{ $buttonStyle }}');
+                    $button.attr('style', 'color: #fff;');
+                @endif
+
+                @if (!empty($indicatorClass))
+                    $button.removeClass();
+                    $button.addClass('{{ $indicatorClass }} hover:bg-ghost');
+                    $button.attr('style', 'color: #fff;');
+                @endif
+            @endif
+
             $items.on('click', function(e) {
                 e.preventDefault();
                 const $selectedItem = $(this);
@@ -110,9 +127,18 @@
                     $li.attr('style') ||
                     $li.attr('data-style');
 
+                const indicatorClass = $selectedItem.attr('data-class') || $li.attr(
+                    'data-class');
+
                 if (style) {
                     $button.attr('style', style + '; color: #fff;');
                 }
+
+                if (indicatorClass) {
+                    // Remove all CSS classes from the button element before adding new ones
+                    $button.removeClass();
+                    $button.addClass(indicatorClass + ' hover:bg-ghost');
+                }
             });
         });
     });
diff --git a/app/Views/Templates/components/content/context-menu.blade.php b/app/Views/Templates/components/content/context-menu.blade.php
index 926a506d2..52add3e8d 100644
--- a/app/Views/Templates/components/content/context-menu.blade.php
+++ b/app/Views/Templates/components/content/context-menu.blade.php
@@ -1,4 +1,4 @@
-<x-global::actions.dropdown contentRole="ghost" position="end" :align="$align ?? 'start'">
+<x-global::actions.dropdown contentRole="link" position="end" :align="$align ?? 'start'">
     <x-slot:labelText>
         <i class='fa fa-ellipsis-v' aria-hidden='true'></i>
     </x-slot:labelText>
diff --git a/app/Views/Templates/components/forms/select/select-option.blade.php b/app/Views/Templates/components/forms/select/select-option.blade.php
index dfabec1c0..622d6f5d5 100644
--- a/app/Views/Templates/components/forms/select/select-option.blade.php
+++ b/app/Views/Templates/components/forms/select/select-option.blade.php
@@ -4,5 +4,5 @@
 ])
 
 <option value="{{ $value }}" {{ $selected ? 'selected' : '' }}>
-    {{ $slot }}
+    {!! $slot !!}
 </option>
\ No newline at end of file
diff --git a/app/Views/Templates/components/forms/text-editor.blade.php b/app/Views/Templates/components/forms/text-editor.blade.php
index 2b1eeebe6..6ef876a16 100644
--- a/app/Views/Templates/components/forms/text-editor.blade.php
+++ b/app/Views/Templates/components/forms/text-editor.blade.php
@@ -12,7 +12,6 @@
     'diameter' => '',
 ])
 
-
 @php
     $id = $customId ?? "editor-$editorId";
     $modalClass = $modal ? 'modalTextArea' : '';
diff --git a/public/assets/css/components/forms.css b/public/assets/css/components/forms.css
index 043033578..ebcb7e26f 100644
--- a/public/assets/css/components/forms.css
+++ b/public/assets/css/components/forms.css
@@ -461,7 +461,8 @@ input.secretInput:focus {
 .viewDescription {
     border-radius:var(--box-radius);
     padding:5px;
-    border:1px solid transparent;
+    border:1px solid ;
+    border-color:#27272733
 }
 
 .viewDescription:hover {
diff --git a/public/assets/js/app/app.js b/public/assets/js/app/app.js
index a873cdb68..7d701a53d 100644
--- a/public/assets/js/app/app.js
+++ b/public/assets/js/app/app.js
@@ -10,8 +10,11 @@ document.addEventListener('DOMContentLoaded', async () => {
   await initializeCore();
 });
 
-import 'js/libs/uppy/uppy';
 
+// these module are probably not being loaded by the module loader
+import 'js/libs/uppy/uppy';
+import SlimSelect from 'js/libs/slimselect';
+window.SlimSelect = SlimSelect;
 
 /*