t

Server Dashboard/Controls/Dashboard/CRUD Popup/CreateModulePopup.xaml

@@ -4,18 +4,18 @@
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:Server_Dashboard.Views.DashboardPages.ModuleCRUD"
-        xmlns:root="clr-namespace:Server_Dashboard"
+        xmlns:root="clr-namespace:Server_Dashboard" xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
         d:DataContext="{d:DesignInstance Type=root:DashboardModuleViewModel}"
         mc:Ignorable="d"
         WindowStyle="None"
         ResizeMode="NoResize"
-        Height="450"
-        Width="300"
+        Height="700"
+        Width="500"
         AllowsTransparency="True"
         >
     <Border 
-        Width="300"
-        Height="450"
+        Width="500"
+        Height="700"
         >
         <Border.Background>
             <SolidColorBrush Color="#2D2D2D" Opacity="1"/>
@@ -40,14 +40,21 @@
                     Grid.Column="0"
                     Text="Create a new Server"
                     Margin="5 0 0 0"
-                    Foreground="{StaticResource DeepPurple_200}"
+                    Foreground="{StaticResource DeepPurple_A100}"
+                    VerticalAlignment="Center"
                 />
                 <Button 
                     Style="{StaticResource CloseButton}"
                     Grid.Column="2"
                     Content="✕"
-                    Command="{Binding ClosePopupCommand}"
-                />
+                    Cursor="Hand"
+                    >
+                    <i:Interaction.Triggers>
+                        <i:EventTrigger EventName="Click">
+                            <i:CallMethodAction MethodName="Close" TargetObject="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}"/>
+                        </i:EventTrigger>
+                    </i:Interaction.Triggers>
+                </Button>
             </Grid>
             <Grid
                 Background="{StaticResource BackgroundSurface_04dp}"
@@ -68,7 +75,7 @@
                     <StackPanel Orientation="Horizontal">
                         <TextBlock 
                             Text="Server Name"
-                            FontSize="16"
+                            FontSize="24"
                             Margin="0 0 0 5"
                             >
                             <TextBlock.Foreground>
@@ -78,7 +85,7 @@
                         <TextBlock 
                             Text="*" 
                             Foreground="{StaticResource ErrorRed}"
-                            FontSize="16"
+                            FontSize="20"
                         />
                     </StackPanel>
                     <Grid>
@@ -88,15 +95,15 @@
                         <TextBox 
                             Text="{Binding ServerName}"
                             Grid.Column="1"
-                            Height="30"
-                            FontSize="14"
+                            Height="40"
+                            FontSize="20"
                             x:Name="ServerName"
                         />
                         <TextBlock 
                             VerticalAlignment="Center"
                             HorizontalAlignment="Left"
                             Text="My Awesome Server"
-                            FontSize="14"
+                            FontSize="20"
                             Visibility="{Binding ElementName=ServerName, Path=Text.IsEmpty, Converter={StaticResource UserNameVisibillity}}"
                             Grid.Column="1"
                             IsHitTestVisible="False"

Server Dashboard/Controls/DoubleRoundProgressBar/DoubleRoundProgressBar.xaml

@@ -0,0 +1,93 @@
+<UserControl x:Class="Server_Dashboard.Controls.DoubleRoundProgressBar.DoubleRoundProgressBar"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:local="clr-namespace:Server_Dashboard.Controls.DoubleRoundProgressBar"
+             xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
+             xmlns:root="clr-namespace:Server_Dashboard"
+             mc:Ignorable="d" 
+             x:Name="_this"
+             d:DesignHeight="50" d:DesignWidth="50">
+    <UserControl.Resources>
+        <root:ValueToAngleConverter x:Key="valueToAngle"/>
+    </UserControl.Resources>
+    <Grid>
+        <Ellipse
+            x:Name="Background"
+            Fill="{Binding 
+                        ElementName=_this, 
+                        Path=BackgroundBrush
+            }"
+            Margin="0"
+            Stroke="{Binding 
+                        ElementName=_this, 
+                        Path=BackgroundBrush
+            }"
+        />
+        <ed:Arc
+            ArcThickness="8"
+            ArcThicknessUnit="Pixel" 
+            EndAngle="{Binding 
+                            Converter={StaticResource valueToAngle},
+                            ElementName=_this,
+                            Path=ValueRead
+            }" 
+            Fill="{Binding 
+                        ElementName=_this, 
+                        Path=ReadIndicatorBrush
+            }"
+            Stretch="None" 
+            StartAngle="0"
+        />
+        <Ellipse
+            x:Name="Seperator"
+            Fill="Transparent"
+            Margin="7"
+            Stroke="{Binding 
+                        ElementName=_this, 
+                        Path=ProgressBorderBrush
+            }"
+            Panel.ZIndex="1"
+        />
+        <Ellipse
+            x:Name="Seperator2"
+            Fill="Transparent"
+            Margin="8"
+            Stroke="{Binding 
+                        ElementName=_this, 
+                        Path=ProgressBorderBrush
+            }"
+            Panel.ZIndex="1"
+        />
+        <ed:Arc
+            Margin="8"
+            ArcThickness="8"
+            ArcThicknessUnit="Pixel" 
+            EndAngle="{Binding 
+                            Converter={StaticResource valueToAngle},
+                            ElementName=_this,
+                            Path=ValueWrite
+            }" 
+            Fill="{Binding 
+                        ElementName=_this, 
+                        Path=WriteIndicatorBrush
+            }"
+            Stretch="None" 
+            StartAngle="0"
+        />
+        <Ellipse
+            x:Name="Border"
+            Fill="{Binding 
+                        ElementName=_this, 
+                        Path=ProgressBorderBrush
+            }"
+            Margin="16"
+            Stroke="{Binding 
+                        ElementName=_this, 
+                        Path=ProgressBorderBrush
+            }"
+            
+        />
+    </Grid>
+</UserControl>

Server Dashboard/Controls/DoubleRoundProgressBar/DoubleRoundProgressBar.xaml.cs

@@ -0,0 +1,60 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Server_Dashboard.Controls.DoubleRoundProgressBar {
+    /// <summary>
+    /// Interaktionslogik für HalfRoundProgressBar.xaml
+    /// </summary>
+    public partial class DoubleRoundProgressBar : UserControl {
+
+        public static DependencyProperty ReadIndicatorBrushProperty = DependencyProperty.Register("ReadIndicatorBrush", typeof(Brush), typeof(DoubleRoundProgressBar));
+        public Brush ReadIndicatorBrush {
+            get { return (Brush)GetValue(ReadIndicatorBrushProperty); }
+            set { SetValue(ReadIndicatorBrushProperty, value); }
+        }
+
+        public static DependencyProperty WriteIndicatorBrushProperty = DependencyProperty.Register("WriteIndicatorBrush", typeof(Brush), typeof(DoubleRoundProgressBar));
+        public Brush WriteIndicatorBrush {
+            get { return (Brush)GetValue(WriteIndicatorBrushProperty); }
+            set { SetValue(WriteIndicatorBrushProperty, value); }
+        }
+
+        public static DependencyProperty BackgroundBrushProperty = DependencyProperty.Register("BackgroundBrush", typeof(Brush), typeof(DoubleRoundProgressBar));
+        public Brush BackgroundBrush {
+            get { return (Brush)GetValue(BackgroundBrushProperty); }
+            set { SetValue(BackgroundBrushProperty, value); }
+        }
+
+        public static DependencyProperty ProgressBorderBrushProperty = DependencyProperty.Register("ProgressBorderBrush", typeof(Brush), typeof(DoubleRoundProgressBar));
+        public Brush ProgressBorderBrush {
+            get { return (Brush)GetValue(ProgressBorderBrushProperty); }
+            set { SetValue(ProgressBorderBrushProperty, value); }
+        }
+
+        public static DependencyProperty ValueWriteProperty = DependencyProperty.Register("ValueWrite", typeof(int), typeof(DoubleRoundProgressBar));
+        public int ValueWrite {
+            get { return (int)GetValue(ValueWriteProperty); }
+            set { SetValue(ValueWriteProperty, value); }
+        }
+        public static DependencyProperty ValueReadProperty = DependencyProperty.Register("ValueRead", typeof(int), typeof(DoubleRoundProgressBar));
+        public int ValueRead {
+            get { return (int)GetValue(ValueReadProperty); }
+            set { SetValue(ValueReadProperty, value); }
+        }
+
+        public DoubleRoundProgressBar() {
+            InitializeComponent();
+        }
+    }
+}

Server Dashboard/Controls/HalfRoundProgressBar/HalfRoundProgressBar.xaml

@@ -0,0 +1,57 @@
+<UserControl x:Class="Server_Dashboard.Controls.HalfRoundProgressBar.HalfRoundProgressBar"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:local="clr-namespace:Server_Dashboard.Controls.HalfRoundProgressBar"
+             xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
+             xmlns:root="clr-namespace:Server_Dashboard"
+             mc:Ignorable="d" 
+             x:Name="_this"
+             d:DesignHeight="50" d:DesignWidth="50">
+    <UserControl.Resources>
+        <root:ValueToAngleConverter x:Key="valueToAngle"/>
+    </UserControl.Resources>
+    <Grid>
+        <Ellipse
+            x:Name="Background"
+            Fill="{Binding 
+                        ElementName=_this, 
+                        Path=BackgroundBrush
+            }"
+            Margin="0"
+            Stroke="{Binding 
+                        ElementName=_this, 
+                        Path=BackgroundBrush
+            }"
+        />
+        <ed:Arc
+            ArcThickness="8"
+            ArcThicknessUnit="Pixel" 
+            EndAngle="{Binding 
+                            Converter={StaticResource valueToAngle},
+                            ElementName=_this,
+                            Path=Value
+            }" 
+            Fill="{Binding 
+                        ElementName=_this, 
+                        Path=IndicatorBrush
+            }"
+            Stretch="None" 
+            StartAngle="0"
+        />
+        <Ellipse
+            x:Name="Border"
+            Fill="{Binding 
+                        ElementName=_this, 
+                        Path=ProgressBorderBrush
+            }"
+            Margin="8"
+            Stroke="{Binding 
+                        ElementName=_this, 
+                        Path=ProgressBorderBrush
+            }"
+            
+        />
+    </Grid>
+</UserControl>

Server Dashboard/Controls/HalfRoundProgressBar/HalfRoundProgressBar.xaml.cs

@@ -0,0 +1,49 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Text;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Server_Dashboard.Controls.HalfRoundProgressBar {
+    /// <summary>
+    /// Interaktionslogik für HalfRoundProgressBar.xaml
+    /// </summary>
+    public partial class HalfRoundProgressBar : UserControl {
+
+        public static DependencyProperty IndicatorBrushProperty = DependencyProperty.Register("IndicatorBrush", typeof(Brush), typeof(HalfRoundProgressBar));
+        public Brush IndicatorBrush {
+            get { return (Brush)GetValue(IndicatorBrushProperty); }
+            set { SetValue(IndicatorBrushProperty, value); }
+        }
+
+        public static DependencyProperty BackgroundBrushProperty = DependencyProperty.Register("BackgroundBrush", typeof(Brush), typeof(HalfRoundProgressBar));
+        public Brush BackgroundBrush {
+            get { return (Brush)GetValue(BackgroundBrushProperty); }
+            set { SetValue(BackgroundBrushProperty, value); }
+        }
+
+        public static DependencyProperty ProgressBorderBrushProperty = DependencyProperty.Register("ProgressBorderBrush", typeof(Brush), typeof(HalfRoundProgressBar));
+        public Brush ProgressBorderBrush {
+            get { return (Brush)GetValue(ProgressBorderBrushProperty); }
+            set { SetValue(ProgressBorderBrushProperty, value); }
+        }
+
+        public static DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(int), typeof(HalfRoundProgressBar));
+        public int Value {
+            get { return (int)GetValue(ValueProperty); }
+            set { SetValue(ValueProperty, value); }
+        }
+
+        public HalfRoundProgressBar() {
+            InitializeComponent();
+        }
+    }
+}

Server Dashboard/Controls/ProgressBar/HalfRoundProgressbar.xaml

@@ -1,19 +0,0 @@
-<UserControl x:Class="Server_Dashboard.Controls.ProgressBar.HalfRoundProgressbar"
-             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
-             xmlns:local="clr-namespace:Server_Dashboard.Controls.ProgressBar"
-             xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
-             xmlns:root="clr-namespace:Server_Dashboard"
-             mc:Ignorable="d" 
-             d:DesignHeight="200" d:DesignWidth="200">
-    <UserControl.Resources>
-        <local:ValueToAngle x:Key="valueToAngle"/>
-    </UserControl.Resources>
-    <Grid>
-        <Ellipse x:Name="Background" Fill="{Binding ElementName=_this, Path=BackgroundBrush}" Margin="0" Stroke="Blue"/>
-        <ed:Arc x:Name="Indicator" ArcThickness="8" ArcThicknessUnit="Pixel" EndAngle="{Binding Converter={StaticResource valueToAngle}, ElementName=_this, Path=Value}" Fill="{Binding ElementName=_this, Path=IndicatorBrush}" Stretch="None" StartAngle="0"/>
-        <Ellipse x:Name="Border" Fill="{Binding ElementName=_this, Path=ProgressBorderBrush}" Margin="8" Stroke="Blue"/>
-    </Grid>
-</UserControl>

Server Dashboard/Controls/ProgressBar/HalfRoundProgressbar.xaml.cs

@@ -1,75 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using System.Text;
-using System.Windows;
-using System.Windows.Controls;
-using System.Windows.Data;
-using System.Windows.Documents;
-using System.Windows.Input;
-using System.Windows.Media;
-using System.Windows.Media.Imaging;
-using System.Windows.Navigation;
-using System.Windows.Shapes;
-
-namespace Server_Dashboard.Controls.ProgressBar {
-    /// <summary>
-    /// Interaktionslogik für HalfRoundProgressbar.xaml
-    /// </summary>
-    public partial class HalfRoundProgressbar : UserControl {
-        public static readonly DependencyProperty IndicatorBrushProperty = DependencyProperty.Register("IndicatorBrush", typeof(Brush), typeof(HalfRoundProgressbar));
-        public Brush IndicatorBrush {
-            get{
-                return (Brush)this.GetValue(IndicatorBrushProperty);
-            }
-            set{
-                this.SetValue(IndicatorBrushProperty, value);
-            }
-        }
-
-        public static readonly DependencyProperty BackgroundBrushProperty = DependencyProperty.Register("BackgroundBrush", typeof(Brush), typeof(HalfRoundProgressbar));
-        public Brush BackgroundBrush {
-            get {
-                return (Brush)this.GetValue(BackgroundBrushProperty);
-            }
-            set {
-                this.SetValue(BackgroundBrushProperty, value);
-            }
-        }
-
-        public static readonly DependencyProperty ProgressBorderBrushProperty = DependencyProperty.Register("ProgressBorderBrush", typeof(Brush), typeof(HalfRoundProgressbar));
-        public Brush ProgressBorderBrush {
-            get {
-                return (Brush)this.GetValue(ProgressBorderBrushProperty);
-            }
-            set {
-                this.SetValue(ProgressBorderBrushProperty, value);
-            }
-        }
-
-        public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(int), typeof(HalfRoundProgressbar));
-        public int Value {
-            get {
-                return (int)this.GetValue(ValueProperty);
-            }
-            set {
-                this.SetValue(ValueProperty, value);
-            }
-        }
-
-        public HalfRoundProgressbar() {
-            InitializeComponent();
-        }
-    }
-
-    [ValueConversion(typeof(int), typeof(double))]
-    public class ValueToAngle : IValueConverter {
-        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
-            return (double)(((int)value * 0.01) * 360);
-        }
-
-        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
-            return (int)((double)value / 360) * 100;
-        }
-    }
-}

Server Dashboard/Controls/ServerModules/ServerModule.xaml

@@ -3,8 +3,9 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
-             xmlns:local="clr-namespace:Server_Dashboard.Controls.ServerModules"
-             xmlns:progressbar="clr-namespace:Server_Dashboard.Controls.ProgressBar"
+             xmlns:local="clr-namespace:Server_Dashboard.Controls.ServerModules" 
+             xmlns:halfroundprogressbar="clr-namespace:Server_Dashboard.Controls.HalfRoundProgressBar" 
+             xmlns:doubleroundprogressbar="clr-namespace:Server_Dashboard.Controls.DoubleRoundProgressBar"
              mc:Ignorable="d">
     <Border Background="{StaticResource BackgroundSurface_02dp}" MinHeight="100" MinWidth="300" Width="Auto" Height="Auto" Margin="10">
         <Border.Effect>
@@ -27,14 +28,18 @@
                         <ColumnDefinition Width="Auto"/>
                     </Grid.ColumnDefinitions>
                     <Image Grid.Column="0" Margin="7.5 0 7.5 0" Height="25" Width="25" Source="{Binding ModuleIcon}"/>
-                    <TextBlock Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding ModulName}"/>
+                    <TextBlock Foreground="{StaticResource DeepPurple_A100}" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{Binding ModulName}"/>
                     <Border Background="{Binding StatusIndicator}" Grid.Column="3">
                         <Grid>
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition/>
                                 <ColumnDefinition/>
                             </Grid.ColumnDefinitions>
-                            <TextBlock Margin="7 0 30 0" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="0" Foreground="{StaticResource White}" FontSize="20" Text="Status"/>
+                            <TextBlock Margin="7 0 30 0" VerticalAlignment="Center" HorizontalAlignment="Left" Grid.Column="0" FontSize="24" Text="Status">
+                                <TextBlock.Foreground>
+                                    <SolidColorBrush Color="White" Opacity="0.87"/>
+                                </TextBlock.Foreground>
+                            </TextBlock>
                             <Border Grid.Column="1" HorizontalAlignment="Right" Background="{Binding StatusIndicatorBG}" Padding="6">
                                 <Ellipse Fill="{Binding StatusIndicator}" StrokeThickness="0" Width="25" Height="25"/>
                             </Border>
@@ -42,39 +47,214 @@
                     </Border>
                 </Grid>
             </Border>
-            <Grid Grid.Row="2" Margin="10" Width="Auto">
+            <Grid Grid.Row="2" Margin="20" Width="Auto">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="1.5*"/>
                     <ColumnDefinition/>
                 </Grid.ColumnDefinitions>
-                <Grid>
+                <Grid Grid.Row="1" Margin="0 0 25 0">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="Auto"/>
                         <ColumnDefinition Width="Auto"/>
                     </Grid.ColumnDefinitions>
-                    <Grid.RowDefinitions>
-                        <RowDefinition/>
-                        <RowDefinition/>
-                        <RowDefinition/>
-                        <RowDefinition/>
-                        <RowDefinition/>
-                    </Grid.RowDefinitions>
-                    <TextBlock Grid.Row="1" Text="Hostname" FontSize="14" Margin="2 2 5 2"/>
-                    <TextBlock Grid.Row="2" Text="User" FontSize="14" Margin="2 2 5 2"/>
-                    <TextBlock Grid.Row="3" Text="Public IP" FontSize="14" Margin="2 2 5 2"/>
-                    <TextBlock Grid.Row="4" Text="Private IP" FontSize="14" Margin="2 2 5 2"/>
-
-                    <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding ServerInfo.HostName}" FontSize="14" Margin="5 2 2 2"/>
-                    <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ServerInfo.OSHostName}" FontSize="14" Margin="5 2 2 2"/>
-                    <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding ServerInfo.PublicIpAdress}" FontSize="14" Margin="5 2 2 2"/>
-                    <TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding ServerInfo.PrivateIpAdress}" FontSize="14" Margin="5 2 2 2"/>
+                    <StackPanel Grid.Column="0">
+                        <TextBlock Text="Servername" FontSize="16" Margin="2 2 5 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                        <TextBlock Text="User" FontSize="16" Margin="2 2 5 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                        <TextBlock Text="Public IP" FontSize="16" Margin="2 2 5 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                        <TextBlock Text="Private IP" FontSize="16" Margin="2 2 5 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                        <TextBlock Text="Uptime" FontSize="16" Margin="2 2 5 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                        <TextBlock Text="Creation Date" FontSize="16" Margin="2 2 5 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                        <TextBlock Text="Creator" FontSize="16" Margin="2 2 5 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                    </StackPanel>
+                    <StackPanel Grid.Column="1">
+                        <TextBlock Text="{Binding ServerInfo.ServerName}" FontSize="16" Margin="5 2 2 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                        <TextBlock Text="{Binding ServerInfo.OSUserName}" FontSize="16" Margin="5 2 2 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                        <TextBlock Text="{Binding ServerInfo.PublicIpAdress}" FontSize="16" Margin="5 2 2 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                        <TextBlock Text="{Binding ServerInfo.PrivateIpAdress}" FontSize="16" Margin="5 2 2 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                        <TextBlock Text="{Binding ServerInfo.Uptime}" FontSize="16" Margin="5 2 2 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                        <TextBlock Text="{Binding CreationDate}" FontSize="16" Margin="5 2 2 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                        <TextBlock Text="{Binding Creator}" FontSize="16" Margin="5 2 2 10">
+                            <TextBlock.Foreground>
+                                <SolidColorBrush Color="White" Opacity="0.60"/>
+                            </TextBlock.Foreground>
+                        </TextBlock>
+                    </StackPanel>
                 </Grid>
-                <Grid Grid.Column="1">
-                    <Grid.RowDefinitions>
-                        <RowDefinition/>
-                        <RowDefinition/>
-                    </Grid.RowDefinitions>
-                    <progressbar:HalfRoundProgressbar Height="50" Width="50" x:Name="prgess" Value="180" IndicatorBrush="Blue" Foreground="Black"/>
+                <Grid Grid.Row="1" Grid.Column="1">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition/>
+                        <ColumnDefinition/>
+                    </Grid.ColumnDefinitions>
+                    <Grid Grid.Column="0">
+                        <Grid.RowDefinitions>
+                            <RowDefinition/>
+                            <RowDefinition/>
+                        </Grid.RowDefinitions>
+                        <halfroundprogressbar:HalfRoundProgressBar 
+                            Margin="5"
+                            Grid.Row="0"
+                            ProgressBorderBrush="{StaticResource BackgroundSurface_02dp}"
+                            BackgroundBrush="{StaticResource BackgroundSurface_08dp}" 
+                            Height="100"
+                            Width="100"
+                            Value="60" 
+                            IndicatorBrush="{StaticResource Teal_A100}"
+                        />
+                        <TextBlock
+                            Foreground="{StaticResource Teal_A100}"
+                            Grid.Row="0" 
+                            Text="CPU"
+                            VerticalAlignment="Center" 
+                            HorizontalAlignment="Center"
+                            FontSize="18"
+                        />
+                        <halfroundprogressbar:HalfRoundProgressBar 
+                            Margin="5"
+                            Grid.Row="1"
+                            ProgressBorderBrush="{StaticResource BackgroundSurface_02dp}"
+                            BackgroundBrush="{StaticResource BackgroundSurface_08dp}"
+                            Height="100"
+                            Width="100" 
+                            Value="60"
+                            IndicatorBrush="{StaticResource Teal_A100}"
+                        />
+                        <TextBlock 
+                            Foreground="{StaticResource Teal_A100}"
+                            Grid.Row="1"
+                            Text="GPU"
+                            VerticalAlignment="Center" 
+                            HorizontalAlignment="Center" 
+                            FontSize="18"
+                        />
+                    </Grid>
+                    <Grid Grid.Column="1">
+                        <Grid.RowDefinitions>
+                            <RowDefinition/>
+                            <RowDefinition/>
+                        </Grid.RowDefinitions>
+                        <doubleroundprogressbar:DoubleRoundProgressBar
+                            ValueRead="70"
+                            ValueWrite="60"
+                            ReadIndicatorBrush="{StaticResource DeepPurple_A100}"
+                            WriteIndicatorBrush="{StaticResource Teal_A100}"
+                            Margin="5"
+                            Grid.Row="0"
+                            ProgressBorderBrush="{StaticResource BackgroundSurface_02dp}"
+                            BackgroundBrush="{StaticResource BackgroundSurface_08dp}" 
+                            Height="100"
+                            Width="100"
+                        />
+                        <StackPanel 
+                            Grid.Row="0" 
+                            VerticalAlignment="Center"
+                            HorizontalAlignment="Center">
+                            <TextBlock 
+                                Grid.Row="0" 
+                                VerticalAlignment="Center"
+                                HorizontalAlignment="Center"
+                                FontSize="18"
+                                TextAlignment="Center"
+                                Text="Read"
+                                Foreground="{StaticResource DeepPurple_A100}"
+                            />
+                            <TextBlock 
+                                Grid.Row="0" 
+                                VerticalAlignment="Center"
+                                HorizontalAlignment="Center"
+                                FontSize="18"
+                                TextAlignment="Center"
+                                Text="Write"
+                                Foreground="{StaticResource Teal_A100}"
+                            />
+                        </StackPanel>
+                        <doubleroundprogressbar:DoubleRoundProgressBar
+                            ValueRead="70"
+                            ValueWrite="60"
+                            ReadIndicatorBrush="{StaticResource DeepPurple_A100}"
+                            WriteIndicatorBrush="{StaticResource Teal_A100}"
+                            Margin="5"
+                            Grid.Row="1"
+                            ProgressBorderBrush="{StaticResource BackgroundSurface_02dp}"
+                            BackgroundBrush="{StaticResource BackgroundSurface_08dp}"
+                            Height="100"
+                            Width="100"
+                        />
+                        <StackPanel 
+                            Grid.Row="1" 
+                            VerticalAlignment="Center"
+                            HorizontalAlignment="Center">
+                            <TextBlock 
+                                Grid.Row="0" 
+                                VerticalAlignment="Center"
+                                HorizontalAlignment="Center"
+                                FontSize="18"
+                                TextAlignment="Center"
+                                Text="UP"
+                                Foreground="{StaticResource DeepPurple_A100}"
+                            />
+                            <TextBlock 
+                                Grid.Row="0" 
+                                VerticalAlignment="Center"
+                                HorizontalAlignment="Center"
+                                FontSize="18"
+                                TextAlignment="Center"
+                                Text="DOWN"
+                                Foreground="{StaticResource Teal_A100}"
+                            />
+                        </StackPanel>
+                    </Grid>
                 </Grid>
             </Grid>
         </Grid>