diff --git a/src/modules/audio-studio/components/waveform-visualizer/editor/LayerPanel.tsx b/src/modules/audio-studio/components/waveform-visualizer/editor/LayerPanel.tsx
index f19bd3fd..52546243 100644
--- a/src/modules/audio-studio/components/waveform-visualizer/editor/LayerPanel.tsx
+++ b/src/modules/audio-studio/components/waveform-visualizer/editor/LayerPanel.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import { useVisualizerStore, ElementType } from '@/modules/audio-studio/store/useVisualizerStore'
 
 const TYPE_ICONS: Record<ElementType, string> = {
@@ -13,6 +13,8 @@ export default function LayerPanel() {
   const { elements, activeElementId, setActiveElement, addElement, removeElement } = useVisualizerStore()
   const [showAddMenu, setShowAddMenu] = useState(false)
 
+  const reversedElements = useMemo(() => [...elements].reverse(), [elements])
+
   return (
     <div className="w-72 bg-[#0d0d12] border-r border-white/5 flex flex-col h-full text-sm text-slate-300 font-sans shadow-2xl z-10">
       <div className="p-4 border-b border-white/5 flex justify-between items-center bg-black/20">
@@ -51,7 +53,7 @@ export default function LayerPanel() {
       </div>
       
       <div className="flex-1 overflow-y-auto overflow-x-hidden p-2 space-y-1">
-        {[...elements].reverse().map((el, i) => (
+        {reversedElements.map((el, i) => (
           <div 
             key={el.id} 
             className={`
diff --git a/src/modules/visualizer/components/editor/LayerPanel.tsx b/src/modules/visualizer/components/editor/LayerPanel.tsx
index 3177e843..1410e4e0 100644
--- a/src/modules/visualizer/components/editor/LayerPanel.tsx
+++ b/src/modules/visualizer/components/editor/LayerPanel.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useMemo } from 'react'
 import {
   DndContext,
   closestCenter,
@@ -97,6 +97,8 @@ export default function LayerPanel() {
   const { elements, loadScene, addElement } = useVisualizerStore()
   const [showAddMenu, setShowAddMenu] = useState(false)
 
+  const reversedElementsMemo = useMemo(() => [...elements].reverse(), [elements])
+
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -171,10 +173,10 @@ export default function LayerPanel() {
         >
           <div className="flex flex-col gap-1">
             <SortableContext 
-              items={[...elements].reverse().map(e => e.id)}
+              items={reversedElementsMemo.map(e => e.id)}
               strategy={verticalListSortingStrategy}
             >
-              {[...elements].reverse().map(el => (
+              {reversedElementsMemo.map(el => (
                 <SortableLayerItem key={el.id} el={el} />
               ))}
             </SortableContext>