diff --git a/Flow.Launcher/SettingPages/Views/SettingsPaneAbout.xaml b/Flow.Launcher/SettingPages/Views/SettingsPaneAbout.xaml
index 9386c9625..f76dc1740 100644
--- a/Flow.Launcher/SettingPages/Views/SettingsPaneAbout.xaml
+++ b/Flow.Launcher/SettingPages/Views/SettingsPaneAbout.xaml
@@ -3,9 +3,9 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:local="clr-namespace:Flow.Launcher.SettingPages.Views"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:ui="http://schemas.modernwpf.com/2019"
+    xmlns:cc="clr-namespace:Flow.Launcher.Resources.Controls"
     Title="About"
     d:DesignHeight="450"
     d:DesignWidth="800"
@@ -22,12 +22,11 @@
         Margin="0,0,0,0"
         Background="{DynamicResource Color01B}"
         FontSize="14"
-        ScrollViewer.CanContentScroll="True"
+        CanContentScroll="True"
         VirtualizingStackPanel.IsVirtualizing="True"
         VirtualizingStackPanel.ScrollUnit="Pixel">
         <StackPanel Margin="5,14,25,30" Orientation="Vertical">
             <TextBlock
-                Grid.Row="2"
                 Margin="0,5,0,5"
                 FontSize="30"
                 Style="{DynamicResource PageTitle}"
@@ -35,189 +34,96 @@
                 TextAlignment="left" />
 
 
-            <Border Margin="0,9,0,0" Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock
-                            Grid.Column="1"
-                            VerticalAlignment="Center"
-                            FontWeight="Bold"
-                            Style="{DynamicResource SettingTitleLabel}"
-                            Text="{Binding Version}" />
-                        <TextBlock Style="{DynamicResource SettingSubTitleLabel}" Text="{DynamicResource version}" />
-                    </StackPanel>
-                    <StackPanel Grid.Column="2" Orientation="Horizontal">
-                        <Button
-                            Margin="0,0,10,0"
-                            HorizontalAlignment="Right"
-                            Content="{DynamicResource checkUpdates}" />
-                        <Button
-                            Margin="0,0,14,0"
-                            Padding="0"
-                            HorizontalAlignment="Right"
-                            Style="{StaticResource AccentButtonStyle}">
-                            <Hyperlink
-                                NavigateUri="{Binding SponsorPage, Mode=OneWay}"
-                                RequestNavigate="OnRequestNavigate"
-                                TextDecorations="None">
-                                <TextBlock
-                                    Padding="10,5,10,5"
-                                    Foreground="White"
-                                    Text="{DynamicResource BecomeASponsor}" />
-                            </Hyperlink>
-                        </Button>
+            <cc:Card Title="{Binding Version}" Sub="{DynamicResource version}" Icon="&#xe946;">
+                <StackPanel Orientation="Horizontal">
+                    <Button Margin="0,0,10,0" Content="{DynamicResource checkUpdates}" />
+                    <Button Padding="0" Style="{StaticResource AccentButtonStyle}">
+                        <Hyperlink
+                            NavigateUri="{Binding SponsorPage, Mode=OneWay}"
+                            RequestNavigate="OnRequestNavigate"
+                            TextDecorations="None">
+                            <TextBlock
+                                Padding="10,5,10,5"
+                                Foreground="White"
+                                Text="{DynamicResource BecomeASponsor}" />
+                        </Hyperlink>
+                    </Button>
+                </StackPanel>
+            </cc:Card>
 
-                    </StackPanel>
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xe946;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
+            <cc:Card Title="{DynamicResource releaseNotes}" Icon="&#xe8fd;">
+                <TextBlock>
+                    <Hyperlink NavigateUri="{Binding ReleaseNotes, Mode=OneWay}" RequestNavigate="OnRequestNavigate">
+                        <Run Text="{DynamicResource releaseNotes}" />
+                    </Hyperlink>
+                </TextBlock>
+            </cc:Card>
 
-            <Border Height="62" Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource releaseNotes}" />
-                    </StackPanel>
-                    <TextBlock
-                        Margin="0,0,-12,0"
-                        VerticalAlignment="Center"
-                        Style="{StaticResource SideTextAbout}">
-                        <Hyperlink NavigateUri="{Binding ReleaseNotes, Mode=OneWay}" RequestNavigate="OnRequestNavigate">
-                            <Run Text="{DynamicResource releaseNotes}" />
+            <cc:Card Margin="0,14,0,0" Title="{DynamicResource website}" Icon="&#xeb41;">
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock Margin="0,0,12,0">
+                        <Hyperlink NavigateUri="{Binding Website, Mode=OneWay}" RequestNavigate="OnRequestNavigate">
+                            <Run Text="{DynamicResource website}" />
                         </Hyperlink>
                     </TextBlock>
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xe8fd;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
 
-            <Border
-                Height="62"
-                Margin="0,14,0,0"
-                Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource website}" />
-                    </StackPanel>
-                    <StackPanel
-                        Grid.Column="2"
-                        Margin="0,0,18,0"
-                        VerticalAlignment="Center"
-                        Orientation="Horizontal">
-                        <TextBlock Margin="0,0,12,0">
-                            <Hyperlink NavigateUri="{Binding Website, Mode=OneWay}" RequestNavigate="OnRequestNavigate">
-                                <Run Text="{DynamicResource website}" />
-                            </Hyperlink>
-                        </TextBlock>
-                        <TextBlock>
-                            <Hyperlink NavigateUri="{Binding Github, Mode=OneWay}" RequestNavigate="OnRequestNavigate">
-                                <Run Text="{DynamicResource github}" />
-                            </Hyperlink>
-                        </TextBlock>
-                    </StackPanel>
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xeb41;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
-
-            <Border Height="62" Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource documentation}" />
-                    </StackPanel>
-                    <StackPanel
-                        Grid.Column="2"
-                        Margin="0,0,18,0"
-                        VerticalAlignment="Center"
-                        Orientation="Horizontal">
-                        <TextBlock Margin="0,0,12,0">
-                            <Hyperlink NavigateUri="{Binding Documentation, Mode=OneWay}" RequestNavigate="OnRequestNavigate">
-                                <Run Text="{DynamicResource documentation}" />
-                            </Hyperlink>
-                        </TextBlock>
-                        <TextBlock>
-                            <Hyperlink NavigateUri="{Binding Docs, Mode=OneWay}" RequestNavigate="OnRequestNavigate">
-                                <Run Text="{DynamicResource docs}" />
-                            </Hyperlink>
-                        </TextBlock>
-                    </StackPanel>
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xe82f;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
-
-            <Border
-                Height="62"
-                Margin="0,14,0,0"
-                Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource icons}" />
-                    </StackPanel>
-                    <TextBlock
-                        Margin="0,0,-12,0"
-                        VerticalAlignment="Center"
-                        Style="{StaticResource SideTextAbout}">
-                        <Hyperlink NavigateUri="https://icons8.com" RequestNavigate="OnRequestNavigate">
-                            <Run Text="icons8.com" />
+                    <TextBlock>
+                        <Hyperlink NavigateUri="{Binding Github, Mode=OneWay}" RequestNavigate="OnRequestNavigate">
+                            <Run Text="{DynamicResource github}" />
                         </Hyperlink>
+                    </TextBlock>
+                </StackPanel>
+            </cc:Card>
 
+            <cc:Card Title="{DynamicResource documentation}" Icon="&#xe82f;">
+                <StackPanel Orientation="Horizontal">
+                    <TextBlock Margin="0,0,12,0">
+                        <Hyperlink NavigateUri="{Binding Documentation, Mode=OneWay}" RequestNavigate="OnRequestNavigate">
+                            <Run Text="{DynamicResource documentation}" />
+                        </Hyperlink>
                     </TextBlock>
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xE8FE;
+                    <TextBlock>
+                        <Hyperlink NavigateUri="{Binding Docs}" RequestNavigate="OnRequestNavigate">
+                            <Run Text="{DynamicResource docs}" />
+                        </Hyperlink>
                     </TextBlock>
-                </ItemsControl>
-            </Border>
+                </StackPanel>
+            </cc:Card>
 
-            <Border Style="{DynamicResource SettingGroupBox}">
-                <ItemsControl Style="{StaticResource SettingGrid}">
-                    <StackPanel Style="{StaticResource TextPanel}">
-                        <TextBlock Style="{DynamicResource SettingTitleLabel}" Text="{DynamicResource devtool}" />
-                    </StackPanel>
-                    <StackPanel
-                        Grid.Column="1"
-                        Margin="0,0,-20,0"
-                        HorizontalAlignment="Right"
-                        Orientation="Horizontal">
-                        <Button
-                            Name="ClearLogFolderBtn"
-                            Margin="0,0,12,0"
-                            Content="{Binding CheckLogFolder, Mode=OneWay}" />
-                        <Button
-                            Margin="0,0,8,0"
-                            Content="&#xec7a;"
-                            FontFamily="/Resources/#Segoe Fluent Icons"
-                            FontSize="20">
-                            <ui:FlyoutService.Flyout>
-                                <ui:MenuFlyout>
-                                    <MenuItem Header="{DynamicResource welcomewindow}">
-                                        <MenuItem.Icon>
-                                            <ui:FontIcon Glyph="&#xe939;" />
-                                        </MenuItem.Icon>
-                                    </MenuItem>
-                                    <MenuItem Header="{DynamicResource settingfolder}">
-                                        <MenuItem.Icon>
-                                            <ui:FontIcon Glyph="&#xe8b7;" />
-                                        </MenuItem.Icon>
-                                    </MenuItem>
-                                    <MenuItem Header="{DynamicResource logfolder}">
-                                        <MenuItem.Icon>
-                                            <ui:FontIcon Glyph="&#xe8b7;" />
-                                        </MenuItem.Icon>
-                                    </MenuItem>
-                                </ui:MenuFlyout>
-                            </ui:FlyoutService.Flyout>
-                        </Button>
-                    </StackPanel>
-                    <TextBlock Style="{StaticResource Glyph}">
-                        &#xf12b;
-                    </TextBlock>
-                </ItemsControl>
-            </Border>
+            <cc:Card Margin="0,14,0,0" Title="{DynamicResource icons}" Icon="&#xE8FE;">
+                <TextBlock>
+                    <Hyperlink NavigateUri="https://icons8.com/" RequestNavigate="OnRequestNavigate">
+                        <Run Text="icons8.com" />
+                    </Hyperlink>
+                </TextBlock>
+            </cc:Card>
+
+            <cc:Card Title="{DynamicResource devtool}" Icon="&#xf12b;">
+                <StackPanel Orientation="Horizontal">
+                    <Button Margin="0,0,12,0" Content="{Binding CheckLogFolder, Mode=OneWay}" />
+                    <Button Content="&#xec7a;" FontFamily="/Resources/#Segoe Fluent Icons" FontSize="20">
+                        <ui:FlyoutService.Flyout>
+                            <ui:MenuFlyout>
+                                <MenuItem Header="{DynamicResource welcomewindow}">
+                                    <MenuItem.Icon>
+                                        <ui:FontIcon Glyph="&#xe939;" />
+                                    </MenuItem.Icon>
+                                </MenuItem>
+                                <MenuItem Header="{DynamicResource settingfolder}">
+                                    <MenuItem.Icon>
+                                        <ui:FontIcon Glyph="&#xe8b7;" />
+                                    </MenuItem.Icon>
+                                </MenuItem>
+                                <MenuItem Header="{DynamicResource logfolder}">
+                                    <MenuItem.Icon>
+                                        <ui:FontIcon Glyph="&#xe8b7;" />
+                                    </MenuItem.Icon>
+                                </MenuItem>
+                            </ui:MenuFlyout>
+                        </ui:FlyoutService.Flyout>
+                    </Button>
+                </StackPanel>
+            </cc:Card>
 
             <TextBlock
                 Margin="14,20,0,0"
diff --git a/Flow.Launcher/SettingPages/Views/SettingsPaneAbout.xaml.cs b/Flow.Launcher/SettingPages/Views/SettingsPaneAbout.xaml.cs
index e079cc18c..9e4022ec7 100644
--- a/Flow.Launcher/SettingPages/Views/SettingsPaneAbout.xaml.cs
+++ b/Flow.Launcher/SettingPages/Views/SettingsPaneAbout.xaml.cs
@@ -1,23 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
-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;
-using System.Windows;
-using System.Windows.Navigation;
-using Flow.Launcher.Core.Plugin;
-using Flow.Launcher.Infrastructure;
-using Flow.Launcher.Infrastructure.UserSettings;
-using Path = System.IO.Path;
+using System.Windows.Navigation;
 
 namespace Flow.Launcher.SettingPages.Views
 {
@@ -30,7 +11,7 @@ namespace Flow.Launcher.SettingPages.Views
         }
         private void OnRequestNavigate(object sender, RequestNavigateEventArgs e)
         {
-            //API.OpenUrl(e.Uri.AbsoluteUri);
+            App.API.OpenUrl(e.Uri.AbsoluteUri);
             e.Handled = true;
         }
     }