diff --git a/src/gui/src/UI/UITaskBarCreateCurve.js b/src/gui/src/UI/UITaskBarCreateCurve.js
new file mode 100644
index 000000000..419dc20fd
--- /dev/null
+++ b/src/gui/src/UI/UITaskBarCreateCurve.js
@@ -0,0 +1,24 @@
+function baseCurve(x) {
+    if (x < 0) return 0;
+    if (x > 1) return 0;
+    return Math.sin(x * Math.PI);
+}
+export function UITaskBarCreateCurve(totalXDis, topX, minY, maxY) {
+    return function curve(x) {
+        const beginX = topX - totalXDis / 2;
+        const endX = topX + totalXDis / 2;
+        if (x < beginX) return minY;
+        if (x > endX) return minY;
+        const yDis = maxY - minY;
+        return baseCurve((x - beginX) / totalXDis) * yDis + minY;
+    };
+}
+
+export function UITaskBarLayout(items, curve) {
+    for (const item of items) {
+        const rect = item.getBoundingClientRect();
+        const x = rect.x + rect.width / 2;
+        const scale = curve(x);
+        item.style.setProperty('--i', scale);
+    }
+}
\ No newline at end of file
diff --git a/src/gui/src/UI/UITaskbar.js b/src/gui/src/UI/UITaskbar.js
index 6c59c27b9..621c64073 100644
--- a/src/gui/src/UI/UITaskbar.js
+++ b/src/gui/src/UI/UITaskbar.js
@@ -7,12 +7,12 @@
  * it under the terms of the GNU Affero General Public License as published
  * by the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
- * 
+ *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU Affero General Public License for more details.
- * 
+ *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
@@ -20,8 +20,9 @@
 import UITaskbarItem from './UITaskbarItem.js'
 import UIPopover from './UIPopover.js'
 import launch_app from "../helpers/launch_app.js"
+import {UITaskBarCreateCurve, UITaskBarLayout} from './UITaskBarCreateCurve.js'
 
-async function UITaskbar(options){
+async function UITaskbar(options) {
     window.global_element_id++;
 
     options = options ?? {};
@@ -34,16 +35,18 @@ async function UITaskbar(options){
         async: true,
         contentType: "application/json",
         headers: {
-            "Authorization": "Bearer "+window.auth_token
+            "Authorization": "Bearer " + window.auth_token
         },
-        success: function (apps){ 
+        success: function (apps) {
             window.launch_apps = apps;
         }
     });
 
     let h = '';
     h += `<div id="ui-taskbar_${window.global_element_id}" class="taskbar" style="height:${window.taskbar_height}px;">`;
-        h += `<div class="taskbar-sortable" style="display: flex; justify-content: center; z-index: 99999;"></div>`;
+    h += `<div class="taskbar-menu">`;
+    h += `<div class="taskbar-sortable" style="display: flex; justify-content: center;align-items: flex-end; z-index: 99999;"></div>`;
+    h += `</div>`;
     h += `</div>`;
 
 
@@ -59,9 +62,9 @@ async function UITaskbar(options){
         sortable: false,
         keep_in_taskbar: true,
         disable_context_menu: true,
-        onClick: async function(item){
+        onClick: async function (item) {
             // skip if popover already open
-            if($(item).hasClass('has-open-popover'))
+            if ($(item).hasClass('has-open-popover'))
                 return;
 
             // show popover
@@ -77,7 +80,7 @@ async function UITaskbar(options){
 
             // In the rare case that launch_apps is not populated yet, get it from the server
             // then populate the popover
-            if(!window.launch_apps || !window.launch_apps.recent || window.launch_apps.recent.length === 0){
+            if (!window.launch_apps || !window.launch_apps.recent || window.launch_apps.recent.length === 0) {
                 // get launch apps
                 window.launch_apps = await $.ajax({
                     url: window.api_origin + "/get-launch-apps?icon_size=64",
@@ -85,22 +88,22 @@ async function UITaskbar(options){
                     async: true,
                     contentType: "application/json",
                     headers: {
-                        "Authorization": "Bearer "+window.auth_token
+                        "Authorization": "Bearer " + window.auth_token
                     },
                 });
             }
-            
+
             let apps_str = '';
 
             apps_str += `<div class="launch-search-wrapper">`
-                apps_str += `<input style="background-image:url('${window.icons['magnifier-outline.svg']}');" class="launch-search">`;
-                apps_str += `<img class="launch-search-clear" src="${window.icons['close.svg']}">`;
+            apps_str += `<input style="background-image:url('${window.icons['magnifier-outline.svg']}');" class="launch-search">`;
+            apps_str += `<img class="launch-search-clear" src="${window.icons['close.svg']}">`;
             apps_str += `</div>`;
 
             // -------------------------------------------
             // Recent apps
             // -------------------------------------------
-            if(window.launch_apps.recent.length > 0){
+            if (window.launch_apps.recent.length > 0) {
                 // heading
                 apps_str += `<h1 class="start-section-heading start-section-heading-recent">${i18n('recent')}</h1>`;
 
@@ -109,10 +112,10 @@ async function UITaskbar(options){
                 for (let index = 0; index < window.launch_recent_apps_count && index < window.launch_apps.recent.length; index++) {
                     const app_info = window.launch_apps.recent[index];
                     apps_str += `<div title="${html_encode(app_info.title)}" data-name="${html_encode(app_info.name)}" class="start-app-card">`;
-                        apps_str += `<div class="start-app" data-app-name="${html_encode(app_info.name)}" data-app-uuid="${html_encode(app_info.uuid)}" data-app-icon="${html_encode(app_info.icon)}" data-app-title="${html_encode(app_info.title)}">`;
-                            apps_str += `<img class="start-app-icon" src="${html_encode(app_info.icon ? app_info.icon : window.icons['app.svg'])}">`;
-                            apps_str += `<span class="start-app-title">${html_encode(app_info.title)}</span>`;
-                        apps_str += `</div>`;
+                    apps_str += `<div class="start-app" data-app-name="${html_encode(app_info.name)}" data-app-uuid="${html_encode(app_info.uuid)}" data-app-icon="${html_encode(app_info.icon)}" data-app-title="${html_encode(app_info.title)}">`;
+                    apps_str += `<img class="start-app-icon" src="${html_encode(app_info.icon ? app_info.icon : window.icons['app.svg'])}">`;
+                    apps_str += `<span class="start-app-title">${html_encode(app_info.title)}</span>`;
+                    apps_str += `</div>`;
                     apps_str += `</div>`;
                 }
                 apps_str += `</div>`;
@@ -120,7 +123,7 @@ async function UITaskbar(options){
             // -------------------------------------------
             // Reccomended apps
             // -------------------------------------------
-            if(window.launch_apps.recommended.length > 0){
+            if (window.launch_apps.recommended.length > 0) {
                 // heading
                 apps_str += `<h1 class="start-section-heading start-section-heading-recommended" style="${window.launch_apps.recent.length > 0 ? 'padding-top: 30px;' : ''}">${i18n('recommended')}</h1>`;
                 // apps
@@ -128,10 +131,10 @@ async function UITaskbar(options){
                 for (let index = 0; index < window.launch_apps.recommended.length; index++) {
                     const app_info = window.launch_apps.recommended[index];
                     apps_str += `<div title="${html_encode(app_info.title)}" data-name="${html_encode(app_info.name)}" class="start-app-card">`;
-                        apps_str += `<div class="start-app" data-app-name="${html_encode(app_info.name)}" data-app-uuid="${html_encode(app_info.uuid)}" data-app-icon="${html_encode(app_info.icon)}" data-app-title="${html_encode(app_info.title)}">`;
-                            apps_str += `<img class="start-app-icon" src="${html_encode(app_info.icon ? app_info.icon : window.icons['app.svg'])}">`;
-                            apps_str += `<span class="start-app-title">${html_encode(app_info.title)}</span>`;
-                        apps_str += `</div>`;
+                    apps_str += `<div class="start-app" data-app-name="${html_encode(app_info.name)}" data-app-uuid="${html_encode(app_info.uuid)}" data-app-icon="${html_encode(app_info.icon)}" data-app-title="${html_encode(app_info.title)}">`;
+                    apps_str += `<img class="start-app-icon" src="${html_encode(app_info.icon ? app_info.icon : window.icons['app.svg'])}">`;
+                    apps_str += `<span class="start-app-title">${html_encode(app_info.title)}</span>`;
+                    apps_str += `</div>`;
                     apps_str += `</div>`;
                 }
                 apps_str += `</div>`;
@@ -141,7 +144,7 @@ async function UITaskbar(options){
             $(popover).find('.launch-popover').append(apps_str);
 
             // focus on search input only if not on mobile
-            if(!isMobile.phone)
+            if (!isMobile.phone)
                 $(popover).find('.launch-search').focus();
 
             // make apps draggable
@@ -154,12 +157,12 @@ async function UITaskbar(options){
                 distance: 5,
                 revertDuration: 100,
                 helper: 'clone',
-                cursorAt: { left: 18, top: 20 },
-                start: function(event, ui){
+                cursorAt: {left: 18, top: 20},
+                start: function (event, ui) {
                 },
-                drag: function(event, ui){
+                drag: function (event, ui) {
                 },
-                stop: function(){
+                stop: function () {
                 }
             });
         }
@@ -175,11 +178,11 @@ async function UITaskbar(options){
         sortable: false,
         keep_in_taskbar: true,
         lock_keep_in_taskbar: true,
-        onClick: function(){
+        onClick: function () {
             let open_window_count = parseInt($(`.taskbar-item[data-app="explorer"]`).attr('data-open-windows'));
-            if(open_window_count === 0){
-                launch_app({ name: 'explorer', path: window.home_path});
-            }else{
+            if (open_window_count === 0) {
+                launch_app({name: 'explorer', path: window.home_path});
+            } else {
                 return false;
             }
         }
@@ -188,7 +191,7 @@ async function UITaskbar(options){
     //---------------------------------------------
     // Add other useful apps to the taskbar
     //---------------------------------------------
-    if(window.user.taskbar_items && window.user.taskbar_items.length > 0){
+    if (window.user.taskbar_items && window.user.taskbar_items.length > 0) {
         for (let index = 0; index < window.user.taskbar_items.length; index++) {
             const app_info = window.user.taskbar_items[index];
             // add taskbar item for each app
@@ -197,13 +200,13 @@ async function UITaskbar(options){
                 app: app_info.name,
                 name: app_info.title,
                 keep_in_taskbar: true,
-                onClick: function(){
+                onClick: function () {
                     let open_window_count = parseInt($(`.taskbar-item[data-app="${app_info.name}"]`).attr('data-open-windows'));
-                    if(open_window_count === 0){
+                    if (open_window_count === 0) {
                         launch_app({
                             name: app_info.name,
-                        }) 
-                    }else{
+                        })
+                    } else {
                         return false;
                     }
                 }
@@ -215,7 +218,7 @@ async function UITaskbar(options){
     // add `Trash` to the taskbar
     //---------------------------------------------
     const trash = await puter.fs.stat(window.trash_path);
-    if(window.socket){
+    if (window.socket) {
         window.socket.emit('trash.is_empty', {is_empty: trash.is_empty});
     }
 
@@ -226,23 +229,28 @@ async function UITaskbar(options){
         sortable: false,
         keep_in_taskbar: true,
         lock_keep_in_taskbar: true,
-        onClick: function(){
+        onClick: function () {
             let open_windows = $(`.window[data-path="${html_encode(window.trash_path)}"]`);
-            if(open_windows.length === 0){
-                launch_app({ name: 'explorer', path: window.trash_path});
-            }else{
+            if (open_windows.length === 0) {
+                launch_app({name: 'explorer', path: window.trash_path});
+            } else {
                 open_windows.focusWindow();
             }
         },
-        onItemsDrop: function(items){
+        onItemsDrop: function (items) {
             window.move_items(items, window.trash_path);
         }
     })
 
     window.make_taskbar_sortable();
+
+    //---------------------------------------------
+    // Taskbar is Animation
+    //---------------------------------------------
+    window.taskbar_is_animation()
 }
 
-window.make_taskbar_sortable = function(){
+window.make_taskbar_sortable = function () {
     //-------------------------------------------
     // Taskbar is sortable
     //-------------------------------------------
@@ -251,41 +259,41 @@ window.make_taskbar_sortable = function(){
         items: '.taskbar-item-sortable:not(.has-open-contextmenu)',
         cancel: '.has-open-contextmenu',
         placeholder: "taskbar-item-sortable-placeholder",
-        helper : 'clone',
+        helper: 'clone',
         distance: 5,
         revert: 10,
-        receive: function(event, ui){
-            if(!$(ui.item).hasClass('taskbar-item')){
+        receive: function (event, ui) {
+            if (!$(ui.item).hasClass('taskbar-item')) {
                 // if app is already in taskbar, cancel
-                if($(`.taskbar-item[data-app="${$(ui.item).attr('data-app-name')}"]`).length !== 0){
+                if ($(`.taskbar-item[data-app="${$(ui.item).attr('data-app-name')}"]`).length !== 0) {
                     $(this).sortable('cancel');
                     $('.taskbar .start-app').remove();
                     return;
                 }
             }
         },
-        update: function(event, ui){
-            if(!$(ui.item).hasClass('taskbar-item')){
+        update: function (event, ui) {
+            if (!$(ui.item).hasClass('taskbar-item')) {
                 // if app is already in taskbar, cancel
-                if($(`.taskbar-item[data-app="${$(ui.item).attr('data-app-name')}"]`).length !== 0){
+                if ($(`.taskbar-item[data-app="${$(ui.item).attr('data-app-name')}"]`).length !== 0) {
                     $(this).sortable('cancel');
                     $('.taskbar .start-app').remove();
                     return;
                 }
-                
+
                 let item = UITaskbarItem({
                     icon: $(ui.item).attr('data-app-icon'),
                     app: $(ui.item).attr('data-app-name'),
                     name: $(ui.item).attr('data-app-title'),
                     append_to_taskbar: false,
                     keep_in_taskbar: true,
-                    onClick: function(){
+                    onClick: function () {
                         let open_window_count = parseInt($(`.taskbar-item[data-app="${$(ui.item).attr('data-app-name')}"]`).attr('data-open-windows'));
-                        if(open_window_count === 0){
+                        if (open_window_count === 0) {
                             launch_app({
                                 name: $(ui.item).attr('data-app-name'),
-                            }) 
-                        }else{
+                            })
+                        } else {
                             return false;
                         }
                     }
@@ -297,11 +305,26 @@ window.make_taskbar_sortable = function(){
                 window.update_taskbar();
             }
             // only proceed to update DB if the item sorted was a pinned item otherwise no point in updating the taskbar in DB
-            else if($(ui.item).attr('data-keep-in-taskbar') === 'true'){
+            else if ($(ui.item).attr('data-keep-in-taskbar') === 'true') {
                 window.update_taskbar();
             }
         },
     });
 }
 
+window.taskbar_is_animation = function () {
+    const range = 300;
+    const maxScale = 1.8;
+    const items = $('.taskbar-item');
+    const taskbar = $('.taskbar')
+    taskbar.on('mousemove', function (e) {
+        const curve = UITaskBarCreateCurve(range, e.clientX, 1, maxScale);
+        console.log(curve, 'UITaskBarCreateCurve');
+        UITaskBarLayout(items, curve)
+    })
+    taskbar.on("mouseleave", function () {
+        UITaskBarLayout(items, () => 1);
+    })
+}
+
 export default UITaskbar;
\ No newline at end of file
diff --git a/src/gui/src/UI/UITaskbarItem.js b/src/gui/src/UI/UITaskbarItem.js
index 8ddd93fbd..9bb19bcb3 100644
--- a/src/gui/src/UI/UITaskbarItem.js
+++ b/src/gui/src/UI/UITaskbarItem.js
@@ -7,12 +7,12 @@
  * it under the terms of the GNU Affero General Public License as published
  * by the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
- * 
+ *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU Affero General Public License for more details.
- * 
+ *
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
@@ -45,20 +45,21 @@ function UITaskbarItem(options){
                 title = "${html_encode(options.name)}"
                 style= "${options.style ? html_encode(options.style) : ''}"
             >`;
-        let icon = options.icon ? options.icon : window.icons['app.svg'];
-        if(options.app === 'explorer')
-            icon = window.icons['folders.svg'];
+    let icon = options.icon ? options.icon : window.icons['app.svg'];
+    if(options.app === 'explorer')
+        icon = window.icons['folders.svg'];
 
-        // taskbar icon
-        h += `<div class="taskbar-icon">`;
-            h += `<img src="${html_encode(icon)}" style="${options.group === 'apps' ? 'filter:none;' : ''}">`;
-        h += `</div>`;
-
-        // active indicator
-        if(options.app !== 'apps')
-            h += `<span class="active-taskbar-indicator"></span>`;
+    // taskbar icon
+    h += `<div class="taskbar-icon">`;
+    h += `<img src="${html_encode(icon)}" style="${options.group === 'apps' ? 'filter:none;' : ''}">`;
     h += `</div>`;
 
+    // active indicator
+    if(options.app !== 'apps')
+        h += `<span class="active-taskbar-indicator"></span>`;
+    h += `</div>`;
+    // h += `<div class="taskbar-gap"></div>`
+
     if(options.append_to_taskbar) {
         if (options.before_trash){
             $('.taskbar-sortable').append(h);
@@ -85,10 +86,10 @@ function UITaskbarItem(options){
     $(el_taskbar_item).on("click", function(e){
         e.preventDefault();
         e.stopPropagation();
-        
+
         // if this is for the launcher popover, and it's mobile, and has-open-popover, close the popover
         if( $(el_taskbar_item).attr('data-name') === 'Start'
-             && (isMobile.phone || isMobile.tablet) && $(el_taskbar_item).hasClass('has-open-popover')){
+            && (isMobile.phone || isMobile.tablet) && $(el_taskbar_item).hasClass('has-open-popover')){
             $('.popover').remove();
             return;
         }
@@ -99,15 +100,15 @@ function UITaskbarItem(options){
 
         el_taskbar_item.querySelector("img").animate(
             [
-              { transform: 'translateY(0) scale(1)' },
-              { transform: 'translateY(-5px) scale(1.2)' },
-              { transform: 'translateY(0) scale(1)' }
+                { transform: 'translateY(0) scale(1)' },
+                { transform: 'translateY(-5px) scale(1.2)' },
+                { transform: 'translateY(0) scale(1)' }
             ],
             {
-              duration: 300,
-              easing: 'ease-out',
+                duration: 300,
+                easing: 'ease-out',
             }
-          );   
+        );
 
         if(options.onClick === undefined || options.onClick(el_taskbar_item) === false){
             // re-show each window in this app group
@@ -133,7 +134,7 @@ function UITaskbarItem(options){
             return;
 
         const menu_items =[];
-        const open_windows = parseInt($(el_taskbar_item).attr('data-open-windows'));        
+        const open_windows = parseInt($(el_taskbar_item).attr('data-open-windows'));
         // -------------------------------------------
         // List of open windows belonging to this app
         // -------------------------------------------
@@ -167,8 +168,8 @@ function UITaskbarItem(options){
                 }
             })
         }
-        //------------------------------------------
-        // Open Trash
+            //------------------------------------------
+            // Open Trash
         //------------------------------------------
         else if(options.app && options.app === 'trash'){
             menu_items.push({
@@ -216,8 +217,8 @@ function UITaskbarItem(options){
                 }
             })
         }
-        //------------------------------------------
-        // Keep in Taskbar
+            //------------------------------------------
+            // Keep in Taskbar
         //------------------------------------------
         else if(!options.keep_in_taskbar){
             menu_items.push({
@@ -228,7 +229,7 @@ function UITaskbarItem(options){
                     window.update_taskbar();
                     options.keep_in_taskbar = true;
                 }
-            })  
+            })
         }
 
         if(open_windows > 0){
@@ -281,14 +282,14 @@ function UITaskbarItem(options){
             my: "center bottom-20",
             at: "center top",
             using: function( position, feedback ) {
-              $( this ).css( position );
-              $( "<div>" )
-                .addClass( "arrow" )
-                .addClass( feedback.vertical )
-                .addClass( feedback.horizontal )
-                .appendTo( this );
+                $( this ).css( position );
+                $( "<div>" )
+                    .addClass( "arrow" )
+                    .addClass( feedback.vertical )
+                    .addClass( feedback.horizontal )
+                    .appendTo( this );
             }
-        }    
+        }
     });
 
     // --------------------------------------------------------
@@ -308,10 +309,10 @@ function UITaskbarItem(options){
                 return;
 
             const items_to_move = []
-            
+
             // First item
-            items_to_move.push(ui.draggable); 
-            
+            items_to_move.push(ui.draggable);
+
             // All subsequent items
             const cloned_items = document.getElementsByClassName('item-selected-clone');
             for(let i =0; i<cloned_items.length; i++){
@@ -327,8 +328,8 @@ function UITaskbarItem(options){
                 options.onItemsDrop(items_to_move);
                 return;
             }
-            // --------------------------------------------------------
-            // If dropped on an app, open the app with the dropped item as an argument
+                // --------------------------------------------------------
+                // If dropped on an app, open the app with the dropped item as an argument
             //--------------------------------------------------------
             else if(options.app){
                 // an array that hold the items to sign
@@ -337,9 +338,9 @@ function UITaskbarItem(options){
                 // prepare items to sign
                 for(let i=0; i < items_to_move.length; i++){
                     items_to_sign.push({
-                        name: $(items_to_move[i]).attr('data-name'), 
-                        uid: $(items_to_move[i]).attr('data-uid'), 
-                        action: 'write', 
+                        name: $(items_to_move[i]).attr('data-name'),
+                        uid: $(items_to_move[i]).attr('data-uid'),
+                        action: 'write',
                         path: $(items_to_move[i]).attr('data-path')
                     });
                 }
@@ -348,7 +349,7 @@ function UITaskbarItem(options){
                 for (let i = 0; i < items_to_sign.length; i++) {
                     const item = items_to_sign[i];
                     launch_app({
-                        name: options.app, 
+                        name: options.app,
                         file_path: item.path,
                         // app_obj: open_item_meta.suggested_apps[0],
                         window_title: item.name,
@@ -408,7 +409,7 @@ function UITaskbarItem(options){
                 $('.ui-draggable-dragging .item-name, .item-selected-clone .item-name').css('opacity', 'initial')
                 $('.item-container').removeClass('item-container-transparent-border')
             }
-            $('.item-container').droppable( 'enable' )    
+            $('.item-container').droppable( 'enable' )
         }
     });
 
diff --git a/src/gui/src/css/style.css b/src/gui/src/css/style.css
index 790c87567..a93cd236b 100644
--- a/src/gui/src/css/style.css
+++ b/src/gui/src/css/style.css
@@ -71,12 +71,18 @@
     font-weight: 900;
 }
 
+@property --i {
+    syntax: '<number>';
+    initial-value: 1;
+    inherits: false;
+}
+
 * {
     font-family: "Inter", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
     user-select: none;
     font-optical-sizing: auto;
     font-style: normal;
-    font-variation-settings: "slnt"0;
+    font-variation-settings: "slnt" 0;
 }
 
 pre {
@@ -794,7 +800,7 @@ span.header-sort-icon img {
     font-size: 13px;
 }
 
-.device-desktop .item-selected>.item-name, .device-desktop .window-body .item-selected>.item-name {
+.device-desktop .item-selected > .item-name, .device-desktop .window-body .item-selected > .item-name {
     background-color: #3b56ee;
     color: white;
 }
@@ -859,11 +865,11 @@ span.header-sort-icon img {
     border-radius: calc(1.5 * var(--scale));
 }
 
-.window-menubar-item.active>span {
+.window-menubar-item.active > span {
     background-color: #e2e2e2;
 }
 
-.window-menubar-global .window-menubar-item.active>span {
+.window-menubar-global .window-menubar-item.active > span {
     background-color: #e4e4e43a;
 }
 
@@ -974,9 +980,9 @@ span.header-sort-icon img {
     overflow: hidden !important;
     padding: 0;
     background-color: hsla(var(--window-head-hue),
-            var(--window-head-saturation),
-            var(--window-head-lightness),
-            calc(0.5 + 0.5 * var(--window-head-alpha)));
+    var(--window-head-saturation),
+    var(--window-head-lightness),
+    calc(0.5 + 0.5 * var(--window-head-alpha)));
     filter: grayscale(80%);
     box-shadow: inset 0px -4px 5px -7px rgb(0 0 0 / 64%);
     display: flex;
@@ -1177,9 +1183,9 @@ span.header-sort-icon img {
     padding: 15px 10px;
     box-sizing: border-box;
     background-color: hsla(var(--window-sidebar-hue),
-            var(--window-sidebar-saturation),
-            var(--window-sidebar-lightness),
-            calc(0.5 + 0.5*var(--window-sidebar-alpha)));
+    var(--window-sidebar-saturation),
+    var(--window-sidebar-lightness),
+    calc(0.5 + 0.5 * var(--window-sidebar-alpha)));
     overflow-y: scroll;
     margin-top: 1px;
     box-shadow: inset -4px 0 8px -8px rgba(0, 0, 0, 0.3);
@@ -1342,15 +1348,17 @@ span.header-sort-icon img {
 .window-body-app {
     height: calc(100% - 30px);
 }
+
 .window-with-menubar .window-body-app {
     height: calc(100% - 65px);
 }
+
 .fullpage-mode.device-phone .window-body-app {
     height: calc(100%);
 }
 
 .fullpage-mode.device-desktop .window-body-app {
-    height: calc(100% );
+    height: calc(100%);
 }
 
 .window-filedialog-prompt {
@@ -1403,7 +1411,7 @@ span.header-sort-icon img {
     opacity: 1;
 }
 
-.window-action-btn>img {
+.window-action-btn > img {
     width: 18px;
     margin-top: 5px;
     margin-right: 4px;
@@ -1417,11 +1425,11 @@ span.header-sort-icon img {
     filter: var(--primary-color-icon);
 }
 
-.window-action-btn:hover>img {
+.window-action-btn:hover > img {
     opacity: 1;
 }
 
-.window-scale-btn>img {
+.window-scale-btn > img {
     width: 15px;
     height: 15px;
     margin-top: 7px
@@ -1462,7 +1470,7 @@ span.header-sort-icon img {
     cursor: nwse-resize;
 }
 
-.window>.ui-resizable-nw, .window>.ui-resizable-ne, .window>.ui-resizable-se, .window>.ui-resizable-sw {
+.window > .ui-resizable-nw, .window > .ui-resizable-ne, .window > .ui-resizable-se, .window > .ui-resizable-sw {
     width: 15px;
     height: 15px;
     z-index: 95 !important;
@@ -1597,7 +1605,7 @@ span.header-sort-icon img {
     cursor: default !important;
 }
 
-.context-menu .context-menu-divider>hr {
+.context-menu .context-menu-divider > hr {
     margin-top: 0;
     margin-bottom: 0;
     border-bottom: none;
@@ -1866,6 +1874,7 @@ label {
     background-color: rgb(255 255 255 / 15%);
     border-radius: 3px;
 }
+
 /***************************************************/
 
 .login-error-msg, .signup-error-msg, .publish-website-error-msg, .form-error-msg {
@@ -2318,7 +2327,6 @@ label {
 
 .login-c2a-session-list:hover, .signup-c2a-session-list:hover {
     text-decoration: underline;
-    ;
 }
 
 /*****************************************************
@@ -2331,13 +2339,13 @@ label {
     left: 0;
     width: 100%;
     background-color: hsla(var(--taskbar-hue),
-            var(--taskbar-saturation),
-            var(--taskbar-lightness),
-            calc(0.5 + 0.5*var(--taskbar-alpha)));
+    var(--taskbar-saturation),
+    var(--taskbar-lightness),
+    calc(0.5 + 0.5 * var(--taskbar-alpha)));
     display: flex;
     justify-content: center;
     z-index: 99999;
-    overflow: hidden !important;
+    /*overflow: hidden !important;*/
 
     height: 50px;
     border-radius: 10px;
@@ -2349,12 +2357,21 @@ label {
     transform: translateX(-50%);
 
     /* that sweet sweet subtle shadow */
-    box-shadow:
-        inset 0 0 0 0.5px rgba(255, 255, 255, 0.2),
-        0 0 0 0.5px rgba(0, 0, 0, 0.2),
-        0 4px 16px rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2),
+    0 0 0 0.5px rgba(0, 0, 0, 0.2),
+    0 4px 16px rgba(0, 0, 0, 0.2);
 }
 
+.taskbar .taskbar-menu {
+    display: flex;
+    align-items: end;
+}
+
+/*.taskbar .taskbar-gap {*/
+/*    width: calc(var(--i, 1) * 10px);*/
+/*    height: 40px;*/
+/*}*/
+
 .taskbar .taskbar-item {
     float: left;
     position: relative;
@@ -2363,10 +2380,13 @@ label {
     display: none;
 }
 
-.taskbar .taskbar-item-sortable-placeholder, .taskbar .taskbar-item {
-    width: 40px;
+.taskbar .taskbar-item-sortable-placeholder, .taskbar .taskbar-menu .taskbar-item {
+    /*width: 40px;*/
     height: 40px;
-    padding: 6px 5px 10px 5px;
+    /*padding: 6px 5px 10px 5px;*/
+    width: calc(var(--i, 1) * 40px);
+    /*height: calc(var(--i, 1) * 40px);*/
+    padding: 6px 5px calc(var(--i, 1) * 20px - 10px);
 }
 
 .taskbar .taskbar-item .taskbar-icon {
@@ -2478,9 +2498,9 @@ label {
 @supports ((backdrop-filter: blur())) {
     .taskbar {
         background-color: hsla(var(--taskbar-hue),
-                var(--taskbar-saturation),
-                var(--taskbar-lightness),
-                var(--taskbar-alpha));
+        var(--taskbar-saturation),
+        var(--taskbar-lightness),
+        var(--taskbar-alpha));
         backdrop-filter: blur(10px);
     }
 
@@ -3041,7 +3061,7 @@ fieldset[name=number-code] {
     }
 
     70% {
-        -webkit-box-shadow: 0 0 0 px rgba(204, 169, 44, 0);
+        -webkit-box-shadow: 0 0 0px rgba(204, 169, 44, 0);
     }
 
     100% {
@@ -3149,17 +3169,17 @@ fieldset[name=number-code] {
 @supports ((backdrop-filter: blur())) {
     .window-head {
         background-color: hsla(var(--window-head-hue),
-                var(--window-head-saturation),
-                var(--window-head-lightness),
-                var(--window-head-alpha));
+        var(--window-head-saturation),
+        var(--window-head-lightness),
+        var(--window-head-alpha));
         backdrop-filter: blur(10px);
     }
 
     .notification {
         background-color: hsla(var(--window-head-hue),
-                var(--window-head-saturation),
-                var(--window-head-lightness),
-                var(--window-head-alpha));
+        var(--window-head-saturation),
+        var(--window-head-lightness),
+        var(--window-head-alpha));
         backdrop-filter: blur(10px);
     }
 
@@ -3171,9 +3191,9 @@ fieldset[name=number-code] {
     .window-sidebar {
         /* background-color: var(--puter-window-background); */
         background-color: hsla(var(--window-sidebar-hue),
-                var(--window-sidebar-saturation),
-                var(--window-sidebar-lightness),
-                var(--window-sidebar-alpha));
+        var(--window-sidebar-saturation),
+        var(--window-sidebar-lightness),
+        var(--window-sidebar-alpha));
         backdrop-filter: blur(10px);
     }
 
@@ -3292,7 +3312,8 @@ fieldset[name=number-code] {
     opacity: 1;
 }
 
-.launch-app-selected {}
+.launch-app-selected {
+}
 
 
 .website-badge-popover-title {
@@ -3573,7 +3594,7 @@ fieldset[name=number-code] {
     color: #000;
 }
 
-/** 
+/**
  * ------------------------------------
  * Button
  * ------------------------------------
@@ -3758,7 +3779,7 @@ fieldset[name=number-code] {
     text-decoration: underline;
 }
 
-@media (max-width:480px) {
+@media (max-width: 480px) {
     .puter-auth-dialog-content {
         padding: 50px 20px;
     }
@@ -4770,7 +4791,7 @@ fieldset[name=number-code] {
 }
 
 /* Hide desktop icons when the desktop-icons-hidden class is applied */
-.desktop.item-container.desktop-icons-hidden>.item {
+.desktop.item-container.desktop-icons-hidden > .item {
     visibility: hidden;
 }
 
@@ -4783,10 +4804,11 @@ fieldset[name=number-code] {
     -webkit-font-smoothing: antialiased;
     color: #5f626d;
 }
-.progress-report{
-    font-size:15px; 
-    overflow: hidden; 
-    flex-grow: 1; 
-    text-overflow: ellipsis; 
+
+.progress-report {
+    font-size: 15px;
+    overflow: hidden;
+    flex-grow: 1;
+    text-overflow: ellipsis;
     white-space: nowrap;
 }
\ No newline at end of file