diff --git a/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx b/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
index 390a7ccc..2883585e 100644
--- a/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
+++ b/src/renderer/components/maps-mangement-components/maps-playlists-panel.component.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react"
+import { MapsManagerService } from "renderer/services/maps-manager.service"
 import { BSVersion } from "shared/bs-version.interface"
 import { TabNavBar } from "../shared/tab-nav-bar.component"
 
@@ -6,9 +8,18 @@ type Props = {
 }
 
 export function MapsPlaylistsPanel({version}: Props) {
+
+    const [tabIndex, setTabIndex] = useState(0);
+
+    console.log(tabIndex);
+
     return (
         <div className="w-full h-full bg-main-color-1 rounded-md shadow-black shadow-md overflow-hidden">
-            <TabNavBar className="!rounded-none shadow-none" tabsText={["Maps", "Playlists"]} onTabChange={() => {}}/>
-        </div>
+            <TabNavBar className="!rounded-none shadow-sm" tabsText={["Maps", "Playlists"]} onTabChange={setTabIndex}/>
+            <div className="w-full h-full flex flex-row items-center transition-transform duration-300" style={{transform: `translate(${-(tabIndex * 100)}%, 0)`}}>
+                <div className="w-full h-full grow bg-red-300 shrink-0">a</div>
+                <div className="w-full h-full bg-green-300 shrink-0">b</div>
+            </div>
+        </div> 
     )
 }