diff --git a/src/Shared/Corathing.Contracts/DataContexts/WidgetContext.cs b/src/Shared/Corathing.Contracts/DataContexts/WidgetContext.cs
index 9520314..8a76d56 100644
--- a/src/Shared/Corathing.Contracts/DataContexts/WidgetContext.cs
+++ b/src/Shared/Corathing.Contracts/DataContexts/WidgetContext.cs
@@ -56,4 +56,8 @@ public WidgetContext(IServiceProvider services) : this()
     {
         _services = services;
     }
+
+    public virtual void OnDestroy()
+    {
+    }
 }
diff --git a/src/Shared/Corathing.Contracts/Services/ILocalizationService.cs b/src/Shared/Corathing.Contracts/Services/ILocalizationService.cs
index ad3fae4..cfd0149 100644
--- a/src/Shared/Corathing.Contracts/Services/ILocalizationService.cs
+++ b/src/Shared/Corathing.Contracts/Services/ILocalizationService.cs
@@ -28,6 +28,6 @@ public interface ILocalizationService
     /// On LocalizationChanged
     /// </summary>
     /// <param name="action"></param>
-    void Provide(string key, Action<string> action);
+    void Provide(string key, Action<string> action, string fallbackValue = "");
     #endregion
 }
diff --git a/src/Shared/Corathing.Dashboards.WPF/Services/LocalizationService.cs b/src/Shared/Corathing.Dashboards.WPF/Services/LocalizationService.cs
index aef3912..f5287f6 100644
--- a/src/Shared/Corathing.Dashboards.WPF/Services/LocalizationService.cs
+++ b/src/Shared/Corathing.Dashboards.WPF/Services/LocalizationService.cs
@@ -85,6 +85,25 @@ public string GetString(string key)
         return "";
     }
 
+    private bool TryGetString(string key, out string value)
+    {
+        value = "";
+        foreach (var resManager in _stringResourceManagers.Values)
+        {
+            if (CachedApplicationCultureInfo == null)
+            {
+                ApplySystemLanguage();
+            }
+            string? resultString = resManager.GetString(key, CachedApplicationCultureInfo);
+            if (!string.IsNullOrEmpty(resultString))
+            {
+                value = resultString;
+                return true;
+            }
+        }
+        return false;
+    }
+
 
     public event PropertyChangedEventHandler? PropertyChanged;
     private void RaisePropertyChanged(object sender, PropertyChangedEventArgs e)
@@ -194,9 +213,17 @@ public void RegisterStringResourceManager(string namespaceName, ResourceManager
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
-    public void Provide(string key, Action<string> action)
+    public void Provide(string key, Action<string> action, string fallbackValue = "")
     {
-        action?.Invoke(GetString(key));
-        _refreshProvideActions.Add(() => action?.Invoke(GetString(key)));
+        if (string.IsNullOrEmpty(key))
+        {
+            action?.Invoke(fallbackValue);
+            _refreshProvideActions.Add(() => action?.Invoke(fallbackValue));
+        }
+        else
+        {
+            action?.Invoke(TryGetString(key, out string value) ? value : fallbackValue);
+            _refreshProvideActions.Add(() => action?.Invoke(TryGetString(key, out string value) ? value : fallbackValue));
+        }
     }
 }
diff --git a/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/AngleRadiusToPointConverter.cs b/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/AngleRadiusToPointConverter.cs
index 22be724..48b61eb 100644
--- a/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/AngleRadiusToPointConverter.cs
+++ b/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/AngleRadiusToPointConverter.cs
@@ -9,23 +9,23 @@
 
 namespace Corathing.UI.WPF.Controls.CircularProgressBars;
 
-[ValueConversion(typeof(double[]), typeof(Point))]
 public class AngleRadiusToPointConverter : IMultiValueConverter
 {
     public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
     {
-        if (values.Length != 2)
+        if (values.Length != 3)
             return new();
 
         if (values[0] is double angle &&
-            values[1] is double radius)
+            values[1] is double radius &&
+            values[2] is Thickness offset)
         {
             double piang = angle * Math.PI / 180;
 
             double px = Math.Sin(piang) * radius + radius;
             double py = -Math.Cos(piang) * radius + radius;
 
-            return new Point(px, py);
+            return new Point(px + offset.Left, py + offset.Top);
         }
 
         return new();
diff --git a/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/AutoCircularProgressBar.xaml b/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/AutoCircularProgressBar.xaml
index c9515e4..29bea77 100644
--- a/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/AutoCircularProgressBar.xaml
+++ b/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/AutoCircularProgressBar.xaml
@@ -3,11 +3,9 @@
                     xmlns:circulars="clr-namespace:Corathing.UI.WPF.Controls.CircularProgressBars"
                     xmlns:converters="clr-namespace:Corathing.UI.WPF.Converters">
 
-    <converters:DoubleValueConverter x:Key="DoubleValueConverter" />
     <circulars:AngleRadiusToPointConverter x:Key="AngleRadiusToPointConverter" />
     <circulars:AngleToIsLargeConverter x:Key="AngleToIsLargeConverter" />
     <circulars:RadiusToSizeConverter x:Key="RadiusToSizeConverter" />
-    <circulars:RadiusToStartPointConverter x:Key="RadiusToStartPointConverter" />
 
     <Style TargetType="{x:Type circulars:CircularProgressBar}"
            x:Key="AutoCircularProgressBar">
@@ -15,10 +13,18 @@
                 Value="10" />
         <Setter Property="Maximum"
                 Value="100" />
-        <Setter Property="StrokeThickness"
-                Value="10" />
+        <Setter Property="HighlightStroke"
+                Value="LightGreen" />
+        <Setter Property="ShadowStroke"
+                Value="LightGray" />
+        <Setter Property="HighlightThickness"
+                Value="8" />
+        <Setter Property="ShadowThickness"
+                Value="8" />
         <Setter Property="Radius"
                 Value="50" />
+        <Setter Property="Duration"
+                Value="500" />
         <Setter Property="HorizontalAlignment"
                 Value="Stretch" />
         <Setter Property="VerticalAlignment"
@@ -27,55 +33,61 @@
                 Value="Clockwise" />
         <Setter Property="Template">
             <Setter.Value>
-                <ControlTemplate TargetType="{x:Type circulars:CircularProgressBar}">
-                    <Canvas Width="{Binding Path=Radius,
-                                RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}},
-                                Converter={StaticResource DoubleValueConverter},
-                                Mode=OneWay}"
-                            Height="{Binding Path=Radius,
-                                RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}},
-                                Converter={StaticResource DoubleValueConverter},
-                                Mode=OneWay}">
-                        <Ellipse Width="{Binding Path=Radius,
-                                    RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}},
-                                    Converter={StaticResource DoubleValueConverter}, Mode=OneWay}"
-                                 Height="{Binding Path=Radius,
-                                    RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}},
-                                    Converter={StaticResource DoubleValueConverter}, Mode=OneWay}"
-                                 Margin="{Binding Path=ShadowStorkeMargin, RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}}}"
-                                 Stroke="LightGray"
-                                 StrokeThickness="{Binding Path=InnerThickness,
+                <ControlTemplate TargetType="{x:Type circulars:CircularProgressBar}" x:Name="PART_CircularProgressBarMain">
+                    <Canvas Width="{Binding Path=Diameter,
+                                    RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}}}"
+                            Height="{Binding Path=Diameter,
+                                    RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}}}">
+                        <Ellipse Width="{Binding Path=ShadowDiameter,
+                                    RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}}}"
+                                 Height="{Binding Path=ShadowDiameter,
+                                    RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}}}"
+                                 Margin="{Binding Path=ShadowStorkeMargin,
+                            RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}}}"
+                                 Stroke="{TemplateBinding ShadowStroke}"
+                                 StrokeThickness="{Binding Path=ShadowThickness,
                                     RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}}}" />
 
-                        <Path Stroke="{TemplateBinding Background}"
-                              StrokeThickness="{TemplateBinding StrokeThickness}"
-                              Margin="{Binding Path=HighlightStrokeMargin, RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}}}">
+                        <Path Stroke="{TemplateBinding HighlightStroke}"
+                              StrokeThickness="{TemplateBinding HighlightThickness}"
+                              Width="{Binding Path=Diameter,
+                                    RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}}}"
+                              Height="{Binding Path=Diameter,
+                                    RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}}}">
                             
                             <Path.Data>
                                 <PathGeometry>
-                                    <PathFigure StartPoint="{Binding Path=StartPoint,
-                                                        Converter={StaticResource RadiusToStartPointConverter},
-                                                        RelativeSource={RelativeSource FindAncestor,
-                                                            AncestorType=circulars:CircularProgressBar}}">
+                                    <PathFigure>
+                                        <PathFigure.StartPoint>
+                                            <MultiBinding Converter="{StaticResource AngleRadiusToPointConverter}">
+                                                <MultiBinding.Bindings>
+                                                    <Binding Path="StartAngle"
+                                                             RelativeSource="{RelativeSource AncestorType=circulars:CircularProgressBar}" />
+                                                    <Binding Path="HighlightRadius"
+                                                             RelativeSource="{RelativeSource AncestorType=circulars:CircularProgressBar}" />
+                                                    <Binding Path="HighlightStrokeMargin"
+                                                             RelativeSource="{RelativeSource AncestorType=circulars:CircularProgressBar}" />
+                                                </MultiBinding.Bindings>
+                                            </MultiBinding>
+                                        </PathFigure.StartPoint>
                                         <ArcSegment RotationAngle="0"
                                                     SweepDirection="{Binding Path=SweepDirection,
                                                         RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}}}"
-                                                    Size="{Binding Path=HighlightSize,
-                                                        RelativeSource={RelativeSource FindAncestor,
-                                                            AncestorType=circulars:CircularProgressBar}}"
-                                                    IsLargeArc="{Binding Path=MidRadius,
+                                                    Size="{Binding Path=HighlightRadius,
+                                                        Converter={StaticResource RadiusToSizeConverter},
+                                                        RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}}}"
+                                                    IsLargeArc="{Binding Path=Angle,
                                                         Converter={StaticResource AngleToIsLargeConverter},
-                                                        RelativeSource={RelativeSource FindAncestor,
-                                                            AncestorType=circulars:CircularProgressBar}}">
+                                                        RelativeSource={RelativeSource AncestorType={x:Type circulars:CircularProgressBar}}}">
                                             <ArcSegment.Point>
                                                 <MultiBinding Converter="{StaticResource AngleRadiusToPointConverter}">
                                                     <MultiBinding.Bindings>
                                                         <Binding Path="Angle"
-                                                                 RelativeSource="{RelativeSource FindAncestor,
-                                                                    AncestorType=circulars:CircularProgressBar}" />
-                                                        <Binding Path="MidRadius"
-                                                                 RelativeSource="{RelativeSource FindAncestor,
-                                                                    AncestorType=circulars:CircularProgressBar}" />
+                                                                 RelativeSource="{RelativeSource AncestorType=circulars:CircularProgressBar}" />
+                                                        <Binding Path="HighlightRadius"
+                                                                 RelativeSource="{RelativeSource AncestorType=circulars:CircularProgressBar}" />
+                                                        <Binding Path="HighlightStrokeMargin"
+                                                                 RelativeSource="{RelativeSource AncestorType=circulars:CircularProgressBar}" />
                                                     </MultiBinding.Bindings>
                                                 </MultiBinding>
                                             </ArcSegment.Point>
@@ -97,7 +109,7 @@
                 Value="10" />
         <Setter Property="Maximum"
                 Value="100" />
-        <Setter Property="StrokeThickness"
+        <Setter Property="HighlightThickness"
                 Value="10" />
         <Setter Property="Radius"
                 Value="50" />
@@ -114,7 +126,7 @@
                                  StrokeThickness="1" />
 
                         <Path Stroke="{TemplateBinding Background}"
-                              StrokeThickness="{TemplateBinding StrokeThickness}">
+                              StrokeThickness="{TemplateBinding HighlightThickness}">
                             <Path.Data>
                                 <PathGeometry>
                                     <PathFigure StartPoint="50,0">
diff --git a/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/CircularProgressBar.cs b/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/CircularProgressBar.cs
index 03ceb33..55c2476 100644
--- a/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/CircularProgressBar.cs
+++ b/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/CircularProgressBar.cs
@@ -9,12 +9,50 @@
 using System.Windows.Media;
 using System.ComponentModel;
 using System.Runtime.CompilerServices;
+using System.Reflection.Metadata;
 
 namespace Corathing.UI.WPF.Controls.CircularProgressBars;
 
 public partial class CircularProgressBar : ProgressBar, INotifyPropertyChanged
 {
+    #region Constants Brushes
+    private static readonly SolidColorBrush DefaultHighlightBrush =
+        new SolidColorBrush((Color)ColorConverter.ConvertFromString("#23FF23"));
+    private static readonly SolidColorBrush DefaultShadowBrush =
+        new SolidColorBrush((Color)ColorConverter.ConvertFromString("#242424"));
+
+    #endregion
+
     #region Public Properties
+    public static readonly DependencyProperty HighlightStrokeProperty =
+        DependencyProperty.Register(
+            nameof(HighlightStroke),
+            typeof(Brush),
+            typeof(CircularProgressBar),
+            new PropertyMetadata(DefaultHighlightBrush)
+            );
+
+    public Brush HighlightStroke
+    {
+        get => (Brush)GetValue(HighlightStrokeProperty);
+        set => SetValue(HighlightStrokeProperty, value);
+    }
+
+    public static readonly DependencyProperty ShadowStrokeProperty =
+        DependencyProperty.Register(
+            nameof(ShadowStroke),
+            typeof(Brush),
+            typeof(CircularProgressBar),
+            new PropertyMetadata(DefaultShadowBrush))
+        ;
+
+    public Brush ShadowStroke
+    {
+        get => (Brush)GetValue(ShadowStrokeProperty);
+        set => SetValue(ShadowStrokeProperty, value);
+    }
+
+
     public static readonly DependencyProperty SweepDirectionProperty =
         DependencyProperty.Register(
             nameof(SweepDirection),
@@ -55,6 +93,21 @@ public double Angle
         set => SetValue(AngleProperty, value);
     }
 
+    // Using a DependencyProperty as the backing store for Angle.  This enables animation, styling, binding, etc...
+    public static readonly DependencyProperty StartAngleProperty =
+        DependencyProperty.Register(
+            nameof(StartAngle),
+            typeof(double),
+            typeof(CircularProgressBar),
+            new PropertyMetadata(0.0));
+
+    public double StartAngle
+    {
+        get => (double)GetValue(StartAngleProperty);
+        set => SetValue(StartAngleProperty, value);
+    }
+
+
     public static readonly DependencyProperty DurationProperty =
         DependencyProperty.Register(
             nameof(Duration),
@@ -69,85 +122,105 @@ public double Duration
     }
 
     // Using a DependencyProperty as the backing store for StrokeThickness.  This enables animation, styling, binding, etc...
-    public static readonly DependencyProperty StrokeThicknessProperty =
+    public static readonly DependencyProperty HighlightThicknessProperty =
         DependencyProperty.Register(
-            nameof(StrokeThickness),
+            nameof(HighlightThickness),
             typeof(double),
             typeof(CircularProgressBar),
             new PropertyMetadata(10.0));
 
-    public double StrokeThickness
+    public double HighlightThickness
     {
-        get => (double)GetValue(StrokeThicknessProperty);
-        set => SetValue(StrokeThicknessProperty, value);
+        get => (double)GetValue(HighlightThicknessProperty);
+        set => SetValue(HighlightThicknessProperty, value);
     }
 
     // Using a DependencyProperty as the backing store for InnerThickness.  This enables animation, styling, binding, etc...
-    public static readonly DependencyProperty InnerThicknessProperty =
+    public static readonly DependencyProperty ShadowThicknessProperty =
         DependencyProperty.Register(
-            nameof(InnerThickness),
+            nameof(ShadowThickness),
             typeof(double),
             typeof(CircularProgressBar),
             new PropertyMetadata(10.0));
 
-    public double InnerThickness
+    public double ShadowThickness
     {
-        get => (double)GetValue(InnerThicknessProperty);
-        set => SetValue(InnerThicknessProperty, value);
+        get => (double)GetValue(ShadowThicknessProperty);
+        set => SetValue(ShadowThicknessProperty, value);
     }
 
     #endregion
 
-    #region INotifyPropertyChanged
+    #region Implement INotifyPropertyChanged
     public event PropertyChangedEventHandler? PropertyChanged;
 
-    public void RaisePropertyChanged([CallerMemberName] string propertyName = null)
+    public void RaisePropertyChanged([CallerMemberName] string? propertyName = null)
     {
         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
     }
 
-    //public void SetProperty<T>(ref T  )
+    public bool SetProperty<T>(ref T member, T value, [CallerMemberName] string? propertyName = null)
+    {
+        if (EqualityComparer<T>.Default.Equals(member, value))
+            return false;
+        member = value;
+        RaisePropertyChanged(propertyName);
+        return true;
+    }
     #endregion
 
 
     #region Internal Properties
     // https://stackoverflow.com/questions/33015016/hidden-public-property-in-wpf-control
 
-    public static readonly DependencyProperty StartPointProperty = DependencyProperty.Register(
-        nameof(StartPoint),
-        typeof(Point),
-        typeof(CircularProgressBar),
-        new PropertyMetadata(new Point(0, 0)));
+    private Point _highlightStartPoint;
+    public Point HighlightStartPoint { get => _highlightStartPoint; set => SetProperty(ref _highlightStartPoint, value); }
+
+    private Point _highlightPoint;
+    public Point HighlightPoint { get => _highlightPoint; set => SetProperty(ref _highlightPoint, value); }
+
+    private double _diameter;
+    public double Diameter { get => _diameter; set => SetProperty(ref _diameter, value); }
+
+    private Thickness _marginOffset;
+    public Thickness StorkeMargin { get => _marginOffset; set => SetProperty(ref _marginOffset, value); }
+
+    private Thickness _highlightStorkeMargin;
+    public Thickness HighlightStrokeMargin { get => _highlightStorkeMargin; set => SetProperty(ref _highlightStorkeMargin, value); }
+
+    public static readonly DependencyProperty HighlightSizeProperty =
+        DependencyProperty.Register(
+            nameof(HighlightSize),
+            typeof(Size),
+            typeof(CircularProgressBar),
+            new FrameworkPropertyMetadata(new Size(0, 0)));
 
     [Browsable(false)]
-    public Point StartPoint
+    public Size HighlightSize
     {
-        get => (Point)GetValue(StartPointProperty);
-        set => SetValue(StartPointProperty, value);
+        get => (Size)GetValue(HighlightSizeProperty);
+        set => SetValue(HighlightSizeProperty, value);
     }
 
-    public static readonly DependencyProperty DiameterProperty = DependencyProperty.Register(
-        nameof(Diameter),
-        typeof(double),
-        typeof(CircularProgressBar),
-        new PropertyMetadata(0.0));
+    private Thickness _shadowStorkeMargin;
+    public Thickness ShadowStorkeMargin { get => _shadowStorkeMargin; set => SetProperty(ref _shadowStorkeMargin, value); }
 
-    public double Diameter
-    {
-        get;
-        set;
-    }
-    public Thickness HighlightStrokeMargin { get; set; }
-    public Size HighlightSize { get; set; }
-    public Thickness ShadowStorkeMargin { get; set; }
-    public double OuterRadius { get; set; }
-    public double MidRadius { get; set; }
-    public double InnerRadius { get; set; }
+    private double _highlightRadius;
+    public double HighlightRadius { get => _highlightRadius; set => SetProperty(ref _highlightRadius, value); }
+
+    private double _highlightDiameter;
+    public double HighlightDiameter { get => _highlightDiameter; set => SetProperty(ref _highlightDiameter, value); }
 
+    private double _shadowDiameter;
+    public double ShadowDiameter { get => _shadowDiameter; set => SetProperty(ref _shadowDiameter, value); }
     #endregion
 
     public CircularProgressBar()
     {
+        HighlightStartPoint = new Point(0, 0);
+        HighlightSize = new Size(0, 0);
+        SweepDirection = SweepDirection.Clockwise;
+
         ValueChanged += CircularProgressBar_ValueChanged;
         SizeChanged += CircularProgressBar_SizeChanged;
     }
@@ -156,14 +229,24 @@ private static void OnRadiusChanged(object sender)
     {
         if (sender is CircularProgressBar bar)
         {
-            var marginOffset = Math.Max(bar.StrokeThickness, bar.InnerThickness) / 2;
-            bar.Diameter = bar.Radius * 2;
-            bar.HighlightStrokeMargin = new Thickness(bar.StrokeThickness - marginOffset);
-            bar.ShadowStorkeMargin = new Thickness(bar.InnerThickness / 2 - marginOffset);
-            bar.MidRadius = bar.Radius - (bar.StrokeThickness - marginOffset);
-            bar.HighlightSize = new Size(bar.Radius - (bar.StrokeThickness - marginOffset), bar.Radius - (bar.StrokeThickness - marginOffset));
-            bar.StartPoint = new Point(bar.Radius - (bar.StrokeThickness - marginOffset), 0);
-            //bar.RaiseEvent(new RoutedEventArgs());
+            var marginOffset = Math.Abs(bar.HighlightThickness - bar.ShadowThickness) / 2;
+            if (bar.HighlightThickness >= bar.ShadowThickness)
+            {
+                bar.HighlightStrokeMargin = new Thickness((bar.HighlightThickness)/ 2);
+                bar.ShadowStorkeMargin = new Thickness(marginOffset);
+            }
+            else
+            {
+                bar.HighlightStrokeMargin = new Thickness(marginOffset + (bar.HighlightThickness / 2));
+                bar.ShadowStorkeMargin = new Thickness(0);
+            }
+            bar.HighlightDiameter = (bar.Radius - bar.HighlightStrokeMargin.Top) * 2;
+            bar.ShadowDiameter = (bar.Radius - bar.ShadowStorkeMargin.Top) * 2;
+            bar.HighlightRadius = bar.HighlightDiameter / 2;
+            bar.HighlightStartPoint = new Point(bar.HighlightRadius + bar.HighlightStrokeMargin.Left, bar.HighlightStrokeMargin.Top);
+            bar.HighlightSize = new Size(bar.HighlightRadius, bar.HighlightRadius);
+
+            bar.RaisePropertyChanged(nameof(Radius));
         }
     }
 
@@ -174,6 +257,7 @@ private void CircularProgressBar_SizeChanged(object sender, SizeChangedEventArgs
             var diameter = Math.Min(bar.ActualWidth, bar.ActualHeight);
 
             bar.Radius = diameter / 2;
+            bar.Diameter = diameter;
         }
     }
 
diff --git a/src/Shared/Corathing.UI.WPF/Converters/BoolNotNullToVisibilityConverter.cs b/src/Shared/Corathing.UI.WPF/Converters/BoolNotNullToVisibilityConverter.cs
new file mode 100644
index 0000000..bc44123
--- /dev/null
+++ b/src/Shared/Corathing.UI.WPF/Converters/BoolNotNullToVisibilityConverter.cs
@@ -0,0 +1,47 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Data;
+
+namespace Corathing.UI.WPF.Converters;
+
+/// <inheritdoc />
+/// <summary>
+/// Converter for if bool value provided is true then set Visibility.Collapsed else Visibility.Visible
+/// </summary>
+/// <seealso cref="System.Windows.Data.IValueConverter" />
+[ValueConversion(typeof(bool), typeof(Visibility))]
+public class BoolNotNullToVisibilityConverter : IValueConverter
+{
+    /// <inheritdoc />
+    /// <summary>
+    /// Converts a value.
+    /// </summary>
+    /// <param name="value">The value produced by the binding source.</param>
+    /// <param name="targetType">The type of the binding target property.</param>
+    /// <param name="parameter">The converter parameter to use.</param>
+    /// <param name="culture">The culture to use in the converter.</param>
+    /// <returns>
+    /// A converted value. If the method returns <see langword="Visibility.Collapsed" />, the valid null value is used.
+    /// </returns>
+    /// <exception cref="System.Exception">InvertBoolToVisibilityConverter</exception>
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (value == null)
+            return Visibility.Collapsed;
+
+        if (!(value is bool boolValue))
+            return Visibility.Collapsed;
+
+        return boolValue ? Visibility.Visible : Visibility.Collapsed;
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}
diff --git a/src/Shared/Corathing.UI.WPF/Converters/InvertBoolNullToVisibilityConverter.cs b/src/Shared/Corathing.UI.WPF/Converters/InvertBoolNullToVisibilityConverter.cs
new file mode 100644
index 0000000..09684ee
--- /dev/null
+++ b/src/Shared/Corathing.UI.WPF/Converters/InvertBoolNullToVisibilityConverter.cs
@@ -0,0 +1,47 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Data;
+using System.Windows;
+
+namespace Corathing.UI.WPF.Converters;
+
+/// <inheritdoc />
+/// <summary>
+/// Converter for if bool value provided is true then set Visibility.Collapsed else Visibility.Visible
+/// </summary>
+/// <seealso cref="System.Windows.Data.IValueConverter" />
+[ValueConversion(typeof(bool), typeof(Visibility))]
+public class InvertBoolNullToVisibilityConverter : IValueConverter
+{
+    /// <inheritdoc />
+    /// <summary>
+    /// Converts a value.
+    /// </summary>
+    /// <param name="value">The value produced by the binding source.</param>
+    /// <param name="targetType">The type of the binding target property.</param>
+    /// <param name="parameter">The converter parameter to use.</param>
+    /// <param name="culture">The culture to use in the converter.</param>
+    /// <returns>
+    /// A converted value. If the method returns <see langword="Visibility.Collapsed" />, the valid null value is used.
+    /// </returns>
+    /// <exception cref="System.Exception">InvertBoolToVisibilityConverter</exception>
+    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (value == null)
+            return Visibility.Visible;
+
+        if (!(value is bool boolValue))
+            return Visibility.Visible;
+
+        return boolValue ? Visibility.Collapsed : Visibility.Visible;
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}
diff --git a/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/RadiusToStartPointConverter.cs b/src/Shared/Corathing.UI.WPF/Converters/TimeSpanSecondToDoubleConverter.cs
similarity index 60%
rename from src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/RadiusToStartPointConverter.cs
rename to src/Shared/Corathing.UI.WPF/Converters/TimeSpanSecondToDoubleConverter.cs
index c43841d..5de4170 100644
--- a/src/Shared/Corathing.UI.WPF/Controls/CircularProgressBars/RadiusToStartPointConverter.cs
+++ b/src/Shared/Corathing.UI.WPF/Converters/TimeSpanSecondToDoubleConverter.cs
@@ -4,21 +4,20 @@
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
-using System.Windows;
 using System.Windows.Data;
 
-namespace Corathing.UI.WPF.Controls.CircularProgressBars;
+namespace Corathing.UI.WPF.Converters;
 
-[ValueConversion(typeof(double), typeof(Point))]
-public class RadiusToStartPointConverter : IValueConverter
+[ValueConversion(typeof(TimeSpan), typeof(double))]
+public class TimeSpanSecondToDoubleConverter : IValueConverter
 {
     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
     {
-        if (value is double radius)
+        if (value is TimeSpan timeSpan)
         {
-            return new Point(radius, 0);
+            return timeSpan.TotalSeconds;
         }
-        return value;
+        return 0.0;
     }
 
     public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
diff --git a/src/Widgets/Corathing.Widgets.Basics/Widgets/Timers/TimerWidget.xaml b/src/Widgets/Corathing.Widgets.Basics/Widgets/Timers/TimerWidget.xaml
index 02aab0c..92e0ebe 100644
--- a/src/Widgets/Corathing.Widgets.Basics/Widgets/Timers/TimerWidget.xaml
+++ b/src/Widgets/Corathing.Widgets.Basics/Widgets/Timers/TimerWidget.xaml
@@ -5,12 +5,40 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:Corathing.Widgets.Basics.Widgets.Timers"
              xmlns:circulars="clr-namespace:Corathing.UI.WPF.Controls.CircularProgressBars;assembly=Corathing.UI.WPF"
-             mc:Ignorable="d" 
-             d:DesignHeight="450" d:DesignWidth="800">
+             xmlns:converters="clr-namespace:Corathing.UI.WPF.Converters;assembly=Corathing.UI.WPF"
+             mc:Ignorable="d"
+             d:DesignHeight="128" d:DesignWidth="128">
     <UserControl.Resources>
-        <ResourceDictionary Source="pack://application:,,,/Corathing.UI.WPF;component/Styles/Controls.xaml" />
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary Source="pack://application:,,,/Corathing.UI.WPF;component/Styles/Controls.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+            <converters:TimeSpanSecondToDoubleConverter x:Key="TimeSpanSecondToDoubleConverter" />
+            <converters:BoolNotNullToVisibilityConverter x:Key="BoolNotNullToVisibilityConverter" />
+            <converters:InvertBoolNullToVisibilityConverter x:Key="InvertBoolNullToVisibilityConverter" />
+        </ResourceDictionary>
     </UserControl.Resources>
     <Grid>
-        <circulars:CircularProgressBar Style="{StaticResource AutoCircularProgressBar}" />
+        <circulars:CircularProgressBar Padding="4"
+                                       Style="{StaticResource AutoCircularProgressBar}"
+                                       Maximum="{Binding ConfiguringTime, Converter={StaticResource TimeSpanSecondToDoubleConverter}}"
+                                       Value="{Binding RamainingTime, Converter={StaticResource TimeSpanSecondToDoubleConverter}}"
+                                       />
+        <StackPanel VerticalAlignment="Center"
+                    HorizontalAlignment="Center"
+                    Orientation="Vertical">
+            <Button Content="Start"
+                    Background="White"
+                    Visibility="{Binding IsRunning, Converter={StaticResource InverseBooleanToVisibilityConverter}}"
+                    Command="{Binding StartCommand}" />
+            <Button Content="Stop"
+                    Background="White"
+                    Visibility="{Binding IsRunning, Converter={StaticResource BoolNotNullToVisibilityConverter}}"
+                    Command="{Binding StopCommand}" />
+            <Button Content="Reset"
+                    Background="White"
+                    Visibility="{Binding IsRunning, Converter={StaticResource BoolNotNullToVisibilityConverter}}"
+                    Command="{Binding ResetCommand}" />
+        </StackPanel>
     </Grid>
 </UserControl>
diff --git a/src/Widgets/Corathing.Widgets.Basics/Widgets/Timers/TimerWidget.xaml.cs b/src/Widgets/Corathing.Widgets.Basics/Widgets/Timers/TimerWidget.xaml.cs
index b36a4c4..37f124e 100644
--- a/src/Widgets/Corathing.Widgets.Basics/Widgets/Timers/TimerWidget.xaml.cs
+++ b/src/Widgets/Corathing.Widgets.Basics/Widgets/Timers/TimerWidget.xaml.cs
@@ -12,6 +12,10 @@
 using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
+using System.Windows.Threading;
+
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 
 using Corathing.Contracts.Bases;
 using Corathing.Contracts.Entries;
@@ -33,13 +37,82 @@ namespace Corathing.Widgets.Basics.Widgets.Timers;
     )]
 public partial class TimerWidgetViewModel : WidgetContext
 {
+    #region 01. Timer
+    private DispatcherTimer? _timer;
+
+    [ObservableProperty]
+    private TimeSpan _configuringTime;
+    [ObservableProperty]
+    private TimeSpan _ramainingTime;
+    [ObservableProperty]
+    private bool _isRunning;
+    #endregion
+
+    #region 02. Progressbar
+
+    #endregion
+
     /// <summary>
     /// Initializes a new instance of the <see cref="OneByOneViewModel"/> class.
     /// </summary>
     public TimerWidgetViewModel(IServiceProvider services) : base(services)
     {
         ILocalizationService localizationService = services.GetService<ILocalizationService>();
-        localizationService.Provide("Corathing.Widgets.Basics.TimerName", value => WidgetTitle = value);
+        localizationService.Provide(
+            "Corathing.Widgets.Basics.TimerName",
+            value => WidgetTitle = value,
+            fallbackValue: "Timer");
+
+        IsRunning = false;
+        ConfiguringTime = TimeSpan.FromSeconds(10);
+        RamainingTime = TimeSpan.FromSeconds(10);
+
+        _timer = new DispatcherTimer();
+        _timer.Tick += OnTimerTick;
+        _timer.Interval = TimeSpan.FromMilliseconds(1000);
+    }
+
+    public override void OnDestroy()
+    {
+        base.OnDestroy();
+
+        _timer?.Stop();
+        _timer.Tick -= OnTimerTick;
+        _timer = null;
+    }
+
+    private void OnTimerTick(object sender, EventArgs e)
+    {
+        RamainingTime -= TimeSpan.FromSeconds(1);
+    }
+
+    [RelayCommand]
+    public void Start()
+    {
+        if (EditMode == true)
+            return;
+
+        IsRunning = true;
+        _timer.Start();
+    }
+
+    [RelayCommand]
+    public void Stop()
+    {
+        if (EditMode == true)
+            return;
+
+        IsRunning = false;
+        _timer.Stop();
+    }
+
+    [RelayCommand]
+    public void Reset()
+    {
+        if (EditMode == true)
+            return;
+
+        RamainingTime = ConfiguringTime;
     }
 }