diff --git a/SukiUI.Demo/Features/Playground/PlaygroundView.axaml b/SukiUI.Demo/Features/Playground/PlaygroundView.axaml
index 271b3b6cd..dd1828c00 100644
--- a/SukiUI.Demo/Features/Playground/PlaygroundView.axaml
+++ b/SukiUI.Demo/Features/Playground/PlaygroundView.axaml
@@ -2,13 +2,117 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:avaloniaEdit="https://github.com/avaloniaui/avaloniaedit"
+             xmlns:avaloniaEdit="https://github.com/avaloniaui/avaloniaedit" x:DataType="playground:PlaygroundViewModel"
              xmlns:controls="clr-namespace:SukiUI.Controls;assembly=SukiUI"
+             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+             xmlns:playground="clr-namespace:SukiUI.Demo.Features.Playground"
+             xmlns:theme="clr-namespace:SukiUI.Theme;assembly=SukiUI"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="SukiUI.Demo.Features.Playground.PlaygroundView">
     <controls:SukiStackPage>
         <controls:SukiStackPage.Content>
-        <Grid Name="Playground" ColumnDefinitions="*, 4, *">
+            
+            <SplitView IsPaneOpen="False" Name="Playground" DisplayMode="CompactInline" OpenPaneLength="250" CompactPaneLength="50">
+                <SplitView.Pane>
+                    <Grid>
+                        
+                        <DockPanel IsHitTestVisible="False" Opacity="0"  Name="TabControls" >
+                            <Button DockPanel.Dock="Top" Click="ClosePane" Margin="0,25" IsHitTestVisible="True" Opacity="1" Padding="0" HorizontalAlignment="Center" VerticalAlignment="Top" Classes="Basic">
+                                <StackPanel>
+                                    <TextBlock  HorizontalAlignment="Center"  Foreground="{DynamicResource SukiLowText}" FontSize="12" Text="Close"></TextBlock>
+                                    <avalonia:MaterialIcon Kind="ChevronLeft" Foreground="{DynamicResource SukiLowText}"></avalonia:MaterialIcon>
+                                </StackPanel>
+                            </Button>
+                            <TabControl Margin="0,20,0,0" TabStripPlacement="Left" >
+                           
+                                <TabItem Header="Buttons">
+                                <ScrollViewer>
+                                <ItemsControl theme:ItemsControlExtensions.AnimatedScroll="True" ItemsSource="{Binding ButtonsElements }">
+                                    <ItemsControl.ItemTemplate>
+                                        <DataTemplate>
+                                            <controls:GlassCard Tag="{Binding}" PointerPressed="AddNewControls" CornerRadius="10" IsInteractive="True" Margin="0,8" MinHeight="100">
+                                                <Viewbox StretchDirection="DownOnly">
+                                                    <ContentControl IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding, Converter={x:Static playground:StringToControlConverter.Instance}}"></ContentControl>
+                                                </Viewbox>
+                                            </controls:GlassCard>
+                                        </DataTemplate>
+                                    </ItemsControl.ItemTemplate>
+                                </ItemsControl>
+                                </ScrollViewer>
+                            </TabItem>
+                                <TabItem Header="Layout">
+                                    <ScrollViewer>
+                                        <ItemsControl theme:ItemsControlExtensions.AnimatedScroll="True" ItemsSource="{Binding LayoutElements }">
+                                            <ItemsControl.ItemTemplate>
+                                                <DataTemplate>
+                                                    <controls:GlassCard Tag="{Binding}" PointerPressed="AddNewControls" CornerRadius="10" IsInteractive="True" Margin="0,8" MinHeight="100">
+                                                        <Viewbox StretchDirection="DownOnly">
+                                                            <ContentControl IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding, Converter={x:Static playground:StringToControlConverter.Instance}}"></ContentControl>
+                                                        </Viewbox>
+                                                    </controls:GlassCard>
+                                                </DataTemplate>
+                                            </ItemsControl.ItemTemplate>
+                                        </ItemsControl>
+                                    </ScrollViewer>
+                                </TabItem>
+                                <TabItem Header="Input">
+                                    <ScrollViewer>
+                                        <ItemsControl theme:ItemsControlExtensions.AnimatedScroll="True" ItemsSource="{Binding InputsElements }">
+                                        <ItemsControl.ItemTemplate>
+                                            <DataTemplate>
+                                                <controls:GlassCard Tag="{Binding}" PointerPressed="AddNewControls" IsInteractive="True" Margin="0,8" CornerRadius="10" MinHeight="100">
+                                                    <Viewbox StretchDirection="DownOnly">
+                                                        <ContentControl IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding, Converter={x:Static playground:StringToControlConverter.Instance}}"></ContentControl>
+                                                    </Viewbox>
+                                                </controls:GlassCard>
+                                            </DataTemplate>
+                                        </ItemsControl.ItemTemplate>
+                                    </ItemsControl>
+                                        </ScrollViewer>
+                                </TabItem>
+                                <TabItem Header="Progress">
+                                    <ScrollViewer>
+                                        <ItemsControl theme:ItemsControlExtensions.AnimatedScroll="True" ItemsSource="{Binding ProgressElements }">
+                                            <ItemsControl.ItemTemplate>
+                                                <DataTemplate>
+                                                    <controls:GlassCard Tag="{Binding}" PointerPressed="AddNewControls" IsInteractive="True" Margin="0,8" CornerRadius="10" MinHeight="100">
+                                                        <Viewbox StretchDirection="DownOnly">
+                                                            <ContentControl IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding, Converter={x:Static playground:StringToControlConverter.Instance}}"></ContentControl>
+                                                        </Viewbox>
+                                                    </controls:GlassCard>
+                                                </DataTemplate>
+                                            </ItemsControl.ItemTemplate>
+                                        </ItemsControl>
+                                    </ScrollViewer>
+                                </TabItem>
+                                <TabItem Header="Lists">
+                                    <ScrollViewer>
+                                        <ItemsControl theme:ItemsControlExtensions.AnimatedScroll="True" ItemsSource="{Binding ListsElements }">
+                                            <ItemsControl.ItemTemplate>
+                                                <DataTemplate>
+                                                    <controls:GlassCard Tag="{Binding}" PointerPressed="AddNewControls" IsInteractive="True" Margin="0,8" CornerRadius="10" MinHeight="100">
+                                                        <Viewbox StretchDirection="DownOnly">
+                                                            <ContentControl IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{Binding, Converter={x:Static playground:StringToControlConverter.Instance}}"></ContentControl>
+                                                        </Viewbox>
+                                                    </controls:GlassCard>
+                                                </DataTemplate>
+                                            </ItemsControl.ItemTemplate>
+                                        </ItemsControl>
+                                    </ScrollViewer>
+                                </TabItem>
+                        </TabControl>
+                        </DockPanel>
+                        
+                        <Button Click="OpenPane" Name="OpenPaneButton" Margin="0,25" IsHitTestVisible="True" Opacity="1" Padding="0" HorizontalAlignment="Center" VerticalAlignment="Top" Classes="Basic">
+                            <StackPanel>
+                                <TextBlock HorizontalAlignment="Center" Foreground="{DynamicResource SukiLowText}" FontSize="12" Text="Add"></TextBlock>
+                                <TextBlock  HorizontalAlignment="Center"  Foreground="{DynamicResource SukiLowText}" FontSize="12" Text="Controls"></TextBlock>
+                                <avalonia:MaterialIcon Kind="ChevronRight" Foreground="{DynamicResource SukiLowText}"></avalonia:MaterialIcon>
+                            </StackPanel>
+                        </Button>
+                    </Grid>
+                </SplitView.Pane>
+                <Grid  ColumnDefinitions="*, 4, *" RowDefinitions="*, Auto">
         <controls:GlassCard Margin="20">
         <avaloniaEdit:TextEditor TextChanged="Editor_OnTextChanged"  Text="" Name="Editor"
                                  ShowLineNumbers="True"
@@ -17,7 +121,11 @@
         <GridSplitter Grid.Column="1" Background="Transparent" ResizeDirection="Columns"/>
         <controls:GlassCard Name="GlassExample" Grid.Column="2" Margin="20">
         </controls:GlassCard>
+        
+            
+        
     </Grid>
+            </SplitView>
         </controls:SukiStackPage.Content>
     </controls:SukiStackPage>
 </UserControl>
diff --git a/SukiUI.Demo/Features/Playground/PlaygroundView.axaml.cs b/SukiUI.Demo/Features/Playground/PlaygroundView.axaml.cs
index 4d9f59dcf..bbd95dc57 100644
--- a/SukiUI.Demo/Features/Playground/PlaygroundView.axaml.cs
+++ b/SukiUI.Demo/Features/Playground/PlaygroundView.axaml.cs
@@ -6,6 +6,7 @@
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Input;
+using Avalonia.Interactivity;
 using Avalonia.Markup.Xaml;
 using Avalonia.Media;
 using Avalonia.Styling;
@@ -102,7 +103,7 @@ private void textEditor_TextArea_TextEntered(object sender, TextInputEventArgs e
 
         private void Editor_OnTextChanged(object? sender, EventArgs e)
         {
-            string PreviewCode = "<Grid xmlns:icons=\"clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia\" xmlns:suki=\"clr-namespace:SukiUI.Controls;assembly=SukiUI\" xmlns='https://github.com/avaloniaui' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>" +
+            string PreviewCode = "<Grid HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\" xmlns:system=\"clr-namespace:System;assembly=netstandard\" xmlns:objectModel=\"clr-namespace:System.Collections.ObjectModel;assembly=System.ObjectModel\"  xmlns:icons=\"clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia\" xmlns:suki=\"clr-namespace:SukiUI.Controls;assembly=SukiUI\" xmlns='https://github.com/avaloniaui' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>" +
                                  _textEditor.Text + "</Grid>";
 
             try
@@ -131,6 +132,35 @@ private void Editor_OnTextChanged(object? sender, EventArgs e)
             "     </Grid>\n" +
             "</suki:GlassCard>";
 
+
+        private void OpenPane(object? sender, RoutedEventArgs e)
+        {
+            this.Get<SplitView>("Playground").IsPaneOpen = true;
+            
+            ((Button)sender).IsHitTestVisible = false;
+            ((Button)sender).Animate<double>(OpacityProperty,1,0);
+            
+            this.Get<DockPanel>("TabControls").Animate<double>(OpacityProperty,0,1);
+            this.Get<DockPanel>("TabControls").IsHitTestVisible = true;
+        }
+
+        private void ClosePane(object? sender, RoutedEventArgs e)
+        {
+            this.Get<SplitView>("Playground").IsPaneOpen = false;
+            
+            this.Get<Button>("OpenPaneButton").IsHitTestVisible = true;
+            this.Get<Button>("OpenPaneButton").Animate<double>(OpacityProperty,0,1);
+            
+            this.Get<DockPanel>("TabControls").Animate<double>(OpacityProperty,1,0);
+            this.Get<DockPanel>("TabControls").IsHitTestVisible = false;
+        }
+
+        private void AddNewControls(object? sender, PointerPressedEventArgs e)
+        {
+          
+            _textEditor.Text = _textEditor.Text.Insert(_textEditor.CaretOffset, ((GlassCard)sender).Tag.ToString());
+            
+        }
     }
     
   
diff --git a/SukiUI.Demo/Features/Playground/PlaygroundViewModel.cs b/SukiUI.Demo/Features/Playground/PlaygroundViewModel.cs
index 597522923..d846670e9 100644
--- a/SukiUI.Demo/Features/Playground/PlaygroundViewModel.cs
+++ b/SukiUI.Demo/Features/Playground/PlaygroundViewModel.cs
@@ -1,4 +1,12 @@
-using Material.Icons;
+using System;
+using System.Collections.ObjectModel;
+using System.Globalization;
+using Avalonia.Controls;
+using Avalonia.Data.Converters;
+using Avalonia.Markup.Xaml;
+using CommunityToolkit.Mvvm.ComponentModel;
+using Material.Icons;
+using SukiUI.Theme;
 
 namespace SukiUI.Demo.Features.Playground
 {
@@ -6,7 +14,135 @@ public class PlaygroundViewModel : DemoPageBase
     {
         public PlaygroundViewModel() : base("Playground", MaterialIconKind.Pencil, -150)
         {
+        }
+        
+        public ObservableCollection<string> ButtonsElements { get; set; } = new ObservableCollection<string>()
+        {
+            "<Button Classes=\"Flat\" Content=\"Flat\" />",
+            "<Button Classes=\"Flat Rounded\" Content=\"Rounded\" />",
+            "<Button Classes=\"Basic\" Content=\"Basic\" />",
+            "<Button Content=\"Neutral\" />",
+            "<Button Classes=\"Outlined\" Content=\"Outlined\" />",
+            "<Button Classes=\"Flat Large\" Content=\"Button\" />"
+        };
+        
+        public ObservableCollection<string> InputsElements { get; set; } = new ObservableCollection<string>()
+        {
+            "<TextBox Text=\"Textbox\" />",
+            "<ToggleSwitch />",
+            "<ToggleButton Content=\"Toggle Me\" />",
+            "<Slider MinWidth=\"120\" IsSnapToTickEnabled=\"True\" Maximum=\"100\" Minimum=\"0\" TickFrequency=\"1\" Value=\"50\"></Slider>", 
+            
+            "<ComboBox PlaceholderText=\"Select a Color\">\n" +
+            "   <ComboBoxItem>\n" +
+            "      <TextBlock>Red</TextBlock>\n" +
+            "   </ComboBoxItem>\n" +
+            "</ComboBox>\n" ,
+            
+            "<CheckBox IsChecked=\"True\" />\n" ,
+            
+            
+            "<RadioButton >Item 1</RadioButton>",
+            
+            "<NumericUpDown></NumericUpDown>",
+            "<DatePicker />"
+            
+            
+            
+        };
+        
+        public ObservableCollection<string> ProgressElements { get; set; } = new ObservableCollection<string>()
+        {
+            "<suki:WaveProgress Value=\"40\" IsTextVisible=\"True\" />\n" ,
+            
+            "<suki:Stepper Margin=\"30,15\" Index=\"1\">\n" +
+            "  <suki:Stepper.Steps>\n" +
+            "    <objectModel:ObservableCollection x:TypeArguments=\"system:String\">\n" +
+            "      <system:String>Step One</system:String>\n" +
+            "      <system:String>Step Two</system:String>\n" +
+            "      </objectModel:ObservableCollection>\n" +
+            "  </suki:Stepper.Steps>\n" +
+            "</suki:Stepper>\n" ,
+            
+            "<suki:Stepper AlternativeStyle=\"True\" Margin=\"30,15\" Index=\"1\">\n" +
+            "  <suki:Stepper.Steps>\n" +
+            "    <objectModel:ObservableCollection x:TypeArguments=\"system:String\">\n" +
+            "      <system:String>Step One</system:String>\n" +
+            "      <system:String>Step Two</system:String>\n" +
+  
+            "      </objectModel:ObservableCollection>\n" +
+            "  </suki:Stepper.Steps>\n" +
+            "</suki:Stepper>\n" ,
+            
+            "<suki:CircleProgressBar Height=\"130\" StrokeWidth=\"11\" Value=\"60\" Width=\"130\">\n" +
+            "   <TextBlock Margin=\"0,1,0,0\" Classes=\"h3\">60%</TextBlock>\n" +
+            "</suki:CircleProgressBar>\n" ,
+            
+            "<suki:CircleProgressBar IsIndeterminate=\"True\" />",
+            
+            "<suki:Loading />",
+            
+            "<ProgressBar  Value=\"60\" />" ,
+            "<ProgressBar  Value=\"50\" ShowProgressText=\"True\" />",
+            "<ProgressBar IsIndeterminate=\"True\" />",
+        };
 
+        public ObservableCollection<string> ListsElements { get; set; } = new ObservableCollection<string>()
+        {
+            "<ListBox>\n" +
+            "   <TextBlock>item 1</TextBlock>\n" +
+            "   <TextBlock>item 2</TextBlock>\n" +
+            "   <TextBlock>item 3</TextBlock>\n" +
+            "</ListBox>",
+            
+            "<TreeView >\n" +
+            "  <TreeViewItem Header=\"Test 1\">\n" +
+            "    <TreeViewItem Header=\"Test 2\" />\n" +
+            "    <TreeViewItem Header=\"Test 3\" />\n" +
+            "  </TreeViewItem>\n" +
+            "  <TreeViewItem Header=\"Test 4\" />\n" +
+            "</TreeView>"
+        };
+        
+        public ObservableCollection<string> LayoutElements { get; set; } = new ObservableCollection<string>()
+        {
+            "<suki:GlassCard />",
+            
+            "<suki:GroupBox Header=\"Header\">\n" +
+            "  <Grid Height=\"100\" Width=\"300\">\n" +
+            "    <TextBlock VerticalAlignment=\"Center\" HorizontalAlignment=\"Center\">Test Content</TextBlock>\n" +
+            "  </Grid>\n" +
+            "</suki:GroupBox>" ,
+            
+            "<Expander Header=\"Click To Expand\">\n" +
+            "   <TextBlock>Expanded</TextBlock>\n" +
+            "</Expander>",
+            
+            "<TabControl>\n" +
+            "  <TabItem Header=\"Red Tab\">\n" +
+            "    <Grid Background=\"#44ff0000\" />\n" +
+            "  </TabItem>\n" +
+            "</TabControl>"
+        };
+
+    }
+    
+    public class StringToControlConverter : IValueConverter
+    {
+        public static readonly StringToControlConverter Instance = new();
+
+        public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+        {
+            string PreviewCode = "<Grid HorizontalAlignment=\"Center\" VerticalAlignment=\"Center\" xmlns:system=\"clr-namespace:System;assembly=netstandard\" xmlns:objectModel=\"clr-namespace:System.Collections.ObjectModel;assembly=System.ObjectModel\" xmlns:icons=\"clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia\" xmlns:suki=\"clr-namespace:SukiUI.Controls;assembly=SukiUI\" xmlns='https://github.com/avaloniaui' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>" +
+                                 value + "</Grid>";
+
+            return AvaloniaRuntimeXamlLoader.Parse<Grid>(PreviewCode);
+              
+        }
+
+        public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+        {
+            throw new NotSupportedException();
         }
     }
 }
\ No newline at end of file