diff --git a/frontend/lib/main.dart b/frontend/lib/main.dart
index bcce311d..20bea239 100644
--- a/frontend/lib/main.dart
+++ b/frontend/lib/main.dart
@@ -56,7 +56,7 @@ class MyApp extends StatelessWidget {
           ChangeNotifierProvider(
               create: (context) => TaskViewModel(taskService)),
         ],
-        child: const MainLayout(),
+        child: MainLayout(),
       ),
     );
   }
diff --git a/frontend/lib/views/main_layout.dart b/frontend/lib/views/main_layout.dart
index e5bbb153..aa54cf4f 100644
--- a/frontend/lib/views/main_layout.dart
+++ b/frontend/lib/views/main_layout.dart
@@ -1,12 +1,15 @@
 import 'package:auto_gpt_flutter_client/viewmodels/task_viewmodel.dart';
 import 'package:auto_gpt_flutter_client/viewmodels/chat_viewmodel.dart';
+import 'package:auto_gpt_flutter_client/views/side_bar_view.dart';
 import 'package:auto_gpt_flutter_client/views/task/task_view.dart';
 import 'package:auto_gpt_flutter_client/views/chat/chat_view.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:provider/provider.dart';
 
 class MainLayout extends StatelessWidget {
-  const MainLayout({Key? key}) : super(key: key);
+  final ValueNotifier<String> selectedViewNotifier = ValueNotifier('TaskView');
+
+  MainLayout({super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -24,7 +27,18 @@ class MainLayout extends StatelessWidget {
       // For larger screens, return a side-by-side layout
       return Row(
         children: [
-          SizedBox(width: 280, child: TaskView(viewModel: taskViewModel)),
+          SideBarView(selectedViewNotifier: selectedViewNotifier),
+          ValueListenableBuilder(
+            valueListenable: selectedViewNotifier,
+            builder: (context, String value, _) {
+              if (value == 'TaskView') {
+                return SizedBox(
+                    width: 280, child: TaskView(viewModel: taskViewModel));
+              } else {
+                return Expanded(child: Text("SkillTreeView")); // placeholder
+              }
+            },
+          ),
           Expanded(
               child: ChatView(
             viewModel: chatViewModel,
diff --git a/frontend/lib/views/side_bar_view.dart b/frontend/lib/views/side_bar_view.dart
new file mode 100644
index 00000000..f0f595e8
--- /dev/null
+++ b/frontend/lib/views/side_bar_view.dart
@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+
+class SideBarView extends StatelessWidget {
+  final ValueNotifier<String> selectedViewNotifier;
+
+  SideBarView({required this.selectedViewNotifier});
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      child: ValueListenableBuilder(
+          valueListenable: selectedViewNotifier,
+          builder: (context, String selectedView, _) {
+            return SizedBox(
+              width: 60,
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.start,
+                children: [
+                  IconButton(
+                    splashRadius: 0.1,
+                    color:
+                        selectedView == 'TaskView' ? Colors.blue : Colors.black,
+                    icon: Icon(Icons.chat),
+                    onPressed: () => selectedViewNotifier.value = 'TaskView',
+                  ),
+                  IconButton(
+                    splashRadius: 0.1,
+                    color: selectedView == 'SkillTreeView'
+                        ? Colors.blue
+                        : Colors.black,
+                    icon: Icon(Icons.emoji_events), // trophy icon
+                    onPressed: () =>
+                        selectedViewNotifier.value = 'SkillTreeView',
+                  ),
+                ],
+              ),
+            );
+          }),
+    );
+  }
+}