diff --git a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor
index eba1596..3bca23a 100644
--- a/src/Connected.Components.Showcase.Runner/Pages/Demo.razor
+++ b/src/Connected.Components.Showcase.Runner/Pages/Demo.razor
@@ -946,7 +946,7 @@
 
 
                     <div class="form-outer">
-                        <div class="form-step @NextSlide">
+                    <div class="form-step previous">
                             <div class="row">
                                 <div class="col-12">Description for step 1</div>
                                 @* <div class="col-12 col-md-6 ">
@@ -995,9 +995,13 @@
                         </div>
                                       
 
-                        <div class="form-step @NextSlide">
+                        <div class="form-step">
                             <div class="bg-info">2</div>
                         </div>
+
+                        <div class="form-step next">
+                            <div class="bg-info">3</div>
+                        </div>
                     </div>
 
 
@@ -1014,7 +1018,6 @@
                                 <div class="dot completed"></div> 
                                 <div class="dot @NextSlide"></div>
                                 <div class="dot"></div>
-                                <div class="dot"></div>
                             </div>
 
 
diff --git a/src/Connected.Components/Components/DatePicker/DatePicker.razor b/src/Connected.Components/Components/DatePicker/DatePicker.razor
new file mode 100644
index 0000000..9f6bb34
--- /dev/null
+++ b/src/Connected.Components/Components/DatePicker/DatePicker.razor
@@ -0,0 +1,79 @@
+@using System.Globalization;
+@if (loaded)
+{
+    <TextInput Value="@SelectedDate.ToString(Format)" Readonly="_readonly"></TextInput>
+    @if (Shown)
+    {
+        <div id="picker" class="m-2" style="width:270px; height:auto;">
+            <div id="picker_header" class="bg-info" style="height:80px;">
+                <div class="text-medium p-1">
+                    @SelectedDate.Year.ToString()
+                </div>
+                <div class="text-large p-1">
+                    @SelectedDate.ToString("ddd, " + Format)
+                </div>
+            </div>
+            <div id="picker_body" class="bg-white" style="height:auto;">
+                @switch (Selecting)
+                {
+                    case Selecting.Years:
+                        {
+                            <div class="text-justify text-md-justify">
+                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
+                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Days)>@SelectedDate.ToString("yyyy")</div>
+                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
+                            </div>
+                            break;
+                        }
+                    case Selecting.Months:
+                        {
+                            <div class="text-justify text-md-justify">
+                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
+                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Years)>@SelectedDate.ToString("yyyy")</div>
+                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
+                            </div>
+                                @for (int i = 1; i <= @DateTimeFormatInfo.CurrentInfo.MonthNames.Length - 1; i++)
+                                {
+                                    int m = i;
+                                    <a href="#" @onclick="@(()=>SetMonth(m))">
+
+                                    <div class="chip-group-content d-inline-flex bg-core @MonthChipClass(m) m-1 b-1 b-r-3 text-light" style="width:30%;">
+                                            <div class="chip-leading-icon"></div>
+                                            <div class="chip-label">@DateTimeFormatInfo.CurrentInfo.GetMonthName(i).Substring(0,3)</div>
+                                            <div class="chip-cta-icon"></div>
+                                        </div>
+
+                                    </a>
+                                    if (i%3==0) { <br/> }
+                                }
+                            break;
+                        }
+                    case (Selecting.Days):
+                        {
+                            <div class="text-justify text-md-justify">
+                                <div class="d-inline-block p-2" style="width:10%;text-align:left"><i class='bx bx-chevron-left'></i></div>
+                                <div class="d-inline-block" style="width:70%;text-align:center" @onclick=@(()=>Selecting = Selecting.Months)>@SelectedDate.ToString("MMMM")</div>
+                                <div class="d-inline-block p-2" style="width:10%;text-align:right"><i class='bx bx-chevron-right'></i></div>
+                            </div>
+
+                            @for (int i = 0; i < 7; i++)
+                            {
+                                <div class="chip-leading-icon d-inline-block p-1 m-1 bg-danger text-small text-light" style="width:30px; height:30px; text-align:center">@calendarStart.AddDays(i).ToString("ddd").Substring(0,1).ToUpper()</div>
+                            }
+                            @foreach (var Date in Dates)
+                            {
+                                <a href="#" @onclick="@(()=>SetDate(Date))"><div class="chip-leading-icon d-inline-block p-1 m-1 @DateChipStyle(Date)" style="width:30px; height:30px; text-align:center">@Date.Day.ToString()</div></a>
+                                @if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
+                                {
+                                    <br />
+                                }
+
+                                calendarStart = calendarStart.AddDays(1);
+                            }
+                            break;
+                        }
+                }
+            </div>
+        </div>
+    }
+}
diff --git a/src/Connected.Components/Components/DatePicker/DatePicker.razor.cs b/src/Connected.Components/Components/DatePicker/DatePicker.razor.cs
new file mode 100644
index 0000000..b0b7f7e
--- /dev/null
+++ b/src/Connected.Components/Components/DatePicker/DatePicker.razor.cs
@@ -0,0 +1,162 @@
+using Connected.Utilities;
+using Microsoft.AspNetCore.Components;
+
+namespace Connected.Components.DatePicker;
+public partial class DatePicker
+{
+	private bool loaded = false;
+
+	private Selecting Selecting = Selecting.Days;
+	public DateTime calendarStart { get; set; }
+	public DateTime calendarEnd { get; set; }
+
+	//private DateTime Today = DateTime.Today;
+
+	private DateTime SelectedDate = DateTime.Today;
+
+	private List<DateTime> Dates = new List<DateTime>();
+
+	[Parameter]
+	public string Format { get; set; } = "dd.MM.yyyy";
+
+	private bool _readonly = false;
+	[Parameter]
+	public bool Editable
+	{
+		get
+		{
+			return !_readonly;
+		}
+		set
+		{
+			_readonly = !value;
+		}
+	}
+
+	[Parameter]
+	public bool Shown { get; set; } = false;
+
+	public void SetMonthNavigation()
+	{
+
+	}
+
+	public void SetDate(DateTime Date)
+	{
+		SelectedDate = Date;
+		SetStartStop();
+		StateHasChanged();
+	}
+
+	public void SetMonth(int month)
+	{
+		SelectedDate = new DateTime(SelectedDate.Year, month, SelectedDate.Day);
+		SetStartStop();
+		StateHasChanged();
+	}
+
+	private string ChipFirstRowClass
+	{
+		get
+		{
+			return new CssBuilder()
+				.AddClass("chip-leading-icon d-inline-block p-1 bg-danger text-small text-light")
+				.Build();
+		}
+	}
+	private string ChipFirstRowStyle
+	{
+		get
+		{
+			return new StyleBuilder()
+				.AddStyle("width", "30px")
+				.AddStyle("height", "30px")
+				.AddStyle("text-align", "center")
+				.Build();
+		}
+	}
+	/*
+	 @for (int i=0;i<7; i++)
+            {
+                <div class="chip-leading-icon d-inline-block p-1 bg-danger text-small text-light" style="width:30px; height:30px; text-align:center">@calendarStart.AddDays(i).ToString("ddd").Substring(0,1)</div>
+            }
+            @while (calendarStart.CompareTo(calendarEnd) < 0)
+            {
+                <a href="#" @onclick="@(()=>SetDate(calendarStart))"><div class="chip-leading-icon d-inline-block p-1 @ChipStyle(calendarStart)" style="width:30px; height:30px; text-align:center">@calendarStart.Day.ToString()</div></a>
+                @if (calendarStart.DayOfWeek.Equals(DayOfWeek.Sunday))
+                {
+                    <br />
+                }
+                calendarStart = calendarStart.AddDays(1);
+            } 
+	 
+	 */
+
+	public void SetStartStop()
+	{
+		calendarStart = SelectedDate;
+		while (calendarStart.Day != 1)
+		{
+			calendarStart = calendarStart.AddDays(-1);
+		}
+		while (!calendarStart.DayOfWeek.Equals(DayOfWeek.Monday))
+		{
+			calendarStart = calendarStart.AddDays(-1);
+		}
+		calendarEnd = SelectedDate;
+		while (calendarEnd.Month == SelectedDate.Month)
+		{
+			calendarEnd = calendarEnd.AddDays(1);
+		}
+		while (!calendarEnd.DayOfWeek.Equals(DayOfWeek.Monday))
+		{
+			calendarEnd = calendarEnd.AddDays(1);
+		}
+		DateTime start = calendarStart;
+		if (Dates is null) Dates = new();
+		Dates.Clear();
+		while (start.CompareTo(calendarEnd) < 0)
+		{
+			Dates.Add(start);
+			start = start.AddDays(1);
+		}
+	}
+
+	public string DateChipStyle(DateTime date)
+	{
+		string result = "";
+		if (date.Month.CompareTo(SelectedDate.Month) < 0 || date.Month.CompareTo(SelectedDate.Month) > 0) return "bg-core text-light";
+		if (date.Month.CompareTo(SelectedDate.Month) == 0)
+		{
+			if (date.Date.CompareTo(SelectedDate.Date) == 0)
+				return "bg-info text-light";
+			else
+				return "bg-core text-dark";
+		}
+		return result;
+	}
+
+	public string MonthChipClass(int month)
+	{
+		if (month.CompareTo(SelectedDate.Month) == 0)
+			return "bg-info text-light";
+		else
+			return "bg-core text-dark";
+	}
+
+	protected override async Task OnInitializedAsync()
+	{
+		SelectedDate = DateTime.Today;
+		SetStartStop();
+		loaded = true;
+		await base.OnInitializedAsync();
+	}
+
+}
+
+public enum Selecting
+{
+	Days,
+	Months,
+	Years
+}
diff --git a/src/Connected.Components/Connected.Components.csproj b/src/Connected.Components/Connected.Components.csproj
index 5ca9ac7..da165bb 100644
--- a/src/Connected.Components/Connected.Components.csproj
+++ b/src/Connected.Components/Connected.Components.csproj
@@ -20,6 +20,7 @@
 
 	<ItemGroup>
 		<None Include="compilerconfig.json" />
+		<None Include="Components\DatePicker\DatePicker.razor" />
 	</ItemGroup>
 
 	<ItemGroup>