diff --git a/Meio.App/App.axaml b/Meio.App/App.axaml
index fce12ed..5c9ebf7 100644
--- a/Meio.App/App.axaml
+++ b/Meio.App/App.axaml
@@ -5,6 +5,33 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Meio.App/App.axaml.cs b/Meio.App/App.axaml.cs
index 23be316..61c924d 100644
--- a/Meio.App/App.axaml.cs
+++ b/Meio.App/App.axaml.cs
@@ -1,6 +1,7 @@
using Avalonia;
using Avalonia.Controls.ApplicationLifetimes;
using Avalonia.Markup.Xaml;
+using Meio.app.Views;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Logging.Console;
using PrettyLogging.Console;
diff --git a/Meio.App/Assets/playlistbanner.jpg b/Meio.App/Assets/playlistbanner.jpg
new file mode 100644
index 0000000..84d5d87
Binary files /dev/null and b/Meio.App/Assets/playlistbanner.jpg differ
diff --git a/Meio.App/Assets/svg/PlayerWidget/playerWidget_backward.svg b/Meio.App/Assets/svg/PlayerWidget/playerWidget_backward.svg
new file mode 100644
index 0000000..8a4857c
--- /dev/null
+++ b/Meio.App/Assets/svg/PlayerWidget/playerWidget_backward.svg
@@ -0,0 +1,4 @@
+
diff --git a/Meio.App/Assets/svg/PlayerWidget/playerWidget_forward.svg b/Meio.App/Assets/svg/PlayerWidget/playerWidget_forward.svg
new file mode 100644
index 0000000..eb6003e
--- /dev/null
+++ b/Meio.App/Assets/svg/PlayerWidget/playerWidget_forward.svg
@@ -0,0 +1,11 @@
+
diff --git a/Meio.App/Assets/svg/PlayerWidget/playerWidget_play.svg b/Meio.App/Assets/svg/PlayerWidget/playerWidget_play.svg
new file mode 100644
index 0000000..fe1b12f
--- /dev/null
+++ b/Meio.App/Assets/svg/PlayerWidget/playerWidget_play.svg
@@ -0,0 +1,4 @@
+
diff --git a/Meio.App/Assets/svg/PlayerWidget/playerWidget_spectre.svg b/Meio.App/Assets/svg/PlayerWidget/playerWidget_spectre.svg
new file mode 100644
index 0000000..99f024d
--- /dev/null
+++ b/Meio.App/Assets/svg/PlayerWidget/playerWidget_spectre.svg
@@ -0,0 +1,7 @@
+
diff --git a/Meio.App/Assets/svg/PlayerWidget/playerWidget_volume.svg b/Meio.App/Assets/svg/PlayerWidget/playerWidget_volume.svg
new file mode 100644
index 0000000..ea1c9f5
--- /dev/null
+++ b/Meio.App/Assets/svg/PlayerWidget/playerWidget_volume.svg
@@ -0,0 +1,4 @@
+
diff --git a/Meio.App/Assets/svg/Playlist/playlist_like.svg b/Meio.App/Assets/svg/Playlist/playlist_like.svg
new file mode 100644
index 0000000..ca16a0d
--- /dev/null
+++ b/Meio.App/Assets/svg/Playlist/playlist_like.svg
@@ -0,0 +1,3 @@
+
diff --git a/Meio.App/Assets/svg/Playlist/playlist_play.svg b/Meio.App/Assets/svg/Playlist/playlist_play.svg
new file mode 100644
index 0000000..2959ec4
--- /dev/null
+++ b/Meio.App/Assets/svg/Playlist/playlist_play.svg
@@ -0,0 +1,6 @@
+
diff --git a/Meio.App/Assets/svg/hamburger_md.svg b/Meio.App/Assets/svg/hamburger_md.svg
new file mode 100644
index 0000000..3583a8c
--- /dev/null
+++ b/Meio.App/Assets/svg/hamburger_md.svg
@@ -0,0 +1,6 @@
+
diff --git a/Meio.App/Assets/svg/other.svg b/Meio.App/Assets/svg/other.svg
new file mode 100644
index 0000000..fd566b3
--- /dev/null
+++ b/Meio.App/Assets/svg/other.svg
@@ -0,0 +1,8 @@
+
diff --git a/Meio.App/Assets/svg/searchWidget_icon.svg b/Meio.App/Assets/svg/searchWidget_icon.svg
new file mode 100644
index 0000000..0b5e9dc
--- /dev/null
+++ b/Meio.App/Assets/svg/searchWidget_icon.svg
@@ -0,0 +1,7 @@
+
diff --git a/Meio.App/Assets/svg/shuffle.svg b/Meio.App/Assets/svg/shuffle.svg
new file mode 100644
index 0000000..3d61a82
--- /dev/null
+++ b/Meio.App/Assets/svg/shuffle.svg
@@ -0,0 +1,4 @@
+
diff --git a/Meio.App/Controls/Background.axaml b/Meio.App/Controls/Background.axaml
new file mode 100644
index 0000000..47656e1
--- /dev/null
+++ b/Meio.App/Controls/Background.axaml
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
diff --git a/Meio.App/Controls/Background.axaml.cs b/Meio.App/Controls/Background.axaml.cs
new file mode 100644
index 0000000..4bd5752
--- /dev/null
+++ b/Meio.App/Controls/Background.axaml.cs
@@ -0,0 +1,99 @@
+using System;
+using System.Linq;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Shapes;
+using Avalonia.Input;
+using Avalonia.Media;
+
+namespace Meio.app.Controls;
+
+public class Background : TemplatedControl
+{
+ private new const int Width = 1366;
+ private new const int Height = 768;
+ private new const int MinEllipseSize = 50;
+ private static readonly Ellipse[] Shapes = [];
+ private Canvas? _canvas;
+ private static readonly Random Random = new(); // TODO: Better randomisation
+
+ // TODO: variable ellipse count and brushes via settings
+ // TODO: Convenient ellipse count according to window size
+ private const int Count = 20;
+
+ private readonly IBrush[] _brushes =
+ [
+ new SolidColorBrush(Color.Parse("#BFA83939")),
+ new SolidColorBrush(Color.Parse("#BFFFCACA")),
+ new SolidColorBrush(Color.Parse("#BF772727"))
+ ];
+
+ private static void GenerateEllipses(int count, IBrush[] brushes, Canvas canvas)
+ {
+ for (var i = 0; i < count; i++)
+ {
+ var posX = Random.NextDouble() * Width;
+ var posY = Random.NextDouble() * Height;
+ var size = Random.Next(MinEllipseSize, Height / 2);
+ var color = brushes[Random.Next(0, brushes.Length)];
+
+ var ellipse = new Ellipse
+ {
+ Width = size,
+ Height = size,
+ Fill = color,
+ ZIndex = 0
+ };
+
+ Shapes.Append(ellipse);
+
+ ellipse.SetValue(Canvas.LeftProperty, posX);
+ ellipse.SetValue(Canvas.TopProperty, posY);
+
+ canvas.Children.Add(ellipse);
+ }
+ }
+
+ protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+ {
+ // e.NameScope.FindResource("PrimaryBrush") as IBrush;
+ base.OnApplyTemplate(e);
+ _canvas = e.NameScope.Get