diff --git a/.github/workflows/browserslist-update-db.yml b/.github/workflows/browserslist-update-db.yml
new file mode 100644
index 00000000000..f8c4e0176d7
--- /dev/null
+++ b/.github/workflows/browserslist-update-db.yml
@@ -0,0 +1,30 @@
+name: Update Browserslist database
+
+on:
+  schedule:
+    - cron: '0 2 1,15 * *'
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  update-browserslist-database:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Configure git
+        run: |
+          # Setup for commiting using built-in token. See https://github.com/actions/checkout#push-a-commit-using-the-built-in-token
+          git config user.name "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+      - name: Update Browserslist database and create PR if applies
+        uses: c2corg/browserslist-update-action@v2
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          branch: browserslist-update
+          base_branch: develop
+          labels: 'javascript, Type: Maintenance'
diff --git a/DNN Platform/DotNetNuke.Abstractions/Application/IApplicationInfo.cs b/DNN Platform/DotNetNuke.Abstractions/Application/IApplicationInfo.cs
index e19d16344e8..0e7cf7b0186 100644
--- a/DNN Platform/DotNetNuke.Abstractions/Application/IApplicationInfo.cs	
+++ b/DNN Platform/DotNetNuke.Abstractions/Application/IApplicationInfo.cs	
@@ -24,7 +24,7 @@ public interface IApplicationInfo
         string Description { get; }
 
         /// <summary>Gets the help URL related to the DotNetNuke application.</summary>
-        /// <value>Fixed result: https://dnndocs.com/. </value>
+        /// <value>Fixed result: https://docs.dnncommunity.org/. </value>
         string HelpUrl { get; }
 
         /// <summary>Gets the legal copyright.</summary>
diff --git a/DNN Platform/DotNetNuke.Abstractions/Portals/IPortalStyles.cs b/DNN Platform/DotNetNuke.Abstractions/Portals/IPortalStyles.cs
index 2493dd87c65..003432f0f3a 100644
--- a/DNN Platform/DotNetNuke.Abstractions/Portals/IPortalStyles.cs	
+++ b/DNN Platform/DotNetNuke.Abstractions/Portals/IPortalStyles.cs	
@@ -9,205 +9,231 @@ namespace DotNetNuke.Abstractions.Portals
     /// </summary>
     public interface IPortalStyles
     {
+        /// <summary>
+        /// Gets or sets a value indicating whether the site admins can edit the styles.
+        /// </summary>
+        bool AllowAdminEdits { get; set; }
+
         /// <summary>
         /// Gets or sets the main shade of the primary color.
         /// </summary>
-        StyleColor ColorPrimary { get; set; }
+        string ColorPrimary { get; set; }
 
         /// <summary>
         /// Gets or sets the light shade of the primary color.
         /// </summary>
-        StyleColor ColorPrimaryLight { get; set; }
+        string ColorPrimaryLight { get; set; }
 
         /// <summary>
         /// Gets or sets the dark shade of the primary color.
         /// </summary>
-        StyleColor ColorPrimaryDark { get; set; }
+        string ColorPrimaryDark { get; set; }
 
         /// <summary>
         /// Gets or sets a color that contrasts well over the primary color shades.
         /// </summary>
-        StyleColor ColorPrimaryContrast { get; set; }
+        string ColorPrimaryContrast { get; set; }
 
         /// <summary>
         /// Gets or sets the main shade of the secondary color.
         /// </summary>
-        StyleColor ColorSecondary { get; set; }
+        string ColorSecondary { get; set; }
 
         /// <summary>
         /// Gets or sets the light shade of the secondary color.
         /// </summary>
-        StyleColor ColorSecondaryLight { get; set; }
+        string ColorSecondaryLight { get; set; }
 
         /// <summary>
         /// Gets or sets the dark shade of the secondary color.
         /// </summary>
-        StyleColor ColorSecondaryDark { get; set; }
+        string ColorSecondaryDark { get; set; }
 
         /// <summary>
         /// Gets or sets a color that contrasts well over the secondary color shades.
         /// </summary>
-        StyleColor ColorSecondaryContrast { get; set; }
+        string ColorSecondaryContrast { get; set; }
 
         /// <summary>
         /// Gets or sets the main shade of the Tertiary color.
         /// </summary>
-        StyleColor ColorTertiary { get; set; }
+        string ColorTertiary { get; set; }
 
         /// <summary>
         /// Gets or sets the light shade of the Tertiary color.
         /// </summary>
-        StyleColor ColorTertiaryLight { get; set; }
+        string ColorTertiaryLight { get; set; }
 
         /// <summary>
         /// Gets or sets the dark shade of the Tertiary color.
         /// </summary>
-        StyleColor ColorTertiaryDark { get; set; }
+        string ColorTertiaryDark { get; set; }
 
         /// <summary>
         /// Gets or sets a color that contrasts well over the Tertiary color shades.
         /// </summary>
-        StyleColor ColorTertiaryContrast { get; set; }
+        string ColorTertiaryContrast { get; set; }
 
         /// <summary>
         /// Gets or sets the main shade of the Neutral color.
         /// </summary>
-        StyleColor ColorNeutral { get; set; }
+        string ColorNeutral { get; set; }
 
         /// <summary>
         /// Gets or sets the light shade of the Neutral color.
         /// </summary>
-        StyleColor ColorNeutralLight { get; set; }
+        string ColorNeutralLight { get; set; }
 
         /// <summary>
         /// Gets or sets the dark shade of the Neutral color.
         /// </summary>
-        StyleColor ColorNeutralDark { get; set; }
+        string ColorNeutralDark { get; set; }
 
         /// <summary>
         /// Gets or sets a color that contrasts well over the Neutral color shades.
         /// </summary>
-        StyleColor ColorNeutralContrast { get; set; }
+        string ColorNeutralContrast { get; set; }
 
         /// <summary>
         /// Gets or sets the main shade of the Background color.
         /// </summary>
-        StyleColor ColorBackground { get; set; }
+        string ColorBackground { get; set; }
 
         /// <summary>
         /// Gets or sets the light shade of the Background color.
         /// </summary>
-        StyleColor ColorBackgroundLight { get; set; }
+        string ColorBackgroundLight { get; set; }
 
         /// <summary>
         /// Gets or sets the dark shade of the Background color.
         /// </summary>
-        StyleColor ColorBackgroundDark { get; set; }
+        string ColorBackgroundDark { get; set; }
 
         /// <summary>
         /// Gets or sets a color that contrasts well over the Background color shades.
         /// </summary>
-        StyleColor ColorBackgroundContrast { get; set; }
+        string ColorBackgroundContrast { get; set; }
 
         /// <summary>
         /// Gets or sets the main shade of the Foreground color.
         /// </summary>
-        StyleColor ColorForeground { get; set; }
+        string ColorForeground { get; set; }
 
         /// <summary>
         /// Gets or sets the light shade of the Foreground color.
         /// </summary>
-        StyleColor ColorForegroundLight { get; set; }
+        string ColorForegroundLight { get; set; }
 
         /// <summary>
         /// Gets or sets the dark shade of the Foreground color.
         /// </summary>
-        StyleColor ColorForegroundDark { get; set; }
+        string ColorForegroundDark { get; set; }
 
         /// <summary>
         /// Gets or sets a color that contrasts well over the Foreground color shades.
         /// </summary>
-        StyleColor ColorForegroundContrast { get; set; }
+        string ColorForegroundContrast { get; set; }
 
         /// <summary>
         /// Gets or sets the main shade of the Info color.
         /// </summary>
-        StyleColor ColorInfo { get; set; }
+        string ColorInfo { get; set; }
 
         /// <summary>
         /// Gets or sets the light shade of the Info color.
         /// </summary>
-        StyleColor ColorInfoLight { get; set; }
+        string ColorInfoLight { get; set; }
 
         /// <summary>
         /// Gets or sets the dark shade of the Info color.
         /// </summary>
-        StyleColor ColorInfoDark { get; set; }
+        string ColorInfoDark { get; set; }
 
         /// <summary>
         /// Gets or sets a color that contrasts well over the Info color shades.
         /// </summary>
-        StyleColor ColorInfoContrast { get; set; }
+        string ColorInfoContrast { get; set; }
 
         /// <summary>
         /// Gets or sets the main shade of the Success color.
         /// </summary>
-        StyleColor ColorSuccess { get; set; }
+        string ColorSuccess { get; set; }
 
         /// <summary>
         /// Gets or sets the light shade of the Success color.
         /// </summary>
-        StyleColor ColorSuccessLight { get; set; }
+        string ColorSuccessLight { get; set; }
 
         /// <summary>
         /// Gets or sets the dark shade of the Success color.
         /// </summary>
-        StyleColor ColorSuccessDark { get; set; }
+        string ColorSuccessDark { get; set; }
 
         /// <summary>
         /// Gets or sets a color that contrasts well over the Success color shades.
         /// </summary>
-        StyleColor ColorSuccessContrast { get; set; }
+        string ColorSuccessContrast { get; set; }
 
         /// <summary>
         /// Gets or sets the main shade of the Warning color.
         /// </summary>
-        StyleColor ColorWarning { get; set; }
+        string ColorWarning { get; set; }
 
         /// <summary>
         /// Gets or sets the light shade of the Warning color.
         /// </summary>
-        StyleColor ColorWarningLight { get; set; }
+        string ColorWarningLight { get; set; }
 
         /// <summary>
         /// Gets or sets the dark shade of the Warning color.
         /// </summary>
-        StyleColor ColorWarningDark { get; set; }
+        string ColorWarningDark { get; set; }
 
         /// <summary>
         /// Gets or sets a color that contrasts well over the Warning color shades.
         /// </summary>
-        StyleColor ColorWarningContrast { get; set; }
+        string ColorWarningContrast { get; set; }
 
         /// <summary>
         /// Gets or sets the main shade of the Danger color.
         /// </summary>
-        StyleColor ColorDanger { get; set; }
+        string ColorDanger { get; set; }
 
         /// <summary>
         /// Gets or sets the light shade of the Danger color.
         /// </summary>
-        StyleColor ColorDangerLight { get; set; }
+        string ColorDangerLight { get; set; }
 
         /// <summary>
         /// Gets or sets the dark shade of the Danger color.
         /// </summary>
-        StyleColor ColorDangerDark { get; set; }
+        string ColorDangerDark { get; set; }
 
         /// <summary>
         /// Gets or sets a color that contrasts well over the Danger color shades.
         /// </summary>
-        StyleColor ColorDangerContrast { get; set; }
+        string ColorDangerContrast { get; set; }
+
+        /// <summary>
+        /// Gets or sets the color of the surface.
+        /// A surface is an area that is overlaid over the main background (menus, popovers, etc).
+        /// </summary>
+        string ColorSurface { get; set; }
+
+        /// <summary>
+        /// Gets or sets the light variation of surface color.
+        /// </summary>
+        string ColorSurfaceLight { get; set; }
+
+        /// <summary>
+        /// Gets or sets the dark variation of surface color.
+        /// </summary>
+        string ColorSurfaceDark { get; set; }
+
+        /// <summary>
+        /// Gets or sets a color that contrasts well over the surface color.
+        /// </summary>
+        string ColorSurfaceContrast { get; set; }
 
         /// <summary>
         /// Gets or sets the controls border radius in pixels.
@@ -223,5 +249,16 @@ public interface IPortalStyles
         /// Gets or sets the base font size in pixels.
         /// </summary>
         double BaseFontSize { get; set; }
+
+        /// <summary>
+        /// Gets or sets the color variation opacity.
+        /// This can be used to define how opaque a contrasting color should look over another.
+        /// </summary>
+        double VariationOpacity { get; set; }
+
+        /// <summary>
+        /// Gets the name of the css file.
+        /// </summary>
+        string FileName { get; }
     }
 }
diff --git a/DNN Platform/DotNetNuke.Abstractions/Portals/StyleColor.cs b/DNN Platform/DotNetNuke.Abstractions/Portals/StyleColor.cs
index 81509a04bba..9943de90736 100644
--- a/DNN Platform/DotNetNuke.Abstractions/Portals/StyleColor.cs	
+++ b/DNN Platform/DotNetNuke.Abstractions/Portals/StyleColor.cs	
@@ -35,7 +35,7 @@ public StyleColor(string hexValue)
         {
             AssertIsValidCssColor(hexValue);
 
-            this.HexValue = ExpandColor(hexValue);
+            this.HexValue = hexValue;
             this.red = byte.Parse(this.HexValue.Substring(0, 2), System.Globalization.NumberStyles.HexNumber);
             this.green = byte.Parse(this.HexValue.Substring(2, 2), System.Globalization.NumberStyles.HexNumber);
             this.blue = byte.Parse(this.HexValue.Substring(4, 2), System.Globalization.NumberStyles.HexNumber);
@@ -88,45 +88,10 @@ public string HexValue
             set
             {
                 AssertIsValidCssColor(value);
-                this.hex = ExpandColor(value);
+                this.hex = value;
             }
         }
 
-        /// <summary>
-        /// Gets a minified hexadecimal value for the color.
-        /// </summary>
-        /// <example>If the color is 0088FF, it should return 08F.</example>
-        public string MinifiedHex
-        {
-            get
-            {
-                if (
-                    this.hex[0] == this.hex[1] &&
-                    this.hex[2] == this.hex[3] &&
-                    this.hex[4] == this.hex[5])
-                {
-                    return $"{this.hex[0]}{this.hex[2]}{this.hex[4]}";
-                }
-
-                return this.hex;
-            }
-        }
-
-        private static string ExpandColor(string hexValue)
-        {
-            if (hexValue.Length == 6)
-            {
-                return hexValue.ToUpperInvariant();
-            }
-
-            string value;
-            var r = hexValue[0];
-            var g = hexValue[1];
-            var b = hexValue[2];
-            value = string.Concat(r, r, g, g, b, b);
-            return value.ToUpperInvariant();
-        }
-
         private static void AssertIsValidCssColor(string hexValue)
         {
             if (string.IsNullOrWhiteSpace(hexValue))
diff --git a/DNN Platform/Library/Application/Application.cs b/DNN Platform/Library/Application/Application.cs
index 864296aa0e8..c198e5cdc18 100644
--- a/DNN Platform/Library/Application/Application.cs	
+++ b/DNN Platform/Library/Application/Application.cs	
@@ -55,7 +55,7 @@ public string HelpUrl
         {
             get
             {
-                return "https://dnndocs.com/";
+                return "https://docs.dnncommunity.org/";
             }
         }
 
diff --git a/DNN Platform/Library/Common/Utilities/DataCache.cs b/DNN Platform/Library/Common/Utilities/DataCache.cs
index 6f2fa36be87..845b1457b47 100644
--- a/DNN Platform/Library/Common/Utilities/DataCache.cs	
+++ b/DNN Platform/Library/Common/Utilities/DataCache.cs	
@@ -76,12 +76,6 @@ public class DataCache
         /// <summary> The portal styles cache key.</summary>
         public const string PortalStylesCacheKey = "Dnn_Css_Custom_Properties_{0}";
 
-        /// <summary> The portal styles cache priority.</summary>
-        public const CacheItemPriority PortalStylesCachePriority = CacheItemPriority.High;
-
-        /// <summary>The portal styles cache time out.</summary>
-        public const int PortalStylesCacheTimeOut = 20;
-
         // Tab cache keys
         public const string TabCacheKey = "Tab_Tabs{0}";
         public const string TabSettingsCacheKey = "TabSettings{0}";
diff --git a/DNN Platform/Library/Entities/Portals/PortalStyles.cs b/DNN Platform/Library/Entities/Portals/PortalStyles.cs
index d7c0bdd5938..9bf0a20d300 100644
--- a/DNN Platform/Library/Entities/Portals/PortalStyles.cs	
+++ b/DNN Platform/Library/Entities/Portals/PortalStyles.cs	
@@ -4,6 +4,8 @@
 
 namespace DotNetNuke.Entities.Portals
 {
+    using System.Globalization;
+
     using DotNetNuke.Abstractions.Portals;
     using DotNetNuke.Entities.Modules.Settings;
 
@@ -12,176 +14,326 @@ namespace DotNetNuke.Entities.Portals
     /// </summary>
     public class PortalStyles : IPortalStyles
     {
+        private const string Prefix = "DnnCssVars_";
+
+        /// <inheritdoc/>
+        [PortalSetting(Prefix = Prefix)]
+        public bool AllowAdminEdits { get; set; } = false;
+
+        /// <inheritdoc/>
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorPrimary { get; set; } = "00A5E0";
+
+        /// <inheritdoc/>
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorPrimaryLight { get; set; } = "1AAEE3";
+
+        /// <inheritdoc/>
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorPrimaryDark { get; set; } = "0091C5";
+
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorPrimary { get; set; } = new StyleColor("3792ED");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorPrimaryContrast { get; set; } = "FFFFFF";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorPrimaryLight { get; set; } = new StyleColor("6CB6F3");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorSecondary { get; set; } = "ED3D46";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorPrimaryDark { get; set; } = new StyleColor("0D569E");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorSecondaryLight { get; set; } = "EF5059";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorPrimaryContrast { get; set; } = new StyleColor("FFFFFF");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorSecondaryDark { get; set; } = "D1363E";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorSecondary { get; set; } = new StyleColor("CCCCCC");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorSecondaryContrast { get; set; } = "FFFFFF";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorSecondaryLight { get; set; } = new StyleColor("EEEEEE");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorTertiary { get; set; } = "0E2936";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorSecondaryDark { get; set; } = new StyleColor("AAAAAA");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorTertiaryLight { get; set; } = "3C7A9A";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorSecondaryContrast { get; set; } = new StyleColor("222222");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorTertiaryDark { get; set; } = "0B1C24";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorTertiary { get; set; } = new StyleColor("EAEAEA");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorTertiaryContrast { get; set; } = "FFFFFF";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorTertiaryLight { get; set; } = new StyleColor("F2F2F2");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorNeutral { get; set; } = "DCDCDC";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorTertiaryDark { get; set; } = new StyleColor("D8D8D8");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorNeutralLight { get; set; } = "F0F0F0";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorTertiaryContrast { get; set; } = new StyleColor("333333");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorNeutralDark { get; set; } = "999999";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorNeutral { get; set; } = new StyleColor("B2B2B2");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorNeutralContrast { get; set; } = "000000";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorNeutralLight { get; set; } = new StyleColor("E5E5E5");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorBackground { get; set; } = "FFFFFF";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorNeutralDark { get; set; } = new StyleColor("999999");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorBackgroundLight { get; set; } = "F5F5F5";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorNeutralContrast { get; set; } = new StyleColor("000000");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorBackgroundDark { get; set; } = "CCCCCC";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorBackground { get; set; } = new StyleColor("FFFFFF");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorBackgroundContrast { get; set; } = "000000";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorBackgroundLight { get; set; } = new StyleColor("FFFFFF");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorForeground { get; set; } = "323232";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorBackgroundDark { get; set; } = new StyleColor("999999");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorForegroundLight { get; set; } = "A2A2A2";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorBackgroundContrast { get; set; } = new StyleColor("000000");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorForegroundDark { get; set; } = "000000";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorForeground { get; set; } = new StyleColor("000000");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorForegroundContrast { get; set; } = "FFFFFF";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorForegroundLight { get; set; } = new StyleColor("333333");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorInfo { get; set; } = "17A2B8";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorForegroundDark { get; set; } = new StyleColor("000000");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorInfoLight { get; set; } = "23B8CF";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorForegroundContrast { get; set; } = new StyleColor("FFFFFF");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorInfoDark { get; set; } = "00889E";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorInfo { get; set; } = new StyleColor("17A2B8");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorInfoContrast { get; set; } = "FFFFFF";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorInfoLight { get; set; } = new StyleColor("23B8CF");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorSuccess { get; set; } = "28A745";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorInfoDark { get; set; } = new StyleColor("00889E");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorSuccessLight { get; set; } = "49C25D";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorInfoContrast { get; set; } = new StyleColor("FFFFFF");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorSuccessDark { get; set; } = "00902F";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorSuccess { get; set; } = new StyleColor("28A745");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorSuccessContrast { get; set; } = "FFFFFF";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorSuccessLight { get; set; } = new StyleColor("49C25D");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorWarning { get; set; } = "FFC107";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorSuccessDark { get; set; } = new StyleColor("00902F");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorWarningLight { get; set; } = "FFD42E";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorSuccessContrast { get; set; } = new StyleColor("FFFFFF");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorWarningDark { get; set; } = "E9AD00";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorWarning { get; set; } = new StyleColor("FFC107");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorWarningContrast { get; set; } = "FFFFFF";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorWarningLight { get; set; } = new StyleColor("FFD42E");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorDanger { get; set; } = "DC3545";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorWarningDark { get; set; } = new StyleColor("E9AD00");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorDangerLight { get; set; } = "F14954";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorWarningContrast { get; set; } = new StyleColor("FFFFFF");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorDangerDark { get; set; } = "C51535";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorDanger { get; set; } = new StyleColor("DC3545");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorDangerContrast { get; set; } = "FFFFFF";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorDangerLight { get; set; } = new StyleColor("F14954");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorSurface { get; set; } = "DDDDDD";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorDangerDark { get; set; } = new StyleColor("C51535");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorSurfaceLight { get; set; } = "EEEEEE";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public StyleColor ColorDangerContrast { get; set; } = new StyleColor("FFFFFF");
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorSurfaceDark { get; set; } = "CCCCCC";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public double ControlsRadius { get; set; } = 5;
+        [PortalSetting(Prefix = Prefix)]
+        public string ColorSurfaceContrast { get; set; } = "000000";
 
         /// <inheritdoc/>
-        [PortalSetting]
-        public double ControlsPadding { get; set; } = 5;
+        [PortalSetting(Prefix = Prefix)]
+        public double ControlsRadius { get; set; } = 0;
 
         /// <inheritdoc/>
-        [PortalSetting]
+        [PortalSetting(Prefix = Prefix)]
+        public double ControlsPadding { get; set; } = 9;
+
+        /// <inheritdoc/>
+        [PortalSetting(Prefix = Prefix)]
         public double BaseFontSize { get; set; } = 16;
+
+        /// <inheritdoc/>
+        [PortalSetting(Prefix = Prefix)]
+        public double VariationOpacity { get; set; } = 0.8;
+
+        /// <inheritdoc/>
+        public string FileName => "dnn-css-variables.css";
+
+        /// <summary>
+        /// Converts the styles into a css string.
+        /// </summary>
+        /// <returns>
+        /// A string representing the css properties.
+        /// </returns>
+        public override string ToString()
+        {
+            return $$"""
+                :root {
+                    --dnn-color-primary: #{{this.ColorPrimary}};
+                    --dnn-color-primary-light: #{{this.ColorPrimaryLight}};
+                    --dnn-color-primary-dark: #{{this.ColorPrimaryDark}};
+                    --dnn-color-primary-contrast: #{{this.ColorPrimaryContrast}};
+                    --dnn-color-primary-r: {{GetRed(this.ColorPrimary)}};
+                    --dnn-color-primary-g: {{GetGreen(this.ColorPrimary)}};
+                    --dnn-color-primary-b: {{GetBlue(this.ColorPrimary)}};
+                        
+                    --dnn-color-secondary: #{{this.ColorSecondary}};
+                    --dnn-color-secondary-light: #{{this.ColorSecondaryLight}};
+                    --dnn-color-secondary-dark: #{{this.ColorSecondaryDark}};
+                    --dnn-color-secondary-contrast: #{{this.ColorSecondaryContrast}};
+                    --dnn-color-secondary-r: {{GetRed(this.ColorSecondary)}};
+                    --dnn-color-secondary-g: {{GetGreen(this.ColorSecondary)}};
+                    --dnn-color-secondary-b: {{GetBlue(this.ColorSecondary)}};
+                        
+                    --dnn-color-tertiary: #{{this.ColorTertiary}};
+                    --dnn-color-tertiary-light: #{{this.ColorTertiaryLight}};
+                    --dnn-color-tertiary-dark: #{{this.ColorTertiaryDark}};
+                    --dnn-color-tertiary-contrast: #{{this.ColorTertiaryContrast}};
+                    --dnn-color-tertiary-r: {{GetRed(this.ColorTertiary)}};
+                    --dnn-color-tertiary-g: {{GetGreen(this.ColorTertiary)}};
+                    --dnn-color-tertiary-b: {{GetBlue(this.ColorTertiary)}};
+                        
+                    --dnn-color-neutral: #{{this.ColorNeutral}};
+                    --dnn-color-neutral-light: #{{this.ColorNeutralLight}};
+                    --dnn-color-neutral-dark: #{{this.ColorNeutralDark}};
+                    --dnn-color-neutral-contrast: #{{this.ColorNeutralContrast}};
+                    --dnn-color-neutral-r: {{GetRed(this.ColorNeutral)}};
+                    --dnn-color-neutral-g: {{GetGreen(this.ColorNeutral)}};
+                    --dnn-color-neutral-b: {{GetBlue(this.ColorNeutral)}};
+                        
+                    --dnn-color-background: #{{this.ColorBackground}};
+                    --dnn-color-background-light: #{{this.ColorBackgroundLight}};
+                    --dnn-color-background-dark: #{{this.ColorBackgroundDark}};
+                    --dnn-color-background-contrast: #{{this.ColorBackgroundContrast}};
+                    --dnn-color-background-r: {{GetRed(this.ColorBackground)}};
+                    --dnn-color-background-g: {{GetGreen(this.ColorBackground)}};
+                    --dnn-color-background-b: {{GetBlue(this.ColorBackground)}};
+                        
+                    --dnn-color-foreground: #{{this.ColorForeground}};
+                    --dnn-color-foreground-light: #{{this.ColorForegroundLight}};
+                    --dnn-color-foreground-dark: #{{this.ColorForegroundDark}};
+                    --dnn-color-foreground-contrast: #{{this.ColorForegroundContrast}};
+                    --dnn-color-foreground-r: {{GetRed(this.ColorForeground)}};
+                    --dnn-color-foreground-g: {{GetGreen(this.ColorForeground)}};
+                    --dnn-color-foreground-b: {{GetBlue(this.ColorForeground)}};
+                
+                    --dnn-color-info: #{{this.ColorInfo}};
+                    --dnn-color-info-light: #{{this.ColorInfoLight}};
+                    --dnn-color-info-dark: #{{this.ColorInfoDark}};
+                    --dnn-color-info-contrast: #{{this.ColorInfoContrast}};
+                    --dnn-color-info-r: {{GetRed(this.ColorInfo)}};
+                    --dnn-color-info-g: {{GetGreen(this.ColorInfo)}};
+                    --dnn-color-info-b: {{GetBlue(this.ColorInfo)}};
+                
+                    --dnn-color-success: #{{this.ColorSuccess}};
+                    --dnn-color-success-light: #{{this.ColorSuccessLight}};
+                    --dnn-color-success-dark: #{{this.ColorSuccessDark}};
+                    --dnn-color-success-contrast: #{{this.ColorSuccessContrast}};
+                    --dnn-color-success-r: {{GetRed(this.ColorSuccess)}};
+                    --dnn-color-success-g: {{GetGreen(this.ColorSuccess)}};
+                    --dnn-color-success-b: {{GetBlue(this.ColorSuccess)}};
+                
+                    --dnn-color-warning: #{{this.ColorWarning}};
+                    --dnn-color-warning-light: #{{this.ColorWarningLight}};
+                    --dnn-color-warning-dark: #{{this.ColorWarningDark}};
+                    --dnn-color-warning-contrast: #{{this.ColorWarningContrast}};
+                    --dnn-color-warning-r: {{GetRed(this.ColorWarning)}};
+                    --dnn-color-warning-g: {{GetGreen(this.ColorWarning)}};
+                    --dnn-color-warning-b: {{GetBlue(this.ColorWarning)}};
+                
+                    --dnn-color-danger: #{{this.ColorDanger}};
+                    --dnn-color-danger-light: #{{this.ColorDangerLight}};
+                    --dnn-color-danger-dark: #{{this.ColorDangerDark}};
+                    --dnn-color-danger-contrast: #{{this.ColorDangerContrast}};
+                    --dnn-color-danger-r: {{GetRed(this.ColorDanger)}};
+                    --dnn-color-danger-g: {{GetGreen(this.ColorDanger)}};
+                    --dnn-color-danger-b: {{GetBlue(this.ColorDanger)}};
+                
+                    --dnn-color-surface: #{{this.ColorSurface}};
+                    --dnn-color-surface-light: #{{this.ColorSurfaceLight}};
+                    --dnn-color-surface-dark: #{{this.ColorSurfaceDark}};
+                    --dnn-color-surface-contrast: #{{this.ColorSurfaceContrast}};
+                    --dnn-color-surface-r: {{GetRed(this.ColorSurface)}};
+                    --dnn-color-surface-g: {{GetGreen(this.ColorSurface)}};
+                    --dnn-color-surface-b: {{GetBlue(this.ColorSurface)}};
+                
+                    --dnn-controls-radius: {{this.ControlsRadius}}px;
+                    --dnn-controls-padding: {{this.ControlsPadding}}px;
+                    --dnn-base-font-size: {{this.BaseFontSize}}px;
+                    --variation-opacity: {{this.VariationOpacity}};
+                }
+             """;
+        }
+
+        private static string GetRed(string hexValue)
+        {
+            return int.Parse(hexValue.Substring(0, 2), NumberStyles.AllowHexSpecifier).ToString(CultureInfo.InvariantCulture);
+        }
+
+        private static string GetGreen(string hexValue)
+        {
+            return int.Parse(hexValue.Substring(2, 2), NumberStyles.AllowHexSpecifier).ToString(CultureInfo.InvariantCulture);
+        }
+
+        private static string GetBlue(string hexValue)
+        {
+            return int.Parse(hexValue.Substring(4, 2), NumberStyles.AllowHexSpecifier).ToString(CultureInfo.InvariantCulture);
+        }
     }
 }
diff --git a/DNN Platform/Modules/CoreMessaging/CoreMessaging.dnn b/DNN Platform/Modules/CoreMessaging/CoreMessaging.dnn
index b0f1a4f270b..1300bca6822 100644
--- a/DNN Platform/Modules/CoreMessaging/CoreMessaging.dnn	
+++ b/DNN Platform/Modules/CoreMessaging/CoreMessaging.dnn	
@@ -36,7 +36,7 @@
                     <controlTitle>Core Messaging View</controlTitle>
                     <controlType>View</controlType>
                     <iconFile/>
-                    <helpUrl>https://dnndocs.com</helpUrl>
+                    <helpUrl>https://docs.dnncommunity.org</helpUrl>
                     <viewOrder>0</viewOrder>
                   </moduleControl>
                 </moduleControls>
diff --git a/DNN Platform/Modules/Groups/SocialGroups.dnn b/DNN Platform/Modules/Groups/SocialGroups.dnn
index 78f9fbcca38..60b3f4a9734 100644
--- a/DNN Platform/Modules/Groups/SocialGroups.dnn	
+++ b/DNN Platform/Modules/Groups/SocialGroups.dnn	
@@ -35,7 +35,7 @@
                     <controlTitle/>
                     <controlType>View</controlType>
                     <iconFile/>
-                    <helpUrl>https://dnndocs.com</helpUrl>
+                    <helpUrl>https://docs.dnncommunity.org</helpUrl>
                     <supportsPopUps>False</supportsPopUps>
                     <viewOrder>0</viewOrder>
                   </moduleControl>
@@ -46,7 +46,7 @@
                     <controlTitle>Create A Group</controlTitle>
                     <controlType>View</controlType>
                     <iconFile/>
-                    <helpUrl>https://dnndocs.com</helpUrl>
+                    <helpUrl>https://docs.dnncommunity.org</helpUrl>
                     <supportsPopUps>True</supportsPopUps>
                     <viewOrder>0</viewOrder>
                   </moduleControl>
diff --git a/DNN Platform/Modules/HTML/dnn_HTML.dnn b/DNN Platform/Modules/HTML/dnn_HTML.dnn
index 19d4f483900..9d569ed3341 100644
--- a/DNN Platform/Modules/HTML/dnn_HTML.dnn	
+++ b/DNN Platform/Modules/HTML/dnn_HTML.dnn	
@@ -125,7 +125,7 @@
                     <controlTitle/>
                     <controlType>View</controlType>
                     <iconFile/>
-                    <helpUrl>https://dnndocs.com</helpUrl>
+                    <helpUrl>https://docs.dnncommunity.org</helpUrl>
                     <viewOrder>0</viewOrder>
                   </moduleControl>
                   <moduleControl>
@@ -135,7 +135,7 @@
                     <controlTitle>Edit Content</controlTitle>
                     <controlType>Edit</controlType>
                     <iconFile/>
-                    <helpUrl>https://dnndocs.com</helpUrl>
+                    <helpUrl>https://docs.dnncommunity.org</helpUrl>
                     <viewOrder>0</viewOrder>
                     <supportsPopUps>True</supportsPopUps>
                   </moduleControl>
@@ -146,7 +146,7 @@
                     <controlTitle>My Work</controlTitle>
                     <controlType>View</controlType>
                     <iconFile/>
-                    <helpUrl>https://dnndocs.com</helpUrl>
+                    <helpUrl>https://docs.dnncommunity.org</helpUrl>
                     <viewOrder>0</viewOrder>
                     <supportsPopUps>True</supportsPopUps>
                   </moduleControl>
@@ -157,7 +157,7 @@
                     <controlTitle>Settings</controlTitle>
                     <controlType>Edit</controlType>
                     <iconFile/>
-                    <helpUrl>https://dnndocs.com</helpUrl>
+                    <helpUrl>https://docs.dnncommunity.org</helpUrl>
                     <viewOrder>0</viewOrder>
                   </moduleControl>
                 </moduleControls>
diff --git a/DNN Platform/Modules/HtmlEditorManager/dnn_HtmlEditorManager.dnn b/DNN Platform/Modules/HtmlEditorManager/dnn_HtmlEditorManager.dnn
index be5373ea693..54e7e266bc0 100644
--- a/DNN Platform/Modules/HtmlEditorManager/dnn_HtmlEditorManager.dnn	
+++ b/DNN Platform/Modules/HtmlEditorManager/dnn_HtmlEditorManager.dnn	
@@ -36,7 +36,7 @@
                     <controlTitle>Html Editor Management</controlTitle>
                     <controlType>View</controlType>
                     <iconFile/>
-                    <helpUrl>https://dnndocs.com</helpUrl>
+                    <helpUrl>https://docs.dnncommunity.org</helpUrl>
                     <viewOrder>0</viewOrder>
                   </moduleControl>
                 </moduleControls>
diff --git a/DNN Platform/Modules/Journal/Journal.dnn b/DNN Platform/Modules/Journal/Journal.dnn
index 3e73634d81a..02d98005730 100644
--- a/DNN Platform/Modules/Journal/Journal.dnn	
+++ b/DNN Platform/Modules/Journal/Journal.dnn	
@@ -36,7 +36,7 @@
                                         <controlTitle/>
                                         <controlType>View</controlType>
                                         <iconFile/>
-                                        <helpUrl>https://dnndocs.com</helpUrl>
+                                        <helpUrl>https://docs.dnncommunity.org</helpUrl>
                                         <viewOrder>0</viewOrder>
                                     </moduleControl>
                                     <moduleControl>
@@ -46,7 +46,7 @@
                                         <controlTitle>Journal Settings</controlTitle>
                                         <controlType>Edit</controlType>
                                         <iconFile/>
-                                        <helpUrl>https://dnndocs.com</helpUrl>
+                                        <helpUrl>https://docs.dnncommunity.org</helpUrl>
                                         <viewOrder>0</viewOrder>
                                     </moduleControl>
                                 </moduleControls>
diff --git a/DNN Platform/Modules/MemberDirectory/MemberDirectory.dnn b/DNN Platform/Modules/MemberDirectory/MemberDirectory.dnn
index d2a144d1642..be54d90c60c 100644
--- a/DNN Platform/Modules/MemberDirectory/MemberDirectory.dnn	
+++ b/DNN Platform/Modules/MemberDirectory/MemberDirectory.dnn	
@@ -36,7 +36,7 @@
                     <controlTitle>Social Messaging View</controlTitle>
                     <controlType>View</controlType>
                     <iconFile/>
-                    <helpUrl>https://dnndocs.com</helpUrl>
+                    <helpUrl>https://docs.dnncommunity.org</helpUrl>
                     <viewOrder>0</viewOrder>
                   </moduleControl>
                   <moduleControl>
@@ -47,7 +47,7 @@
                     <controlTitle>Settings</controlTitle>
                     <controlType>Edit</controlType>
                     <iconFile/>
-                    <helpUrl>https://dnndocs.com</helpUrl>
+                    <helpUrl>https://docs.dnncommunity.org</helpUrl>
                     <viewOrder>0</viewOrder>
                   </moduleControl>
                 </moduleControls>
diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/package.json b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/package.json
index ca7c2239a7b..016549da9b6 100644
--- a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/package.json	
+++ b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/package.json	
@@ -30,7 +30,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@dnncommunity/dnn-elements": "^0.24.1",
+    "@dnncommunity/dnn-elements": "^0.25.0",
     "@stencil/sass": "^3.0.12",
     "@stencil/store": "^2.0.16",
     "@types/node": "^22.9.0"
diff --git a/DNN Platform/Modules/ResourceManager/View.html b/DNN Platform/Modules/ResourceManager/View.html
index 79305ed99d6..e4e084e5272 100644
--- a/DNN Platform/Modules/ResourceManager/View.html	
+++ b/DNN Platform/Modules/ResourceManager/View.html	
@@ -1,22 +1,5 @@
 [AntiForgeryToken:True]
 <script type="module" src="[Request:RelativeAppPath]DesktopModules/ResourceManager/Scripts/dnn-resource-manager/dnn-resource-manager.esm.js"></script>
 <script nomodule src="[Request:RelativeAppPath]DesktopModules/ResourceManager/Scripts/dnn-resource-manager/dnn-resource-manager.js"></script>
-<style type="text/css">
-    :root {
-        --dnn-color-primary: #3792ED;
-        --dnn-color-primary-light: #6CB6F3;
-        --dnn-color-primary-dark: #0D569E;
-        --dnn-color-primary-contrast: #FFF;
-        --dnn-color-secondary: #CCC;
-        --dnn-color-secondary-light: #EEE;
-        --dnn-color-secondary-dark: #AAA;
-        --dnn-color-secondary-contrast: #222;
-        --dnn-color-tertiary: #EAEAEA;
-        --dnn-color-tertiary-light: #F2F2F2;
-        --dnn-color-tertiary-dark: #D8D8D8;
-        --dnn-color-tertiary-contrast: #333;
-        --dnn-controls-radius: 5px;
-        --dnn-controls-padding: 5px;
-    }
-</style>
+
 <dnn-resource-manager module-id="[ModuleContext:ModuleId]"></dnn-resource-manager>
\ No newline at end of file
diff --git a/DNN Platform/Skins/Aperture/menus/desktop/RazorMenu.cshtml b/DNN Platform/Skins/Aperture/menus/desktop/RazorMenu.cshtml
index 8b7414c65e4..c5a637ee9f5 100644
--- a/DNN Platform/Skins/Aperture/menus/desktop/RazorMenu.cshtml	
+++ b/DNN Platform/Skins/Aperture/menus/desktop/RazorMenu.cshtml	
@@ -17,17 +17,10 @@
     {
         var hasChildren = page.HasChildren();
         var attrTarget = !string.IsNullOrEmpty(page.Target) ? ("target=\"" + page.Target + "\"") :string.Empty;
+        var attrHref = page.Enabled ? page.Url : "javascript:void(0);";
 
         <li class="@(page.Selected ? "selected" : string.Empty)">
-            @if (page.Enabled)
-            {
-                <a href="@page.Url" @attrTarget>@page.Text</a>
-            }
-            else
-            {
-                <a href="javascript:void(0);" @attrTarget>@page</a>
-            }
-
+            <a href="@attrHref" @attrTarget>@page.Text</a>
             @if (hasChildren)
             {
                 <ul>
diff --git a/DNN Platform/Skins/Aperture/menus/footer/RazorMenu.cshtml b/DNN Platform/Skins/Aperture/menus/footer/RazorMenu.cshtml
index 5b17b5400fb..e1f63ba7c58 100644
--- a/DNN Platform/Skins/Aperture/menus/footer/RazorMenu.cshtml	
+++ b/DNN Platform/Skins/Aperture/menus/footer/RazorMenu.cshtml	
@@ -17,17 +17,10 @@
     {
         var hasChildren = page.HasChildren();
         var attrTarget = !string.IsNullOrEmpty(page.Target) ? ("target=\"" + page.Target + "\"") :string.Empty;
+        var attrHref = page.Enabled ? page.Url : "javascript:void(0);";
 
         <li class="@(page.Selected ? "selected" : string.Empty)">
-            @if (page.Enabled)
-            {
-                <a href="@page.Url" @attrTarget>@page.Text</a>
-            }
-            else
-            {
-                <a href="javascript:void(0);" @attrTarget>@page</a>
-            }
-
+            <a href="@attrHref" @attrTarget>@page.Text</a>
             @if (hasChildren)
             {
                 <ul>
diff --git a/DNN Platform/Skins/Aperture/src/scss/_base.scss b/DNN Platform/Skins/Aperture/src/scss/_base.scss
index 3c98ece5b40..8bdbccdd447 100644
--- a/DNN Platform/Skins/Aperture/src/scss/_base.scss	
+++ b/DNN Platform/Skins/Aperture/src/scss/_base.scss	
@@ -27,42 +27,50 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-  @include font-baseline(48, calc(48 * 1.15));
+  font-size: 2.67rem;
+  line-height: 1.15;
   margin-bottom: 1rem;
 }
 
 h2 {
-  @include font-baseline(48, calc(48 * 1.15));
+  font-size: 2.67rem;
+  line-height: 1.15;
   margin-bottom: 1rem;
 }
 
 h3 {
-  @include font-baseline(42, calc(42 * 1.15));
+  font-size: 2.33rem;
+  line-height: 1.15;
   margin-bottom: 1rem;
 }
 
 h4 {
-  @include font-baseline(36, calc(36 * 1.15));
+  font-size: 2rem;
+  line-height: 1.15;
   margin-bottom: 1.5rem;
 }
 
 h5 {
-  @include font-baseline(30, calc(30 * 1.15));
+  font-size: 2rem;
+  line-height: 1.15;
   margin-bottom: 1.5rem;
 }
 
 h6 {
-  @include font-baseline(24, calc(24 * 1.15));
+  font-size: 1.33rem;
+  line-height: 1.15;
   margin-bottom: 1.5rem;
 }
 
 .lead {
-  @include font-baseline(22, calc(22 * 1.5));
+  font-size: 1.22rem;
+  line-height: 1.5;
   margin-bottom: 2rem;
 }
 
 p {
-  @include font-baseline(18, calc(18 * 1.5));
+  font-size: 1rem;
+  line-height: 1.5;
   margin-bottom: 1.5rem;
 }
 
diff --git a/DNN Platform/Skins/Aperture/src/scss/components/_nav.scss b/DNN Platform/Skins/Aperture/src/scss/components/_nav.scss
index b3ab9d39cc4..ac8aa7ce852 100644
--- a/DNN Platform/Skins/Aperture/src/scss/components/_nav.scss	
+++ b/DNN Platform/Skins/Aperture/src/scss/components/_nav.scss	
@@ -36,7 +36,7 @@ header {
 	}
 
 	a {
-		@include font-size(16);
+		font-size: 0.89rem;
 		color: color('background-light');
 		font-weight: 600;
 		text-decoration: none;
@@ -106,7 +106,7 @@ header {
 
 					// border-top: 1px solid color('foreground-light');
 					a {
-						@include font-size(14);
+						font-size: 0.78rem;
 						font-weight: 700;
 						padding: .5rem .75rem .5rem 3rem;
 					}
diff --git a/DNN Platform/Skins/Aperture/src/scss/utilities/_fonts.scss b/DNN Platform/Skins/Aperture/src/scss/utilities/_fonts.scss
deleted file mode 100644
index d1507611923..00000000000
--- a/DNN Platform/Skins/Aperture/src/scss/utilities/_fonts.scss	
+++ /dev/null
@@ -1,17 +0,0 @@
-// rem font-size with px fallback
-// usage: @include font-size(16)
-@mixin font-size($sizeValue) {
-    font-size: $sizeValue + px;
-    font-size: calc($sizeValue / 16) + rem;
-  }
-  
-  // vertical rhythm
-  // usage: @include font-baseline(16,24);
-  @mixin font-baseline($font-size, $lineheight){
-    $var-base-font-size: #{map-get($fonts, 'base-font-size')};
-      font-size: $font-size + px;
-      font-size: calc($font-size / $var-base-font-size) + rem;
-      line-height: calc($lineheight / $font-size);
-    margin: 0 0 calc((($lineheight / $font-size) * (1 / ($lineheight / $defaultlineheight))) * .5em ) 0; 
-  }
-  
\ No newline at end of file
diff --git a/DNN Platform/Skins/Aperture/src/scss/utilities/_utilities.scss b/DNN Platform/Skins/Aperture/src/scss/utilities/_utilities.scss
index 65cfa6b50e7..d2ec9f5c27d 100644
--- a/DNN Platform/Skins/Aperture/src/scss/utilities/_utilities.scss	
+++ b/DNN Platform/Skins/Aperture/src/scss/utilities/_utilities.scss	
@@ -6,7 +6,6 @@
 @import 'display';
 @import 'dividers';
 @import 'flex';
-@import 'fonts';
 @import 'gap';
 @import 'image';
 @import 'margin';
diff --git a/DNN Platform/Skins/Aperture/src/scss/variables/_colors.scss b/DNN Platform/Skins/Aperture/src/scss/variables/_colors.scss
index 347f668e0d3..af8724c8d5f 100644
--- a/DNN Platform/Skins/Aperture/src/scss/variables/_colors.scss	
+++ b/DNN Platform/Skins/Aperture/src/scss/variables/_colors.scss	
@@ -1,392 +1,201 @@
 // Color Array
 $colors: (
-    "primary": #00a5e0,
-    "primary-r": 0,
-    "primary-g": 165,
-    "primary-b": 224,
-    "primary-light": #1aaee3,
-    "primary-light-r": 26,
-    "primary-light-g": 174,
-    "primary-light-b": 227,
-    "primary-dark": #0091c5,
-    "primary-dark-r": 0,
-    "primary-dark-g": 145,
-    "primary-dark-b": 197,
-    "primary-contrast": #ffffff,
-    "primary-contrast-r": 255,
-    "primary-contrast-g": 255,
-    "primary-contrast-b": 255,
-
-    "secondary": #ed3d46,
-    "secondary-r": 237,
-    "secondary-g": 61,
-    "secondary-b": 70,
-    "secondary-light": #ef5059,
-    "secondary-light-r": 239,
-    "secondary-light-g": 80,
-    "secondary-light-b": 89,
-    "secondary-dark": #d1363e,
-    "secondary-dark-r": 209,
-    "secondary-dark-g": 54,
-    "secondary-dark-b": 62,
-    "secondary-contrast": #ffffff,
-    "secondary-contrast-r": 255,
-    "secondary-contrast-g": 255,
-    "secondary-contrast-b": 255,
-
-    "tertiary": #0e2936,
-    "tertiary-r": 0,
-    "tertiary-g": 165,
-    "tertiary-b": 225,
-    "tertiary-light": #3c7a9a,
-    "tertiary-light-r": 60,
-    "tertiary-light-g": 122,
-    "tertiary-light-b": 154,
-    "tertiary-dark": #0b1c24,
-    "tertiary-dark-r": 11,
-    "tertiary-dark-g": 28,
-    "tertiary-dark-b": 36,
-    "tertiary-contrast": #ffffff,
-    "tertiary-contrast-r": 255,
-    "tertiary-contrast-g": 255,
-    "tertiary-contrast-b": 255,
-
-    "neutral": #ededee,
-    "neutral-r": 245,
-    "neutral-g": 245,
-    "neutral-b": 245,
-    "neutral-light": #ffffff,
-    "neutral-light-r": 255,
-    "neutral-light-g": 255,
-    "neutral-light-b": 255,
-    "neutral-dark": #999999,
-    "neutral-dark-r": 153,
-    "neutral-dark-g": 153,
-    "neutral-dark-b": 153,
-    "neutral-contrast": #000000,
-    "neutral-contrast-r": 0,
-    "neutral-contrast-g": 0,
-    "neutral-contrast-b": 0,
-
-    "background": #ffffff,
-    "background-r": 255,
-    "background-g": 255,
-    "background-b": 255,
-    "background-light": #f5f5f5,
-    "background-light-r": 245,
-    "background-light-g": 245,
-    "background-light-b": 245,
-    "background-dark": #cccccc,
-    "background-dark-r": 204,
-    "background-dark-g": 204,
-    "background-dark-b": 204,
-    "background-contrast": #000000,
-    "background-contrast-r": 0,
-    "background-contrast-g": 0,
-    "background-contrast-b": 0,
-
-    "foreground": #000000,
-    "foreground-r": 0,
-    "foreground-g": 0,
-    "foreground-b": 0,
-    "foreground-light": #333333,
-    "foreground-light-r": 51,
-    "foreground-light-g": 51,
-    "foreground-light-b": 51,
-    "foreground-dark": #000000,
-    "foreground-dark-r": 0,
-    "foreground-dark-g": 0,
-    "foreground-dark-b": 0,
-    "foreground-contrast": #ffffff,
-    "foreground-contrast-r": 255,
-    "foreground-contrast-g": 255,
-    "foreground-contrast-b": 255,
-
-    "surface": #ffffff,
-    "surface-r": 255,
-    "surface-g": 255,
-    "surface-b": 255,
-    "surface-light": #f5f5f5,
-    "surface-light-r": 245,
-    "surface-light-g": 245,
-    "surface-light-b": 245,
-    "surface-dark": #cccccc,
-    "surface-dark-r": 204,
-    "surface-dark-g": 204,
-    "surface-dark-b": 204,
-    "surface-contrast": #000000,
-    "surface-contrast-r": 0,
-    "surface-contrast-g": 0,
-    "surface-contrast-b": 0,
-
-    "info": #17a2b8,
-    "info-r": 23,
-    "info-g": 162,
-    "info-b": 184,
-    "info-light": #23b8cf,
-    "info-light-r": 35,
-    "info-light-g": 184,
-    "info-light-b": 207,
-    "info-dark": #00889e,
-    "info-dark-r": 0,
-    "info-dark-g": 136,
-    "info-dark-b": 158,
-    "info-contrast": #ffffff,
-    "info-contrast-r": 255,
-    "info-contrast-g": 255,
-    "info-contrast-b": 255,
-
-    "success": #28a745,
-    "success-r": 40,
-    "success-g": 167,
-    "success-b": 69,
-    "success-light": #49c25d,
-    "success-light-r": 73,
-    "success-light-g": 194,
-    "success-light-b": 93,
-    "success-dark": #00902f,
-    "success-dark-r": 0,
-    "success-dark-g": 144,
-    "success-dark-b": 47,
-    "success-contrast": #ffffff,
-    "success-contrast-r": 255,
-    "success-contrast-g": 255,
-    "success-contrast-b": 255,
-
-    "warning": #ffc107,
-    "warning-r": 255,
-    "warning-g": 193,
-    "warning-b": 7,
-    "warning-light": #ffd42e,
-    "warning-light-r": 255,
-    "warning-light-g": 212,
-    "warning-light-b": 46,
-    "warning-dark": #e9ad00,
-    "warning-dark-r": 233,
-    "warning-dark-g": 173,
-    "warning-dark-b": 0,
-    "warning-contrast": #ffffff,
-    "warning-contrast-r": 255,
-    "warning-contrast-g": 255,
-    "warning-contrast-b": 255,
-
-    "danger": #dc3545,
-    "danger-r": 220,
-    "danger-g": 53,
-    "danger-b": 69,
-    "danger-light": #f14954,
-    "danger-light-r": 241,
-    "danger-light-g": 73,
-    "danger-light-b": 84,
-    "danger-dark": #c51535,
-    "danger-dark-r": 197,
-    "danger-dark-g": 21,
-    "danger-dark-b": 53,
-    "danger-contrast": #ffffff,
-    "danger-contrast-r": 255,
-    "danger-contrast-g": 255,
-    "danger-contrast-b": 255,
-
-    "variation-opacity": 0.8,
+    "primary": var(--dnn-color-primary, #00a5e0),
+    "primary-r": var(--dnn-color-primary-r, 0),
+    "primary-g": var(--dnn-color-primary-g, 165),
+    "primary-b": var(--dnn-color-primary-b, 224),
+    "primary-light": var(--dnn-color-primary-light, #1aaee3),
+    "primary-light-r": var(--dnn-color-primary-light-r, 26),
+    "primary-light-g": var(--dnn-color-primary-light-g, 174),
+    "primary-light-b": var(--dnn-color-primary-light-b, 227),
+    "primary-dark": var(--dnn-color-primary-dark, #0091c5),
+    "primary-dark-r": var(--dnn-color-primary-dark-r, 0),
+    "primary-dark-g": var(--dnn-color-primary-dark-g, 145),
+    "primary-dark-b": var(--dnn-color-primary-dark-b 197),
+    "primary-contrast": var(--dnn-color-primary-contrast, #ffffff),
+    "primary-contrast-r": var(--dnn-color-primary-contrast-r, 255),
+    "primary-contrast-g": var(--dnn-color-primary-contrast-g, 255),
+    "primary-contrast-b": var(--dnn-color-primary-contrast-b 255),
+
+    "secondary": var(--dnn-color-secondary, #ed3d46),
+    "secondary-r": var(--dnn-color-secondary-r, 237),
+    "secondary-g": var(--dnn-color-secondary-g, 61),
+    "secondary-b": var(--dnn-color-secondary-b, 70),
+    "secondary-light": var(--dnn-color-secondary-light, #ef5059),
+    "secondary-light-r": var(--dnn-color-secondary-light-r, 239),
+    "secondary-light-g": var(--dnn-color-secondary-light-g, 80),
+    "secondary-light-b": var(--dnn-color-secondary-light-b, 89),
+    "secondary-dark": var(--dnn-color-secondary-dark, #d1363e),
+    "secondary-dark-r": var(--dnn-color-secondary-dark-r, 209),
+    "secondary-dark-g": var(--dnn-color-secondary-dark-g, 54),
+    "secondary-dark-b": var(--dnn-color-secondary-dark-b, 62),
+    "secondary-contrast": var(--dnn-color-secondary-contrast, #ffffff),
+    "secondary-contrast-r": var(--dnn-color-secondary-contrast-r, 255),
+    "secondary-contrast-g": var(--dnn-color-secondary-contrast-g, 255),
+    "secondary-contrast-b": var(--dnn-color-secondary-contrast-b, 255),
+
+    "tertiary": var(--dnn-color-tertiary, #0e2936),
+    "tertiary-r": var(--dnn-color-tertiary-r, 14),
+    "tertiary-g": var(--dnn-color-tertiary-g, 41),
+    "tertiary-b": var(--dnn-color-tertiary-b, 54),
+    "tertiary-light": var(--dnn-color-tertiary-light, #3c7a9a),
+    "tertiary-light-r": var(--dnn-color-tertiary-light-r, 60),
+    "tertiary-light-g": var(--dnn-color-tertiary-light-g, 122),
+    "tertiary-light-b": var(--dnn-color-tertiary-light-b, 154),
+    "tertiary-dark": var(--dnn-color-tertiary-dark, #0b1c24),
+    "tertiary-dark-r": var(--dnn-color-tertiary-dark-r, 11),
+    "tertiary-dark-g": var(--dnn-color-tertiary-dark-g, 28),
+    "tertiary-dark-b": var(--dnn-color-tertiary-dark-b, 36),
+    "tertiary-contrast": var(--dnn-color-tertiary-contrast, #ffffff),
+    "tertiary-contrast-r": var(--dnn-color-tertiary-contrast-r, 255),
+    "tertiary-contrast-g": var(--dnn-color-tertiary-contrast-g, 255),
+    "tertiary-contrast-b": var(--dnn-color-tertiary-contrast-b, 255),
+    
+    "neutral": var(--dnn-color-neutral, #ededee),
+    "neutral-r": var(--dnn-color-neutral-r, 245),
+    "neutral-g": var(--dnn-color-neutral-g, 245),
+    "neutral-b": var(--dnn-color-neutral-b, 245),
+    "neutral-light": var(--dnn-color-neutral-light, #ffffff),
+    "neutral-light-r": var(--dnn-color-neutral-light-r, 255),
+    "neutral-light-g": var(--dnn-color-neutral-light-g, 255),
+    "neutral-light-b": var(--dnn-color-neutral-light-b, 255),
+    "neutral-dark": var(--dnn-color-neutral-dark, #999999),
+    "neutral-dark-r": var(--dnn-color-neutral-dark-r, 153),
+    "neutral-dark-g": var(--dnn-color-neutral-dark-g, 153),
+    "neutral-dark-b": var(--dnn-color-neutral-dark-b, 153),
+    "neutral-contrast": var(--dnn-color-neutral-contrast, #000000),
+    "neutral-contrast-r": var(--dnn-color-neutral-contrast-r, 0),
+    "neutral-contrast-g": var(--dnn-color-neutral-contrast-g, 0),
+    "neutral-contrast-b": var(--dnn-color-neutral-contrast-b, 0),
+
+    "background": var(--dnn-color-background, #ffffff),
+    "background-r": var(--dnn-color-background-r, 255),
+    "background-g": var(--dnn-color-background-g, 255),
+    "background-b": var(--dnn-color-background-b, 255),
+    "background-light": var(--dnn-color-background-light, #f5f5f5),
+    "background-light-r": var(--dnn-color-background-light-r, 245),
+    "background-light-g": var(--dnn-color-background-light-g, 245),
+    "background-light-b": var(--dnn-color-background-light-b, 245),
+    "background-dark": var(--dnn-color-background-dark, #cccccc),
+    "background-dark-r": var(--dnn-color-background-dark-r, 204),
+    "background-dark-g": var(--dnn-color-background-dark-g, 204),
+    "background-dark-b": var(--dnn-color-background-dark-b, 204),
+    "background-contrast": var(--dnn-color-background-contrast, #000000),
+    "background-contrast-r": var(--dnn-color-background-contrast-r, 0),
+    "background-contrast-g": var(--dnn-color-background-contrast-g, 0),
+    "background-contrast-b": var(--dnn-color-background-contrast-b, 0),
+
+    "foreground": var(--dnn-color-foreground, #000000),
+    "foreground-r": var(--dnn-color-foreground-r, 0),
+    "foreground-g": var(--dnn-color-foreground-g, 0),
+    "foreground-b": var(--dnn-color-foreground-b, 0),
+    "foreground-light": var(--dnn-color-foreground-light, #333333),
+    "foreground-light-r": var(--dnn-color-foreground-light-r, 51),
+    "foreground-light-g": var(--dnn-color-foreground-light-g, 51),
+    "foreground-light-b": var(--dnn-color-foreground-light-b, 51),
+    "foreground-dark": var(--dnn-color-foreground-dark, #000000),
+    "foreground-dark-r": var(--dnn-color-foreground-dark-r, 0),
+    "foreground-dark-g": var(--dnn-color-foreground-dark-g, 0),
+    "foreground-dark-b": var(--dnn-color-foreground-dark-b, 0),
+    "foreground-contrast": var(--dnn-color-foreground-contrast, #ffffff),
+    "foreground-contrast-r": var(--dnn-color-foreground-contrast-r, 255),
+    "foreground-contrast-g": var(--dnn-color-foreground-contrast-g, 255),
+    "foreground-contrast-b": var(--dnn-color-foreground-contrast-b, 255),
+
+    "surface": var(--dnn-color-surface, #eeeeee),
+    "surface-r": var(--dnn-color-surface-r, 238),
+    "surface-g": var(--dnn-color-surface-g, 238),
+    "surface-b": var(--dnn-color-surface-b, 238),
+    "surface-light": var(--dnn-color-surface-light, #f5f5f5),
+    "surface-light-r": var(--dnn-color-surface-light-r, 245),
+    "surface-light-g": var(--dnn-color-surface-light-g, 245),
+    "surface-light-b": var(--dnn-color-surface-light-b, 245),
+    "surface-dark": var(--dnn-color-surface-dark, #cccccc),
+    "surface-dark-r": var(--dnn-color-surface-dark-r, 204),
+    "surface-dark-g": var(--dnn-color-surface-dark-g, 204),
+    "surface-dark-b": var(--dnn-color-surface-dark-b, 204),
+    "surface-contrast": var(--dnn-color-surface-contrast, #000000),
+    "surface-contrast-r": var(--dnn-color-surface-contrast-r, 0),
+    "surface-contrast-g": var(--dnn-color-surface-contrast-g, 0),
+    "surface-contrast-b": var(--dnn-color-surface-contrast-b, 0),
+
+    "info": var(--dnn-color-info, #17a2b8),
+    "info-r": var(--dnn-color-info-r, 23),
+    "info-g": var(--dnn-color-info-g, 162),
+    "info-b": var(--dnn-color-info-b, 184),
+    "info-light": var(--dnn-color-info-light, #23b8cf),
+    "info-light-r": var(--dnn-color-info-light-r, 35),
+    "info-light-g": var(--dnn-color-info-light-g, 184),
+    "info-light-b": var(--dnn-color-info-light-b, 207),
+    "info-dark": var(--dnn-color-info-dark, #00889e),
+    "info-dark-r": var(--dnn-color-info-dark-r, 0),
+    "info-dark-g": var(--dnn-color-info-dark-g, 136),
+    "info-dark-b": var(--dnn-color-info-dark-b, 158),
+    "info-contrast": var(--dnn-color-info-contrast, #ffffff),
+    "info-contrast-r": var(--dnn-color-info-contrast-r, 255),
+    "info-contrast-g": var(--dnn-color-info-contrast-g, 255),
+    "info-contrast-b": var(--dnn-color-info-contrast-b, 255),
+    
+    "success": var(--dnn-color-success, #28a745),
+    "success-r": var(--dnn-color-success-r, 40),
+    "success-g": var(--dnn-color-success-g, 167),
+    "success-b": var(--dnn-color-success-b, 69),
+    "success-light": var(--dnn-color-success-light, #49c25d),
+    "success-light-r": var(--dnn-color-success-light-r, 73),
+    "success-light-g": var(--dnn-color-success-light-g, 194),
+    "success-light-b": var(--dnn-color-success-light-b, 93),
+    "success-dark": var(--dnn-color-success-dark, #00902f),
+    "success-dark-r": var(--dnn-color-success-dark-r, 0),
+    "success-dark-g": var(--dnn-color-success-dark-g, 144),
+    "success-dark-b": var(--dnn-color-success-dark-b, 47),
+    "success-contrast": var(--dnn-color-success-contrast, #ffffff),
+    "success-contrast-r": var(--dnn-color-success-contrast-r, 255),
+    "success-contrast-g": var(--dnn-color-success-contrast-g, 255),
+    "success-contrast-b": var(--dnn-color-success-contrast-b, 255),
+
+    "warning": var(--dnn-color-warning, #ffc107),
+    "warning-r": var(--dnn-color-warning-r, 255),
+    "warning-g": var(--dnn-color-warning-g, 193),
+    "warning-b": var(--dnn-color-warning-b, 7),
+    "warning-light": var(--dnn-color-warning-light, #ffd42e),
+    "warning-light-r": var(--dnn-color-warning-light-r, 255),
+    "warning-light-g": var(--dnn-color-warning-light-g, 212),
+    "warning-light-b": var(--dnn-color-warning-light-b, 46),
+    "warning-dark": var(--dnn-color-warning-dark, #e9ad00),
+    "warning-dark-r": var(--dnn-color-warning-dark-r, 233),
+    "warning-dark-g": var(--dnn-color-warning-dark-g, 173),
+    "warning-dark-b": var(--dnn-color-warning-dark-b, 0),
+    "warning-contrast": var(--dnn-color-warning-contrast, #ffffff),
+    "warning-contrast-r": var(--dnn-color-warning-contrast-r, 255),
+    "warning-contrast-g": var(--dnn-color-warning-contrast-g, 255),
+    "warning-contrast-b": var(--dnn-color-warning-contrast-b, 255),
+
+    "danger": var(--dnn-color-danger, #dc3545),
+    "danger-r": var(--dnn-color-danger-r, 220),
+    "danger-g": var(--dnn-color-danger-g, 53),
+    "danger-b": var(--dnn-color-danger-b, 69),
+    "danger-light": var(--dnn-color-danger-light, #f14954),
+    "danger-light-r": var(--dnn-color-danger-light-r, 241),
+    "danger-light-g": var(--dnn-color-danger-light-g, 73),
+    "danger-light-b": var(--dnn-color-danger-light-b, 84),
+    "danger-dark": var(--dnn-color-danger-dark, #c51535),
+    "danger-dark-r": var(--dnn-color-danger-dark-r, 197),
+    "danger-dark-g": var(--dnn-color-danger-dark-g, 21),
+    "danger-dark-b": var(--dnn-color-danger-dark-b, 53),
+    "danger-contrast": var(--dnn-color-danger-contrast, #ffffff),
+    "danger-contrast-r": var(--dnn-color-danger-contrast-r, 255),
+    "danger-contrast-g": var(--dnn-color-danger-contrast-g, 255),
+    "danger-contrast-b": var(--dnn-color-danger-contrast-b, 255),
+    
+    "variation-opacity": var(--dnn-color-variation-opacity, 0.8),
 );
 
-///TODO: Remove these in favor of those injected by DNN 10. The defaults in DNN 10 should match these.
-:root {
-    --dnn-color-primary: #{map-get($colors, 'primary')};
-    --dnn-color-primary-r: #{map-get($colors, 'primary-r')};
-    --dnn-color-primary-g: #{map-get($colors, 'primary-g')};
-    --dnn-color-primary-b: #{map-get($colors, 'primary-b')};
-    --dnn-color-primary-light: #{map-get($colors, 'primary-light')};
-    --dnn-color-primary-light-r: #{map-get($colors, 'primary-light-r')};
-    --dnn-color-primary-light-g: #{map-get($colors, 'primary-light-g')};
-    --dnn-color-primary-light-b: #{map-get($colors, 'primary-light-b')};
-    --dnn-color-primary-dark: #{map-get($colors, 'primary-dark')};
-    --dnn-color-primary-dark-r: #{map-get($colors, 'primary-dark-r')};
-    --dnn-color-primary-dark-g: #{map-get($colors, 'primary-dark-g')};
-    --dnn-color-primary-dark-b: #{map-get($colors, 'primary-dark-b')};
-    --dnn-color-primary-contrast: #{map-get($colors, 'primary-contrast')};
-    --dnn-color-primary-contrast-r: #{map-get($colors, 'primary-contrast-r')};
-    --dnn-color-primary-contrast-g: #{map-get($colors, 'primary-contrast-g')};
-    --dnn-color-primary-contrast-b: #{map-get($colors, 'primary-contrast-b')};
-
-    --dnn-color-secondary: #{map-get($colors, 'secondary')};
-    --dnn-color-secondary-r: #{map-get($colors, 'secondary-r')};
-    --dnn-color-secondary-g: #{map-get($colors, 'secondary-g')};
-    --dnn-color-secondary-b: #{map-get($colors, 'secondary-b')};
-    --dnn-color-secondary-light: #{map-get($colors, 'secondary-light')};
-    --dnn-color-secondary-light-r: #{map-get($colors, 'secondary-light-r')};
-    --dnn-color-secondary-light-g: #{map-get($colors, 'secondary-light-g')};
-    --dnn-color-secondary-light-b: #{map-get($colors, 'secondary-light-b')};
-    --dnn-color-secondary-dark: #{map-get($colors, 'secondary-dark')};
-    --dnn-color-secondary-dark-r: #{map-get($colors, 'secondary-dark-r')};
-    --dnn-color-secondary-dark-g: #{map-get($colors, 'secondary-dark-g')};
-    --dnn-color-secondary-dark-b: #{map-get($colors, 'secondary-dark-b')};
-    --dnn-color-secondary-contrast: #{map-get($colors, 'secondary-contrast')};
-    --dnn-color-secondary-contrast-r: #{map-get($colors, 'secondary-contrast-r')};
-    --dnn-color-secondary-contrast-g: #{map-get($colors, 'secondary-contrast-g')};
-    --dnn-color-secondary-contrast-b: #{map-get($colors, 'secondary-contrast-b')};
-
-    --dnn-color-tertiary: #{map-get($colors, 'tertiary')};
-    --dnn-color-tertiary-r: #{map-get($colors, 'tertiary-r')};
-    --dnn-color-tertiary-g: #{map-get($colors, 'tertiary-g')};
-    --dnn-color-tertiary-b: #{map-get($colors, 'tertiary-b')};
-    --dnn-color-tertiary-light: #{map-get($colors, 'tertiary-light')};
-    --dnn-color-tertiary-light-r: #{map-get($colors, 'tertiary-light-r')};
-    --dnn-color-tertiary-light-g: #{map-get($colors, 'tertiary-light-g')};
-    --dnn-color-tertiary-light-b: #{map-get($colors, 'tertiary-light-b')};
-    --dnn-color-tertiary-dark: #{map-get($colors, 'tertiary-dark')};
-    --dnn-color-tertiary-dark-r: #{map-get($colors, 'tertiary-dark-r')};
-    --dnn-color-tertiary-dark-g: #{map-get($colors, 'tertiary-dark-g')};
-    --dnn-color-tertiary-dark-b: #{map-get($colors, 'tertiary-dark-b')};
-    --dnn-color-tertiary-contrast: #{map-get($colors, 'tertiary-contrast')};
-    --dnn-color-tertiary-contrast-r: #{map-get($colors, 'tertiary-contrast-r')};
-    --dnn-color-tertiary-contrast-g: #{map-get($colors, 'tertiary-contrast-g')};
-    --dnn-color-tertiary-contrast-b: #{map-get($colors, 'tertiary-contrast-b')};
-
-    --dnn-color-neutral: #{map-get($colors, 'neutral')};
-    --dnn-color-neutral-r: #{map-get($colors, 'neutral-r')};
-    --dnn-color-neutral-g: #{map-get($colors, 'neutral-g')};
-    --dnn-color-neutral-b: #{map-get($colors, 'neutral-b')};
-    --dnn-color-neutral-light: #{map-get($colors, 'neutral-light')};
-    --dnn-color-neutral-light-r: #{map-get($colors, 'neutral-light-r')};
-    --dnn-color-neutral-light-g: #{map-get($colors, 'neutral-light-g')};
-    --dnn-color-neutral-light-b: #{map-get($colors, 'neutral-light-b')};
-    --dnn-color-neutral-dark: #{map-get($colors, 'neutral-dark')};
-    --dnn-color-neutral-dark-r: #{map-get($colors, 'neutral-dark-r')};
-    --dnn-color-neutral-dark-g: #{map-get($colors, 'neutral-dark-g')};
-    --dnn-color-neutral-dark-b: #{map-get($colors, 'neutral-dark-b')};
-    --dnn-color-neutral-contrast: #{map-get($colors, 'neutral-contrast')};
-    --dnn-color-neutral-contrast-r: #{map-get($colors, 'neutral-contrast-r')};
-    --dnn-color-neutral-contrast-g: #{map-get($colors, 'neutral-contrast-g')};
-    --dnn-color-neutral-contrast-b: #{map-get($colors, 'neutral-contrast-b')};
-
-    --dnn-color-background: #{map-get($colors, 'background')};
-    --dnn-color-background-r: #{map-get($colors, 'background-r')};
-    --dnn-color-background-g: #{map-get($colors, 'background-g')};
-    --dnn-color-background-b: #{map-get($colors, 'background-b')};
-    --dnn-color-background-light: #{map-get($colors, 'background-light')};
-    --dnn-color-background-light-r: #{map-get($colors, 'background-light-r')};
-    --dnn-color-background-light-g: #{map-get($colors, 'background-light-g')};
-    --dnn-color-background-light-b: #{map-get($colors, 'background-light-b')};
-    --dnn-color-background-dark: #{map-get($colors, 'background-dark')};
-    --dnn-color-background-dark-r: #{map-get($colors, 'background-dark-r')};
-    --dnn-color-background-dark-g: #{map-get($colors, 'background-dark-g')};
-    --dnn-color-background-dark-b: #{map-get($colors, 'background-dark-b')};
-    --dnn-color-background-contrast: #{map-get($colors, 'background-contrast')};
-    --dnn-color-background-contrast-r: #{map-get($colors, 'background-contrast-r')};
-    --dnn-color-background-contrast-g: #{map-get($colors, 'background-contrast-g')};
-    --dnn-color-background-contrast-b: #{map-get($colors, 'background-contrast-b')};
-
-    --dnn-color-foreground: #{map-get($colors, 'foreground')};
-    --dnn-color-foreground-r: #{map-get($colors, 'foreground-r')};
-    --dnn-color-foreground-g: #{map-get($colors, 'foreground-g')};
-    --dnn-color-foreground-b: #{map-get($colors, 'foreground-b')};
-    --dnn-color-foreground-light: #{map-get($colors, 'foreground-light')};
-    --dnn-color-foreground-light-r: #{map-get($colors, 'foreground-light-r')};
-    --dnn-color-foreground-light-g: #{map-get($colors, 'foreground-light-g')};
-    --dnn-color-foreground-light-b: #{map-get($colors, 'foreground-light-b')};
-    --dnn-color-foreground-dark: #{map-get($colors, 'foreground-dark')};
-    --dnn-color-foreground-dark-r: #{map-get($colors, 'foreground-dark-r')};
-    --dnn-color-foreground-dark-g: #{map-get($colors, 'foreground-dark-g')};
-    --dnn-color-foreground-dark-b: #{map-get($colors, 'foreground-dark-b')};
-    --dnn-color-foreground-contrast: #{map-get($colors, 'foreground-contrast')};
-    --dnn-color-foreground-contrast-r: #{map-get($colors, 'foreground-contrast-r')};
-    --dnn-color-foreground-contrast-g: #{map-get($colors, 'foreground-contrast-g')};
-    --dnn-color-foreground-contrast-b: #{map-get($colors, 'foreground-contrast-b')};
-
-    --dnn-color-surface: #{map-get($colors, 'surface')};
-    --dnn-color-surface-r: #{map-get($colors, 'surface-r')};
-    --dnn-color-surface-g: #{map-get($colors, 'surface-g')};
-    --dnn-color-surface-b: #{map-get($colors, 'surface-b')};
-    --dnn-color-surface-light: #{map-get($colors, 'surface-light')};
-    --dnn-color-surface-light-r: #{map-get($colors, 'surface-light-r')};
-    --dnn-color-surface-light-g: #{map-get($colors, 'surface-light-g')};
-    --dnn-color-surface-light-b: #{map-get($colors, 'surface-light-b')};
-    --dnn-color-surface-dark: #{map-get($colors, 'surface-dark')};
-    --dnn-color-surface-dark-r: #{map-get($colors, 'surface-dark-r')};
-    --dnn-color-surface-dark-g: #{map-get($colors, 'surface-dark-g')};
-    --dnn-color-surface-dark-b: #{map-get($colors, 'surface-dark-b')};
-    --dnn-color-surface-contrast: #{map-get($colors, 'surface-contrast')};
-    --dnn-color-surface-contrast-r: #{map-get($colors, 'surface-contrast-r')};
-    --dnn-color-surface-contrast-g: #{map-get($colors, 'surface-contrast-g')};
-    --dnn-color-surface-contrast-b: #{map-get($colors, 'surface-contrast-b')};
-
-    --dnn-color-info: #{map-get($colors, 'info')};
-    --dnn-color-info-r: #{map-get($colors, 'info-r')};
-    --dnn-color-info-g: #{map-get($colors, 'info-g')};
-    --dnn-color-info-b: #{map-get($colors, 'info-b')};
-    --dnn-color-info-light: #{map-get($colors, 'info-light')};
-    --dnn-color-info-light-r: #{map-get($colors, 'info-light-r')};
-    --dnn-color-info-light-g: #{map-get($colors, 'info-light-g')};
-    --dnn-color-info-light-b: #{map-get($colors, 'info-light-b')};
-    --dnn-color-info-dark: #{map-get($colors, 'info-dark')};
-    --dnn-color-info-dark-r: #{map-get($colors, 'info-dark-r')};
-    --dnn-color-info-dark-g: #{map-get($colors, 'info-dark-g')};
-    --dnn-color-info-dark-b: #{map-get($colors, 'info-dark-b')};
-    --dnn-color-info-contrast: #{map-get($colors, 'info-contrast')};
-    --dnn-color-info-contrast-r: #{map-get($colors, 'info-contrast-r')};
-    --dnn-color-info-contrast-g: #{map-get($colors, 'info-contrast-g')};
-    --dnn-color-info-contrast-b: #{map-get($colors, 'info-contrast-b')};
-
-    --dnn-color-success: #{map-get($colors, 'success')};
-    --dnn-color-success-r: #{map-get($colors, 'success-r')};
-    --dnn-color-success-g: #{map-get($colors, 'success-g')};
-    --dnn-color-success-b: #{map-get($colors, 'success-b')};
-    --dnn-color-success-light: #{map-get($colors, 'success-light')};
-    --dnn-color-success-light-r: #{map-get($colors, 'success-light-r')};
-    --dnn-color-success-light-g: #{map-get($colors, 'success-light-g')};
-    --dnn-color-success-light-b: #{map-get($colors, 'success-light-b')};
-    --dnn-color-success-dark: #{map-get($colors, 'success-dark')};
-    --dnn-color-success-dark-r: #{map-get($colors, 'success-dark-r')};
-    --dnn-color-success-dark-g: #{map-get($colors, 'success-dark-g')};
-    --dnn-color-success-dark-b: #{map-get($colors, 'success-dark-b')};
-    --dnn-color-success-contrast: #{map-get($colors, 'success-contrast')};
-    --dnn-color-success-contrast-r: #{map-get($colors, 'success-contrast-r')};
-    --dnn-color-success-contrast-g: #{map-get($colors, 'success-contrast-g')};
-    --dnn-color-success-contrast-b: #{map-get($colors, 'success-contrast-b')};
-
-    --dnn-color-warning: #{map-get($colors, 'warning')};
-    --dnn-color-warning-r: #{map-get($colors, 'warning-r')};
-    --dnn-color-warning-g: #{map-get($colors, 'warning-g')};
-    --dnn-color-warning-b: #{map-get($colors, 'warning-b')};
-    --dnn-color-warning-light: #{map-get($colors, 'warning-light')};
-    --dnn-color-warning-light-r: #{map-get($colors, 'warning-light-r')};
-    --dnn-color-warning-light-g: #{map-get($colors, 'warning-light-g')};
-    --dnn-color-warning-light-b: #{map-get($colors, 'warning-light-b')};
-    --dnn-color-warning-dark: #{map-get($colors, 'warning-dark')};
-    --dnn-color-warning-dark-r: #{map-get($colors, 'warning-dark-r')};
-    --dnn-color-warning-dark-g: #{map-get($colors, 'warning-dark-g')};
-    --dnn-color-warning-dark-b: #{map-get($colors, 'warning-dark-b')};
-    --dnn-color-warning-contrast: #{map-get($colors, 'warning-contrast')};
-    --dnn-color-warning-contrast-r: #{map-get($colors, 'warning-contrast-r')};
-    --dnn-color-warning-contrast-g: #{map-get($colors, 'warning-contrast-g')};
-    --dnn-color-warning-contrast-b: #{map-get($colors, 'warning-contrast-b')};
-
-    --dnn-color-danger: #{map-get($colors, 'danger')};
-    --dnn-color-danger-r: #{map-get($colors, 'danger-r')};
-    --dnn-color-danger-g: #{map-get($colors, 'danger-g')};
-    --dnn-color-danger-b: #{map-get($colors, 'danger-b')};
-    --dnn-color-danger-light: #{map-get($colors, 'danger-light')};
-    --dnn-color-danger-light-r: #{map-get($colors, 'danger-light-r')};
-    --dnn-color-danger-light-g: #{map-get($colors, 'danger-light-g')};
-    --dnn-color-danger-light-b: #{map-get($colors, 'danger-light-b')};
-    --dnn-color-danger-dark: #{map-get($colors, 'danger-dark')};
-    --dnn-color-danger-dark-r: #{map-get($colors, 'danger-dark-r')};
-    --dnn-color-danger-dark-g: #{map-get($colors, 'danger-dark-g')};
-    --dnn-color-danger-dark-b: #{map-get($colors, 'danger-dark-b')};
-    --dnn-color-danger-contrast: #{map-get($colors, 'danger-contrast')};
-    --dnn-color-danger-contrast-r: #{map-get($colors, 'danger-contrast-r')};
-    --dnn-color-danger-contrast-g: #{map-get($colors, 'danger-contrast-g')};
-    --dnn-color-danger-contrast-b: #{map-get($colors, 'danger-contrast-b')};
-
-    --dnn-color-variation-opacity: #{map-get($colors, 'variation-opacity')};
-}
 
 // Color function
 @function color($color-name, $rgb: false) {
     @if($rgb) {
         @return var(--dnn-color-#{$color-name}-r) + ', ' + var(--dnn-color-#{$color-name}-g) + ', ' + var(--dnn-color-#{$color-name}-b);
     } @else {
-        @return var(--dnn-color-#{$color-name}, map-get($colors, $color-name));
+        @return map-get($colors, $color-name);
     }
 }
diff --git a/DNN Platform/Skins/Aperture/src/scss/variables/_controls.scss b/DNN Platform/Skins/Aperture/src/scss/variables/_controls.scss
index 567aa3d973c..7f4b87733a0 100644
--- a/DNN Platform/Skins/Aperture/src/scss/variables/_controls.scss	
+++ b/DNN Platform/Skins/Aperture/src/scss/variables/_controls.scss	
@@ -1,15 +1,9 @@
 $controls: (
-    "radius": 0,
-    "padding": .5rem,
+    "radius": var(--dnn-controls-radius, 0),
+    "padding": var(--dnn-controls-radius, 9px),
 );
 
-///TODO: Remove these in favor of those injected by DNN 10. The defaults in DNN 10 should match these.
-:root {
-    --dnn-controls-radius: #{map-get($controls, 'radius')};
-    --dnn-controls-padding: #{map-get($controls, 'padding')};
-}
-
 // Control function
 @function control($control-name) {
-    @return var(--dnn-controls-#{$control-name}, map-get($controls, $control-name));
+    @return map-get($controls, $control-name);
  }
diff --git a/DNN Platform/Skins/Aperture/src/scss/variables/_type.scss b/DNN Platform/Skins/Aperture/src/scss/variables/_type.scss
index a13411e9502..0f3c0b0b3fa 100644
--- a/DNN Platform/Skins/Aperture/src/scss/variables/_type.scss	
+++ b/DNN Platform/Skins/Aperture/src/scss/variables/_type.scss	
@@ -1,5 +1,5 @@
 $fonts: (
-    'base-font-size': 18,
+    'base-font-size': var(--dnn-base-font-size, 18px),
 );
 
 $var-base-font-size: #{map-get($fonts, 'base-font-size')};
@@ -9,12 +9,7 @@ $defaultlineheight: calc($var-base-font-size * 1.5);
 
 $ubuntu: 'Ubuntu', Helvetica, sans-serif;
 
-///TODO: Remove these in favor of those injected by DNN 10. The defaults in DNN 10 should match these.
-:root {
-    --dnn-base-font-size: #{map-get($fonts, 'base-font-size')};
-}
-
 // Font function
 @function font($font-name) {
-    @return var(--dnn-#{$font-name}, map-get($fonts, $font-name));
-}
+    @return map-get($fonts, $font-name);
+}
\ No newline at end of file
diff --git a/DNN Platform/Tests/DNN.Integration.Test.Framework/DNN.Integration.Test.Framework.csproj b/DNN Platform/Tests/DNN.Integration.Test.Framework/DNN.Integration.Test.Framework.csproj
index c5c0338f547..8cfa6613e83 100644
--- a/DNN Platform/Tests/DNN.Integration.Test.Framework/DNN.Integration.Test.Framework.csproj	
+++ b/DNN Platform/Tests/DNN.Integration.Test.Framework/DNN.Integration.Test.Framework.csproj	
@@ -158,7 +158,7 @@
     <None Include="packages.config" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DNN.Integration.Test.Framework/packages.config b/DNN Platform/Tests/DNN.Integration.Test.Framework/packages.config
index 1d6b88e4a0b..74d32d6a0eb 100644
--- a/DNN Platform/Tests/DNN.Integration.Test.Framework/packages.config	
+++ b/DNN Platform/Tests/DNN.Integration.Test.Framework/packages.config	
@@ -10,7 +10,7 @@
   <package id="Newtonsoft.Json" version="13.0.3" targetFramework="net48" />
   <package id="Newtonsoft.Json.Bson" version="1.0.2" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.AspNetCCP/DotNetNuke.Tests.AspNetCCP.csproj b/DNN Platform/Tests/DotNetNuke.Tests.AspNetCCP/DotNetNuke.Tests.AspNetCCP.csproj
index 21642750d52..484183c6ad8 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.AspNetCCP/DotNetNuke.Tests.AspNetCCP.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.AspNetCCP/DotNetNuke.Tests.AspNetCCP.csproj	
@@ -130,7 +130,7 @@
     <Service Include="{82A7F48D-3B50-4B1E-B82E-3ADA8210C358}" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.AspNetCCP/packages.config b/DNN Platform/Tests/DotNetNuke.Tests.AspNetCCP/packages.config
index 73ef5f2f5d4..8f2ab3d25b6 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.AspNetCCP/packages.config	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.AspNetCCP/packages.config	
@@ -3,7 +3,7 @@
   <package id="Castle.Core" version="5.1.1" targetFramework="net48" />
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Authentication/DotNetNuke.Tests.Authentication.csproj b/DNN Platform/Tests/DotNetNuke.Tests.Authentication/DotNetNuke.Tests.Authentication.csproj
index eee06749c58..3b5cf716b20 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Authentication/DotNetNuke.Tests.Authentication.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Authentication/DotNetNuke.Tests.Authentication.csproj	
@@ -149,7 +149,7 @@
     <None Include="packages.config" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Authentication/packages.config b/DNN Platform/Tests/DotNetNuke.Tests.Authentication/packages.config
index 73ef5f2f5d4..8f2ab3d25b6 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Authentication/packages.config	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Authentication/packages.config	
@@ -3,7 +3,7 @@
   <package id="Castle.Core" version="5.1.1" targetFramework="net48" />
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Content/DotNetNuke.Tests.Content.csproj b/DNN Platform/Tests/DotNetNuke.Tests.Content/DotNetNuke.Tests.Content.csproj
index 7b88b8019ea..de3d188752e 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Content/DotNetNuke.Tests.Content.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Content/DotNetNuke.Tests.Content.csproj	
@@ -170,7 +170,7 @@
     <None Include="packages.config" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Content/packages.config b/DNN Platform/Tests/DotNetNuke.Tests.Content/packages.config
index e7bab8031ae..c4f1ced115e 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Content/packages.config	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Content/packages.config	
@@ -7,7 +7,7 @@
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="Newtonsoft.Json" version="13.0.3" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Core/DotNetNuke.Tests.Core.csproj b/DNN Platform/Tests/DotNetNuke.Tests.Core/DotNetNuke.Tests.Core.csproj
index cedf82c07d3..4e2ab67d75a 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Core/DotNetNuke.Tests.Core.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Core/DotNetNuke.Tests.Core.csproj	
@@ -310,7 +310,7 @@
     </Content>
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Core/packages.config b/DNN Platform/Tests/DotNetNuke.Tests.Core/packages.config
index 5e9d0e4fc00..adf02b985a5 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Core/packages.config	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Core/packages.config	
@@ -6,7 +6,7 @@
   <package id="Microsoft.Extensions.DependencyInjection.Abstractions" version="8.0.0" targetFramework="net48" />
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="SharpZipLib" version="1.4.2" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Data/DotNetNuke.Tests.Data.csproj b/DNN Platform/Tests/DotNetNuke.Tests.Data/DotNetNuke.Tests.Data.csproj
index 7516ad03ed3..89a998b2cc8 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Data/DotNetNuke.Tests.Data.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Data/DotNetNuke.Tests.Data.csproj	
@@ -190,7 +190,7 @@
     <Service Include="{82A7F48D-3B50-4B1E-B82E-3ADA8210C358}" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Data/packages.config b/DNN Platform/Tests/DotNetNuke.Tests.Data/packages.config
index 86a3620530a..9a282434594 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Data/packages.config	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Data/packages.config	
@@ -7,7 +7,7 @@
   <package id="Microsoft.SqlServer.Compact" version="4.0.8876.1" targetFramework="net48" />
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Integration/DotNetNuke.Tests.Integration.csproj b/DNN Platform/Tests/DotNetNuke.Tests.Integration/DotNetNuke.Tests.Integration.csproj
index 773c1f73327..925a8845bc0 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Integration/DotNetNuke.Tests.Integration.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Integration/DotNetNuke.Tests.Integration.csproj	
@@ -199,7 +199,7 @@
     </ProjectReference>
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Integration/packages.config b/DNN Platform/Tests/DotNetNuke.Tests.Integration/packages.config
index 07a429b68ee..15379083a9c 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Integration/packages.config	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Integration/packages.config	
@@ -12,7 +12,7 @@
   <package id="Newtonsoft.Json.Bson" version="1.0.2" targetFramework="net48" />
   <package id="NSubstitute" version="5.3.0" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="PetaPoco.Compiled" version="6.0.524" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Mail/DotNetNuke.Tests.Mail.csproj b/DNN Platform/Tests/DotNetNuke.Tests.Mail/DotNetNuke.Tests.Mail.csproj
index 7c2756cc8f5..f70345b77f0 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Mail/DotNetNuke.Tests.Mail.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Mail/DotNetNuke.Tests.Mail.csproj	
@@ -140,7 +140,7 @@
     <Service Include="{82A7F48D-3B50-4B1E-B82E-3ADA8210C358}" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Mail/packages.config b/DNN Platform/Tests/DotNetNuke.Tests.Mail/packages.config
index 7db975b2093..2946f390721 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Mail/packages.config	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Mail/packages.config	
@@ -6,7 +6,7 @@
   <package id="Microsoft.Extensions.DependencyInjection.Abstractions" version="8.0.0" targetFramework="net48" />
   <package id="Moq" version="4.20.72" targetFramework="net472" />
   <package id="NUnit" version="4.2.2" targetFramework="net472" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net472" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net472" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net472" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net472" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net472" />
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Modules/DotNetNuke.Tests.Modules.csproj b/DNN Platform/Tests/DotNetNuke.Tests.Modules/DotNetNuke.Tests.Modules.csproj
index 05741e2e8d8..58c7f868002 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Modules/DotNetNuke.Tests.Modules.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Modules/DotNetNuke.Tests.Modules.csproj	
@@ -137,7 +137,7 @@
     <None Include="packages.config" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Modules/packages.config b/DNN Platform/Tests/DotNetNuke.Tests.Modules/packages.config
index 73ef5f2f5d4..8f2ab3d25b6 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Modules/packages.config	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Modules/packages.config	
@@ -3,7 +3,7 @@
   <package id="Castle.Core" version="5.1.1" targetFramework="net48" />
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.SourceGenerators/DotNetNuke.Tests.SourceGenerators.csproj b/DNN Platform/Tests/DotNetNuke.Tests.SourceGenerators/DotNetNuke.Tests.SourceGenerators.csproj
index c90a0110ff6..eb4c3472482 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.SourceGenerators/DotNetNuke.Tests.SourceGenerators.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.SourceGenerators/DotNetNuke.Tests.SourceGenerators.csproj	
@@ -20,11 +20,11 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Microsoft.CodeAnalysis.CSharp" Version="4.11.0" />
+        <PackageReference Include="Microsoft.CodeAnalysis.CSharp" Version="4.12.0" />
         <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.12.0" />
         <PackageReference Include="NUnit" Version="4.2.2" />
         <PackageReference Include="NUnit3TestAdapter" Version="4.6.0" />
-        <PackageReference Include="NUnit.Analyzers" Version="4.3.0">
+        <PackageReference Include="NUnit.Analyzers" Version="4.4.0">
           <PrivateAssets>all</PrivateAssets>
           <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
         </PackageReference>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.SourceGenerators/Snapshots/GeneratorTests.NotPartial_ReportsError.verified.txt b/DNN Platform/Tests/DotNetNuke.Tests.SourceGenerators/Snapshots/GeneratorTests.NotPartial_ReportsError.verified.txt
index 617398cec0d..8d0a1b1d227 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.SourceGenerators/Snapshots/GeneratorTests.NotPartial_ReportsError.verified.txt	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.SourceGenerators/Snapshots/GeneratorTests.NotPartial_ReportsError.verified.txt	
@@ -1,16 +1,29 @@
 {
   Diagnostics: [
     {
-      Id: DNN1001,
-      Title: Must be partial,
-      Severity: Error,
-      WarningLevel: 0,
-      Location: : (4,0)-(7,1),
-      Description: ,
-      HelpLink: ,
-      MessageFormat: The member that the DnnDeprecated attribute is applied to must be partial,
+      Location: /*
+
+[DnnDeprecated(10, 0, 0, "Please resolve B via dependency injection.")]
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+public class D
+^^^^^^^^^^^^^^
+{
+^
+}
+^
+
+*/
+ : (4,0)-(7,1),
       Message: The member that the DnnDeprecated attribute is applied to must be partial,
-      Category: Usage
+      Severity: Error,
+      Descriptor: {
+        Id: DNN1001,
+        Title: Must be partial,
+        MessageFormat: The member that the DnnDeprecated attribute is applied to must be partial,
+        Category: Usage,
+        DefaultSeverity: Error,
+        IsEnabledByDefault: true
+      }
     }
   ]
 }
\ No newline at end of file
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.UI/DotNetNuke.Tests.UI.csproj b/DNN Platform/Tests/DotNetNuke.Tests.UI/DotNetNuke.Tests.UI.csproj
index 8e87e9a70ee..5a1f5b64231 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.UI/DotNetNuke.Tests.UI.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.UI/DotNetNuke.Tests.UI.csproj	
@@ -137,7 +137,7 @@
     <None Include="packages.config" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.UI/packages.config b/DNN Platform/Tests/DotNetNuke.Tests.UI/packages.config
index 73ef5f2f5d4..8f2ab3d25b6 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.UI/packages.config	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.UI/packages.config	
@@ -3,7 +3,7 @@
   <package id="Castle.Core" version="5.1.1" targetFramework="net48" />
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Urls/DotNetNuke.Tests.Urls.csproj b/DNN Platform/Tests/DotNetNuke.Tests.Urls/DotNetNuke.Tests.Urls.csproj
index c6c8a0aaa48..365aad96f59 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Urls/DotNetNuke.Tests.Urls.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Urls/DotNetNuke.Tests.Urls.csproj	
@@ -253,7 +253,7 @@
     <Service Include="{82A7F48D-3B50-4B1E-B82E-3ADA8210C358}" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Urls/packages.config b/DNN Platform/Tests/DotNetNuke.Tests.Urls/packages.config
index c84ce6b9d2f..fe8f01d00bf 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Urls/packages.config	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Urls/packages.config	
@@ -8,7 +8,7 @@
   <package id="Microsoft.NETFramework.ReferenceAssemblies.net48" version="1.0.3" targetFramework="net48" developmentDependency="true" />
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="PetaPoco.Compiled" version="6.0.524" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Utilities/DotNetNuke.Tests.Utilities.csproj b/DNN Platform/Tests/DotNetNuke.Tests.Utilities/DotNetNuke.Tests.Utilities.csproj
index e3768db40f6..7e59834d0ad 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Utilities/DotNetNuke.Tests.Utilities.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Utilities/DotNetNuke.Tests.Utilities.csproj	
@@ -192,7 +192,7 @@
     <None Include="packages.config" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Utilities/packages.config b/DNN Platform/Tests/DotNetNuke.Tests.Utilities/packages.config
index 633c5e2f5aa..efcdc0e79b2 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Utilities/packages.config	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Utilities/packages.config	
@@ -11,7 +11,7 @@
   <package id="Microsoft.SourceLink.GitHub" version="8.0.0" targetFramework="net48" developmentDependency="true" />
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="PetaPoco.Compiled" version="6.0.524" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Web.Mvc/DotNetNuke.Tests.Web.Mvc.csproj b/DNN Platform/Tests/DotNetNuke.Tests.Web.Mvc/DotNetNuke.Tests.Web.Mvc.csproj
index 47971f7093e..f1243dc8649 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Web.Mvc/DotNetNuke.Tests.Web.Mvc.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Web.Mvc/DotNetNuke.Tests.Web.Mvc.csproj	
@@ -180,7 +180,7 @@
     <Service Include="{82A7F48D-3B50-4B1E-B82E-3ADA8210C358}" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Web.Mvc/packages.config b/DNN Platform/Tests/DotNetNuke.Tests.Web.Mvc/packages.config
index c835c566fd2..5cd0c33e901 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Web.Mvc/packages.config	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Web.Mvc/packages.config	
@@ -11,7 +11,7 @@
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="Newtonsoft.Json" version="13.0.3" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Web/DotNetNuke.Tests.Web.csproj b/DNN Platform/Tests/DotNetNuke.Tests.Web/DotNetNuke.Tests.Web.csproj
index 621ef0a1259..26898d74ff4 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Web/DotNetNuke.Tests.Web.csproj	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Web/DotNetNuke.Tests.Web.csproj	
@@ -198,7 +198,7 @@
     <Service Include="{82A7F48D-3B50-4B1E-B82E-3ADA8210C358}" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/DNN Platform/Tests/DotNetNuke.Tests.Web/packages.config b/DNN Platform/Tests/DotNetNuke.Tests.Web/packages.config
index afabe0df0ef..88c4cd295dd 100644
--- a/DNN Platform/Tests/DotNetNuke.Tests.Web/packages.config	
+++ b/DNN Platform/Tests/DotNetNuke.Tests.Web/packages.config	
@@ -12,7 +12,7 @@
   <package id="Newtonsoft.Json" version="13.0.3" targetFramework="net48" />
   <package id="Newtonsoft.Json.Bson" version="1.0.2" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />
diff --git a/DNN Platform/Website/Default.aspx b/DNN Platform/Website/Default.aspx
index b8d61386067..4666be4424b 100644
--- a/DNN Platform/Website/Default.aspx	
+++ b/DNN Platform/Website/Default.aspx	
@@ -13,7 +13,6 @@
     <meta id="MetaGenerator" runat="Server" name="generator" Visible="False"/>
     <meta id="MetaAuthor" runat="Server" name="author" Visible="False"/>
     <meta id="MetaRobots" runat="server" name="robots" Visible="False" />
-    <asp:Literal runat="server" id="CssCustomProperties"></asp:Literal>
     <asp:PlaceHolder runat="server" ID="ClientDependencyHeadCss"></asp:PlaceHolder>
     <asp:PlaceHolder runat="server" ID="ClientDependencyHeadJs"></asp:PlaceHolder>
     <asp:placeholder id="CSS" runat="server" />
diff --git a/DNN Platform/Website/Default.aspx.cs b/DNN Platform/Website/Default.aspx.cs
index 27207bee24d..cbba8c7ff35 100644
--- a/DNN Platform/Website/Default.aspx.cs	
+++ b/DNN Platform/Website/Default.aspx.cs	
@@ -615,8 +615,6 @@ private void InitializePage()
                 }
             }
 
-            this.CssCustomProperties.Text = this.GenerateCssCustomProperties();
-
             // NonProduction Label Injection
             if (this.NonProductionVersion() && Host.DisplayBetaNotice && !UrlUtils.InPopUp())
             {
@@ -625,6 +623,10 @@ private void InitializePage()
                 this.Title += versionString;
             }
 
+            // register css variables
+            var cssVariablesStyleSheet = this.GetCssVariablesStylesheet();
+            ClientResourceManager.RegisterStyleSheet(this, cssVariablesStyleSheet, FileOrder.Css.DefaultCss);
+
             // register the custom stylesheet of current page
             if (this.PortalSettings.ActiveTab.TabSettings.ContainsKey("CustomStylesheet") && !string.IsNullOrEmpty(this.PortalSettings.ActiveTab.TabSettings["CustomStylesheet"].ToString()))
             {
@@ -656,111 +658,6 @@ private void InitializePage()
             }
         }
 
-        private string GenerateCssCustomProperties()
-        {
-            var cacheKey = string.Format(DataCache.PortalStylesCacheKey, this.PortalSettings.PortalId);
-            var cacheArgs = new CacheItemArgs(
-                cacheKey,
-                DataCache.PortalStylesCacheTimeOut,
-                DataCache.PortalStylesCachePriority,
-                this.PortalSettings.GetStyles());
-            return DataCache.GetCachedData<string>(
-                cacheArgs,
-                static args =>
-                {
-                    var styles = (IPortalStyles)args.Params[0];
-                    return $$"""
-                             <style type="text/css">
-                                 :root {
-                                     --dnn-color-primary: #{{styles.ColorPrimary.MinifiedHex}};
-                                     --dnn-color-primary-light: #{{styles.ColorPrimaryLight.MinifiedHex}};
-                                     --dnn-color-primary-dark: #{{styles.ColorPrimaryDark.MinifiedHex}};
-                                     --dnn-color-primary-contrast: #{{styles.ColorPrimaryContrast.MinifiedHex}};
-                                     --dnn-color-primary-r: {{styles.ColorPrimary.Red}};
-                                     --dnn-color-primary-g: {{styles.ColorPrimary.Green}};
-                                     --dnn-color-primary-b: {{styles.ColorPrimary.Blue}};
-                                     
-                                     --dnn-color-secondary: #{{styles.ColorSecondary.MinifiedHex}};
-                                     --dnn-color-secondary-light: #{{styles.ColorSecondaryLight.MinifiedHex}};
-                                     --dnn-color-secondary-dark: #{{styles.ColorSecondaryDark.MinifiedHex}};
-                                     --dnn-color-secondary-contrast: #{{styles.ColorSecondaryContrast.MinifiedHex}};
-                                     --dnn-color-secondary-r: {{styles.ColorSecondary.Red}};
-                                     --dnn-color-secondary-g: {{styles.ColorSecondary.Green}};
-                                     --dnn-color-secondary-b: {{styles.ColorSecondary.Blue}};
-                                     
-                                     --dnn-color-tertiary: #{{styles.ColorTertiary.MinifiedHex}};
-                                     --dnn-color-tertiary-light: #{{styles.ColorTertiaryLight.MinifiedHex}};
-                                     --dnn-color-tertiary-dark: #{{styles.ColorTertiaryDark.MinifiedHex}};
-                                     --dnn-color-tertiary-contrast: #{{styles.ColorTertiaryContrast.MinifiedHex}};
-                                     --dnn-color-tertiary-r: {{styles.ColorTertiary.Red}};
-                                     --dnn-color-tertiary-g: {{styles.ColorTertiary.Green}};
-                                     --dnn-color-tertiary-b: {{styles.ColorTertiary.Blue}};
-                                     
-                                     --dnn-color-neutral: #{{styles.ColorNeutral.MinifiedHex}};
-                                     --dnn-color-neutral-light: #{{styles.ColorNeutralLight.MinifiedHex}};
-                                     --dnn-color-neutral-dark: #{{styles.ColorNeutralDark.MinifiedHex}};
-                                     --dnn-color-neutral-contrast: #{{styles.ColorNeutralContrast.MinifiedHex}};
-                                     --dnn-color-neutral-r: {{styles.ColorNeutral.Red}};
-                                     --dnn-color-neutral-g: {{styles.ColorNeutral.Green}};
-                                     --dnn-color-neutral-b: {{styles.ColorNeutral.Blue}};
-                                     
-                                     --dnn-color-background: #{{styles.ColorBackground.MinifiedHex}};
-                                     --dnn-color-background-light: #{{styles.ColorBackgroundLight.MinifiedHex}};
-                                     --dnn-color-background-dark: #{{styles.ColorBackgroundDark.MinifiedHex}};
-                                     --dnn-color-background-contrast: #{{styles.ColorBackgroundContrast.MinifiedHex}};
-                                     --dnn-color-background-r: {{styles.ColorBackground.Red}};
-                                     --dnn-color-background-g: {{styles.ColorBackground.Green}};
-                                     --dnn-color-background-b: {{styles.ColorBackground.Blue}};
-                                     
-                                     --dnn-color-foreground: #{{styles.ColorForeground.MinifiedHex}};
-                                     --dnn-color-foreground-light: #{{styles.ColorForegroundLight.MinifiedHex}};
-                                     --dnn-color-foreground-dark: #{{styles.ColorForegroundDark.MinifiedHex}};
-                                     --dnn-color-foreground-contrast: #{{styles.ColorForegroundContrast.MinifiedHex}};
-                                     --dnn-color-foreground-r: {{styles.ColorForeground.Red}};
-                                     --dnn-color-foreground-g: {{styles.ColorForeground.Green}};
-                                     --dnn-color-foreground-b: {{styles.ColorForeground.Blue}};
-             
-                                     --dnn-color-info: #{{styles.ColorInfo.MinifiedHex}};
-                                     --dnn-color-info-light: #{{styles.ColorInfoLight.MinifiedHex}};
-                                     --dnn-color-info-dark: #{{styles.ColorInfoDark.MinifiedHex}};
-                                     --dnn-color-info-contrast: #{{styles.ColorInfoContrast.MinifiedHex}};
-                                     --dnn-color-info-r: {{styles.ColorInfo.Red}};
-                                     --dnn-color-info-g: {{styles.ColorInfo.Green}};
-                                     --dnn-color-info-b: {{styles.ColorInfo.Blue}};
-             
-                                     --dnn-color-success: #{{styles.ColorSuccess.MinifiedHex}};
-                                     --dnn-color-success-light: #{{styles.ColorSuccessLight.MinifiedHex}};
-                                     --dnn-color-success-dark: #{{styles.ColorSuccessDark.MinifiedHex}};
-                                     --dnn-color-success-contrast: #{{styles.ColorSuccessContrast.MinifiedHex}};
-                                     --dnn-color-success-r: {{styles.ColorSuccess.Red}};
-                                     --dnn-color-success-g: {{styles.ColorSuccess.Green}};
-                                     --dnn-color-success-b: {{styles.ColorSuccess.Blue}};
-             
-                                     --dnn-color-warning: #{{styles.ColorWarning.MinifiedHex}};
-                                     --dnn-color-warning-light: #{{styles.ColorWarningLight.MinifiedHex}};
-                                     --dnn-color-warning-dark: #{{styles.ColorWarningDark.MinifiedHex}};
-                                     --dnn-color-warning-contrast: #{{styles.ColorWarningContrast.MinifiedHex}};
-                                     --dnn-color-warning-r: {{styles.ColorWarning.Red}};
-                                     --dnn-color-warning-g: {{styles.ColorWarning.Green}};
-                                     --dnn-color-warning-b: {{styles.ColorWarning.Blue}};
-             
-                                     --dnn-color-danger: #{{styles.ColorDanger.MinifiedHex}};
-                                     --dnn-color-danger-light: #{{styles.ColorDangerLight.MinifiedHex}};
-                                     --dnn-color-danger-dark: #{{styles.ColorDangerDark.MinifiedHex}};
-                                     --dnn-color-danger-contrast: #{{styles.ColorDangerContrast.MinifiedHex}};
-                                     --dnn-color-danger-r: {{styles.ColorDanger.Red}};
-                                     --dnn-color-danger-g: {{styles.ColorDanger.Green}};
-                                     --dnn-color-danger-b: {{styles.ColorDanger.Blue}};
-             
-                                     --dnn-controls-radius: {{styles.ControlsRadius}}px;
-                                     --dnn-controls-padding: {{styles.ControlsPadding}}px;
-                                     --dnn-base-font-size: {{styles.BaseFontSize}}px;
-                                 }
-                             </style>
-                             """;
-                });
-        }
-
         /// <summary>
         /// Look for skin level doctype configuration file, and inject the value into the top of default.aspx
         /// when no configuration if found, the doctype for versions prior to 4.4 is used to maintain backwards compatibility with existing skins.
@@ -862,5 +759,41 @@ private IFileInfo GetPageStylesheetInfoCallBack(CacheItemArgs itemArgs)
             var styleSheet = itemArgs.Params[0].ToString();
             return FileManager.Instance.GetFile(this.PortalSettings.PortalId, styleSheet);
         }
+
+        private string GetCssVariablesStylesheet()
+        {
+            var cacheKey = string.Format(DataCache.PortalStylesCacheKey, this.PortalSettings.PortalId);
+            var cacheArgs = new CacheItemArgs(
+                cacheKey,
+                DataCache.PortalCacheTimeOut,
+                DataCache.PortalCachePriority,
+                this.PortalSettings.GetStyles());
+            string filePath = CBO.GetCachedObject<string>(cacheArgs, this.GetCssVariablesStylesheetCallback);
+            return filePath;
+        }
+
+        private string GetCssVariablesStylesheetCallback(CacheItemArgs args)
+        {
+            var portalStyles = (PortalStyles)args.Params[0];
+
+            var directory = this.PortalSettings.HomeSystemDirectoryMapPath;
+            if (!Directory.Exists(directory))
+            {
+                Directory.CreateDirectory(directory);
+            }
+
+            var webPath = $"{this.PortalSettings.HomeSystemDirectory}{portalStyles.FileName}";
+
+            var physicalPath = $"{directory}{portalStyles.FileName}";
+            if (File.Exists(physicalPath))
+            {
+                return webPath;
+            }
+
+            var styles = portalStyles.ToString();
+            File.WriteAllText(physicalPath, styles);
+
+            return webPath;
+        }
     }
 }
diff --git a/DNN Platform/Website/Default.aspx.designer.cs b/DNN Platform/Website/Default.aspx.designer.cs
index b48ef15a5aa..ff9f8a29bb2 100644
--- a/DNN Platform/Website/Default.aspx.designer.cs	
+++ b/DNN Platform/Website/Default.aspx.designer.cs	
@@ -113,15 +113,6 @@ public partial class DefaultPage
         /// </remarks>
         protected global::System.Web.UI.HtmlControls.HtmlMeta MetaRobots;
 
-        /// <summary>
-        /// CssCustomProperties control.
-        /// </summary>
-        /// <remarks>
-        /// Auto-generated field.
-        /// To modify move field declaration from designer file to code-behind file.
-        /// </remarks>
-        protected global::System.Web.UI.WebControls.Literal CssCustomProperties;
-
         /// <summary>
         /// ClientDependencyHeadCss control.
         /// </summary>
diff --git a/DNN Platform/Website/Portals/_default/Default Website.template b/DNN Platform/Website/Portals/_default/Default Website.template
index 78a8d37c732..7c2d3f0ca1e 100644
--- a/DNN Platform/Website/Portals/_default/Default Website.template	
+++ b/DNN Platform/Website/Portals/_default/Default Website.template	
@@ -542,7 +542,7 @@
               <visibility>Maximized</visibility>
               <cultureCode />
               <content type="DNNHTML" version="10.00.00">
-                <![CDATA[&lt;htmltext&gt;&lt;content&gt;&lt;![CDATA[&amp;lt;div class=&amp;quot;aperture-bg-neutral&amp;quot;&amp;gt;
+                <![CDATA[&lt;htmltext&gt;&lt;content&gt;&lt;![CDATA[&amp;lt;div class=&amp;quot;aperture-bg-neutral-light&amp;quot;&amp;gt;
                     &amp;lt;div class=&amp;quot;aperture-container&amp;quot;&amp;gt;
                     &amp;lt;div class=&amp;quot;aperture-align-items-center aperture-d-flex aperture-flex-column aperture-flex-lg-row aperture-my-5&amp;quot;&amp;gt;
                     &amp;lt;div class=&amp;quot;aperture-me-lg-5 aperture-w-100 aperture-w-lg-75 apeture-me-0&amp;quot;&amp;gt;
@@ -1302,7 +1302,7 @@
               <cachemethod>MemoryModuleCachingProvider</cachemethod>
               <cachetime>0</cachetime>
               <color />
-              <containersrc>[G]Containers/Apterture/none.ascx</containersrc>
+              <containersrc>[G]Containers/Aperture/none.ascx</containersrc>
               <displayprint>false</displayprint>
               <displaysyndicate>false</displaysyndicate>
               <displaytitle>true</displaytitle>
diff --git a/DNN Platform/Website/Portals/_default/Default Website.template.en-US.resx b/DNN Platform/Website/Portals/_default/Default Website.template.en-US.resx
index d91ba156c1c..684a22a0781 100644
--- a/DNN Platform/Website/Portals/_default/Default Website.template.en-US.resx	
+++ b/DNN Platform/Website/Portals/_default/Default Website.template.en-US.resx	
@@ -1,507 +1,507 @@
-<?xml version="1.0" encoding="utf-8"?>
-<root>
-  <!-- 
-    Microsoft ResX Schema 
-    
-    Version 2.0
-    
-    The primary goals of this format is to allow a simple XML format 
-    that is mostly human readable. The generation and parsing of the 
-    various data types are done through the TypeConverter classes 
-    associated with the data types.
-    
-    Example:
-    
-    ... ado.net/XML headers & schema ...
-    <resheader name="resmimetype">text/microsoft-resx</resheader>
-    <resheader name="version">2.0</resheader>
-    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
-    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
-    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
-    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
-    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
-        <value>[base64 mime encoded serialized .NET Framework object]</value>
-    </data>
-    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
-        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
-        <comment>This is a comment</comment>
-    </data>
-                
-    There are any number of "resheader" rows that contain simple 
-    name/value pairs.
-    
-    Each data row contains a name, and value. The row also contains a 
-    type or mimetype. Type corresponds to a .NET class that support 
-    text/value conversion through the TypeConverter architecture. 
-    Classes that don't support this are serialized and stored with the 
-    mimetype set.
-    
-    The mimetype is used for serialized objects, and tells the 
-    ResXResourceReader how to depersist the object. This is currently not 
-    extensible. For a given mimetype the value must be set accordingly:
-    
-    Note - application/x-microsoft.net.object.binary.base64 is the format 
-    that the ResXResourceWriter will generate, however the reader can 
-    read any of the formats listed below.
-    
-    mimetype: application/x-microsoft.net.object.binary.base64
-    value   : The object must be serialized with 
-            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
-            : and then encoded with base64 encoding.
-    
-    mimetype: application/x-microsoft.net.object.soap.base64
-    value   : The object must be serialized with 
-            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
-            : and then encoded with base64 encoding.
-
-    mimetype: application/x-microsoft.net.object.bytearray.base64
-    value   : The object must be serialized into a byte array 
-            : using a System.ComponentModel.TypeConverter
-            : and then encoded with base64 encoding.
-    -->
-  <xsd:schema id="root" xmlns="" xmlns:xsd="https://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
-    <xsd:import namespace="https://www.w3.org/XML/1998/namespace" />
-    <xsd:element name="root" msdata:IsDataSet="true">
-      <xsd:complexType>
-        <xsd:choice maxOccurs="unbounded">
-          <xsd:element name="metadata">
-            <xsd:complexType>
-              <xsd:sequence>
-                <xsd:element name="value" type="xsd:string" minOccurs="0" />
-              </xsd:sequence>
-              <xsd:attribute name="name" use="required" type="xsd:string" />
-              <xsd:attribute name="type" type="xsd:string" />
-              <xsd:attribute name="mimetype" type="xsd:string" />
-              <xsd:attribute ref="xml:space" />
-            </xsd:complexType>
-          </xsd:element>
-          <xsd:element name="assembly">
-            <xsd:complexType>
-              <xsd:attribute name="alias" type="xsd:string" />
-              <xsd:attribute name="name" type="xsd:string" />
-            </xsd:complexType>
-          </xsd:element>
-          <xsd:element name="data">
-            <xsd:complexType>
-              <xsd:sequence>
-                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
-                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
-              </xsd:sequence>
-              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
-              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
-              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
-              <xsd:attribute ref="xml:space" />
-            </xsd:complexType>
-          </xsd:element>
-          <xsd:element name="resheader">
-            <xsd:complexType>
-              <xsd:sequence>
-                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
-              </xsd:sequence>
-              <xsd:attribute name="name" type="xsd:string" use="required" />
-            </xsd:complexType>
-          </xsd:element>
-        </xsd:choice>
-      </xsd:complexType>
-    </xsd:element>
-  </xsd:schema>
-  <resheader name="resmimetype">
-    <value>text/microsoft-resx</value>
-  </resheader>
-  <resheader name="version">
-    <value>2.0</value>
-  </resheader>
-  <resheader name="reader">
-    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
-  </resheader>
-  <resheader name="writer">
-    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
-  </resheader>
-  <data name="PortalDescription.Text" xml:space="preserve">
-    <value>Default Website Template</value>
-  </data>
-  <data name="Setting.DefaultLanguage.Text" xml:space="preserve">
-    <value>en-US</value>
-  </data>
-  <data name="Setting.FooterText.Text" xml:space="preserve">
-    <value>Copyright [year] by My Website</value>
-  </data>
-  <data name="Tab.Home.Content.Text" xml:space="preserve">
-    <value>Home</value>
-  </data>
-  <data name="Tab.Home.Name.Text" xml:space="preserve">
-    <value>Home</value>
-  </data>
-  <data name="Tab.Home.Title.Text" xml:space="preserve">
-    <value>Home</value>
-  </data>
-  <data name="Tab.Home.BannerPane.Module.HomeBanner.Title.Text" xml:space="preserve">
-    <value>Home Banner</value>
-  </data>
-  <data name="Tab.Home.BannerPane.Module.HomeBanner.Content.H2.Text" xml:space="preserve">
-    <value>Your installation was successful!</value>
-  </data>
-  <data name="Tab.Home.BannerPane.Module.HomeBanner.Content.H5.Text" xml:space="preserve">
-    <value>OPEN * SCALABLE * EXTENSIBLE * SECURE</value>
-  </data>
-  <data name="Tab.Home.BannerPane.Module.HomeBanner.Content.Lead.Text" xml:space="preserve">
-    <value>Welcome to your new DNN installation!  DNN makes it easy to build your dream web solution.  From its open-source accessibility to its scalable architecture and extensible framework, you can depend on security throughout.  DNN checks all the boxes for small, medium, large, and enterprise businesses alike!</value>
-  </data>
-  <data name="Tab.Home.BannerPane.Module.HomeBanner.Content.Image.Alt.Text" xml:space="preserve">
-    <value>DNN Seal</value>
-  </data>
-  <data name="Tab.Home.BannerPane.Module.HomeBanner.Content.Image.Title.Text" xml:space="preserve">
-    <value>DNN Seal</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Title.Text" xml:space="preserve">
-    <value>Home Content</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Build.DivId.Text" xml:space="preserve">
-    <value>build</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Build.H2.Text" xml:space="preserve">
-    <value>Start Building</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Build.Lead.Text" xml:space="preserve">
-    <value>Out of the box, you have great tools at your fingertips to start managing content. To the left, you&#39;ll see the Persona Bar. Here is where you can manage Pages, Users, Roles, Assets, Themes, Sites, and much more. Go ahead and hover over CONTENT, MANAGE, and SETTINGS to start exploring.</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.DivId.Text" xml:space="preserve">
-    <value>learn</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.H2.Text" xml:space="preserve">
-    <value>Learn DNN</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Lead.Text" xml:space="preserve">
-    <value>Whether you have just inherited a DNN site in your job, or you are a seasoned DNN veteran, there's always more to learn. DNN has been around for decades and is extremely robust. Learn more. Do more.</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Administrators.Image.Alt.Text" xml:space="preserve">
-    <value>Administrators Icon</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Administrators.Image.Title.Text" xml:space="preserve">
-    <value>Administrators Icon</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Administrators.H4.Text" xml:space="preserve">
-    <value>Administrators</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Administrators.Div.Text" xml:space="preserve">
-    <value>Find documentation for both Administrators and Super Users (aka, Host Users). Administrators and Super Users will handle tasks such as installing &amp; upgrading DNN, configuring permissions and security roles, updating site settings, installing and upgrading extensions, and much more.</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Administrators.Button.Text" xml:space="preserve">
-    <value>Learn More</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Developers.Image.Alt.Text" xml:space="preserve">
-    <value>Developers Icon</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Developers.Image.Title.Text" xml:space="preserve">
-    <value>Developers Icon</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Developers.H4.Text" xml:space="preserve">
-    <value>Developers</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Developers.Div.Text" xml:space="preserve">
-    <value>DNN has an open API and many extension points. Developers can create custom DNN extensions using various development approaches. The content in this section will help you get started and learn more about DNN's extensibility model and applicable development patterns.</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Developers.Button.Text" xml:space="preserve">
-    <value>Learn More</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Designers.Image.Alt.Text" xml:space="preserve">
-    <value>Designers Icon</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Designers.Image.Title.Text" xml:space="preserve">
-    <value>Designers Icon</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Designers.H4.Text" xml:space="preserve">
-    <value>Designers</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Designers.Div.Text" xml:space="preserve">
-    <value>Designers can achieve any look and feel desired with DNN. The content in this section will help designers and front-end developers alike understand the process for creating themes (formerly referred to as "skins") within DNN. If you can design it in Photoshop you can create it as a DNN theme!</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Designers.Button.Text" xml:space="preserve">
-    <value>Learn More</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.DivId.Text" xml:space="preserve">
-    <value>extend</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.Image.Alt.Text" xml:space="preserve">
-    <value>DNN Extensions Icon</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.Image.Title.Text" xml:space="preserve">
-    <value>DNN Extensions Icon</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.H2.Text" xml:space="preserve">
-    <value>Extend DNN</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.H4.Text" xml:space="preserve">
-    <value>Themes &amp; Modules</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.Lead.Text" xml:space="preserve">
-    <value>There are so many open source and commercial extensions for DNN, just waiting for you to explore and use for your next awesome DNN creation! Be sure to check them out and see what meets your project needs. Also, don't forget that you can easily create your own custom extensions, or work with an awesome and trusted provider in the DNN ecosystem to do this for you.</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.PrimaryButton.Text" xml:space="preserve">
-    <value>Open Source Extensions</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.SecondaryButton.Text" xml:space="preserve">
-    <value>Visit DNN Store</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DivId.Text" xml:space="preserve">
-    <value>participate</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.H2.Text" xml:space="preserve">
-    <value>Participate in the DNN Community</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.Lead.Text" xml:space="preserve">
-    <value>No matter your persona, our community welcomes you and encourages you to participate. Not only can you receive and provide help, you may just make some lifetime friends in the process.</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.SlackImage.Alt.Text" xml:space="preserve">
-    <value>Slack Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.SlackImage.Title.Text" xml:space="preserve">
-    <value>Slack Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DiscordImage.Alt.Text" xml:space="preserve">
-    <value>Discord Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DiscordImage.Title.Text" xml:space="preserve">
-    <value>Discord Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.GitHubImage.Alt.Text" xml:space="preserve">
-    <value>GitHub Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.GitHubImage.Title.Text" xml:space="preserve">
-    <value>GitHub Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnCommunityImage.Alt.Text" xml:space="preserve">
-    <value>DNN Community Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnCommunityImage.Title.Text" xml:space="preserve">
-    <value>DNN Community Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnForumsImage.Alt.Text" xml:space="preserve">
-    <value>DNN Forums Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnForumsImage.Title.Text" xml:space="preserve">
-    <value>DNN Forums Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnBlogsImage.Alt.Text" xml:space="preserve">
-    <value>DNN Blogs Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnBlogsImage.Title.Text" xml:space="preserve">
-    <value>DNN Blogs Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnDocsImage.Alt.Text" xml:space="preserve">
-    <value>DNN Docs Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnDocsImage.Title.Text" xml:space="preserve">
-    <value>DNN Docs Logo White</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnCommunityAltImage.Alt.Text" xml:space="preserve">
-    <value>DNN Community Alt Logo</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnCommunityAltImage.Title.Text" xml:space="preserve">
-    <value>DNN Community Alt Logo</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.EventsImage.Alt.Text" xml:space="preserve">
-    <value>EVENTS</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.EventsImage.Title.Text" xml:space="preserve">
-    <value>EVENTS</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnConnectGroupPhotoImage.Alt.Text" xml:space="preserve">
-    <value>DNN Connect Group Photo</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnConnectGroupPhotoImage.Title.Text" xml:space="preserve">
-    <value>DNN Connect Group Photo</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnSummitGroupPhotoImage.Alt.Text" xml:space="preserve">
-    <value>DNN Summit Group Photo</value>
-  </data>
-  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnSummitGroupPhotoImage.Title.Text" xml:space="preserve">
-    <value>DNN Summit Group Photo</value>
-  </data>
-  <data name="Tab.Home.FooterPane.Module.FooterContent.Title.Text" xml:space="preserve">
-    <value>Footer Content</value>
-  </data>
-  <data name="Tab.Home.FooterPane.Module.FooterContent.Content.DnnFooterLogoImage.Alt.Text" xml:space="preserve">
-    <value>DNN Footer Logo</value>
-  </data>
-  <data name="Tab.Home.FooterPane.Module.FooterContent.Content.DnnFooterLogoImage.Title.Text" xml:space="preserve">
-    <value>DNN Footer Logo</value>
-  </data>
-  <data name="Tab.Build.Content.Text" xml:space="preserve">
-    <value>Build</value>
-  </data>
-  <data name="Tab.Build.Name.Text" xml:space="preserve">
-    <value>Build</value>
-  </data>
-  <data name="Tab.Build.Title.Text" xml:space="preserve">
-    <value>Build</value>
-  </data>
-  <data name="Tab.Build.Url.Text" xml:space="preserve">
-    <value>/#build</value>
-  </data>
-  <data name="Tab.Learn.Content.Text" xml:space="preserve">
-    <value>Learn</value>
-  </data>
-  <data name="Tab.Learn.Name.Text" xml:space="preserve">
-    <value>Learn</value>
-  </data>
-  <data name="Tab.Learn.Title.Text" xml:space="preserve">
-    <value>Learn</value>
-  </data>
-  <data name="Tab.Learn.Url.Text" xml:space="preserve">
-    <value>/#learn</value>
-  </data>
-  <data name="Tab.Extend.Content.Text" xml:space="preserve">
-    <value>Extend</value>
-  </data>
-  <data name="Tab.Extend.Name.Text" xml:space="preserve">
-    <value>Extend</value>
-  </data>
-  <data name="Tab.Extend.Title.Text" xml:space="preserve">
-    <value>Extend</value>
-  </data>
-  <data name="Tab.Extend.Url.Text" xml:space="preserve">
-    <value>/#extend</value>
-  </data>
-  <data name="Tab.Participate.Content.Text" xml:space="preserve">
-    <value>Participate!</value>
-  </data>
-  <data name="Tab.Participate.Name.Text" xml:space="preserve">
-    <value>Participate!</value>
-  </data>
-  <data name="Tab.Participate.Title.Text" xml:space="preserve">
-    <value>Participate!</value>
-  </data>
-  <data name="Tab.Participate.Url.Text" xml:space="preserve">
-    <value>/#participate</value>
-  </data>
-  <data name="Tab.ActivityFeed.Content.Text" xml:space="preserve">
-    <value>Activity Feed</value>
-  </data>
-  <data name="Tab.ActivityFeed.Name.Text" xml:space="preserve">
-    <value>Activity Feed</value>
-  </data>
-  <data name="Tab.ActivityFeed.Title.Text" xml:space="preserve">
-    <value>Activity Feed</value>
-  </data>
-  <data name="Tab.ActivityFeed.ContentPane.Module.MemberDirectory.Title.Text" xml:space="preserve">
-    <value>Member Directory</value>
-  </data>
-  <data name="Tab.ActivityFeed.ContentPane.Module.Navigation.Title.Text" xml:space="preserve">
-    <value>Navigation</value>
-  </data>
-  <data name="Tab.ActivityFeed.ContentPane.Module.ViewProfile.Title.Text" xml:space="preserve">
-    <value>ViewProfile</value>
-  </data>
-  <data name="Tab.ActivityFeed.ContentPane.Module.Journal.Title.Text" xml:space="preserve">
-    <value>Journal</value>
-  </data>
-  <data name="Tab.SearchResults.Content.Text" xml:space="preserve">
-    <value>Search Results</value>
-  </data>
-  <data name="Tab.SearchResults.Name.Text" xml:space="preserve">
-    <value>Search Results</value>
-  </data>
-  <data name="Tab.SearchResults.Title.Text" xml:space="preserve">
-    <value>Search Results</value>
-  </data>
-  <data name="Tab.SearchResults.ContentPane.Module.SearchResults.Title.Text" xml:space="preserve">
-    <value>Search Results</value>
-  </data>
-  <data name="Tab.404ErrorPage.Content.Text" xml:space="preserve">
-    <value>404 Error Page</value>
-  </data>
-  <data name="Tab.404ErrorPage.Name.Text" xml:space="preserve">
-    <value>404 Error Page</value>
-  </data>
-  <data name="Tab.404ErrorPage.Title.Text" xml:space="preserve">
-    <value>404 Error Page</value>
-  </data>
-  <data name="Tab.404ErrorPage.Module.Title.Text" xml:space="preserve">
-    <value>Page cannot be found</value>
-  </data>
-  <data name="Tab.404ErrorPage.Module.Content.Text" xml:space="preserve">
-    <value>Sorry, the page you are looking for cannot be found and might have been removed, had its name changed, or is temporarily unavailable. It is recommended that you start again from the homepage. Feel free to contact us if the problem persists or if you cannot find what you’re looking for.</value>
-  </data>
-  <data name="Tab.MyProfile.Content.Text" xml:space="preserve">
-    <value>My Profile</value>
-  </data>
-  <data name="Tab.MyProfile.Name.Text" xml:space="preserve">
-    <value>My Profile</value>
-  </data>
-  <data name="Tab.MyProfile.Title.Text" xml:space="preserve">
-    <value>My Profile</value>
-  </data>
-  <data name="Tab.MyProfile.ContentPane.Module.MemberDirectory.Title.Text" xml:space="preserve">
-    <value>Member Directory</value>
-  </data>
-  <data name="Tab.MyProfile.ContentPane.Module.Navigation.Title.Text" xml:space="preserve">
-    <value>Navigation</value>
-  </data>
-  <data name="Tab.MyProfile.ContentPane.Module.ViewProfile.Title.Text" xml:space="preserve">
-    <value>ViewProfile</value>
-  </data>
-  <data name="Tab.MyFriends.Content.Text" xml:space="preserve">
-    <value>My Friends</value>
-  </data>
-  <data name="Tab.MyFriends.Name.Text" xml:space="preserve">
-    <value>Friends</value>
-  </data>
-  <data name="Tab.MyFriends.Title.Text" xml:space="preserve">
-    <value>My Friends</value>
-  </data>
-  <data name="Tab.MyFriends.ContentPane.Module.MemberDirectory.Title.Text" xml:space="preserve">
-    <value>Member Directory</value>
-  </data>
-  <data name="Tab.MyFriends.ContentPane.Module.Navigation.Title.Text" xml:space="preserve">
-    <value>Navigation</value>
-  </data>
-  <data name="Tab.MyFriends.ContentPane.Module.ViewProfile.Title.Text" xml:space="preserve">
-    <value>ViewProfile</value>
-  </data>
-  <data name="Tab.MyMessages.Content.Text" xml:space="preserve">
-    <value>My Messages</value>
-  </data>
-  <data name="Tab.MyMessages.Name.Text" xml:space="preserve">
-    <value>Messsages</value>
-  </data>
-  <data name="Tab.MyMessages.Title.Text" xml:space="preserve">
-    <value>My Messsages</value>
-  </data>
-  <data name="Tab.MyMessages.ContentPane.Module.MemberDirectory.Title.Text" xml:space="preserve">
-    <value>Member Directory</value>
-  </data>
-  <data name="Tab.MyMessages.ContentPane.Module.Navigation.Title.Text" xml:space="preserve">
-    <value>Navigation</value>
-  </data>
-  <data name="Tab.MyMessages.ContentPane.Module.ViewProfile.Title.Text" xml:space="preserve">
-    <value>ViewProfile</value>
-  </data>
-  <data name="Tab.MyMessages.ContentPane.Module.MessageCenter.Title.Text" xml:space="preserve">
-    <value>Message Center</value>
-  </data>
-  <data name="Tab.WebsiteAdministration.Content.Text" xml:space="preserve">
-    <value>Website Administration</value>
-  </data>
-  <data name="Tab.WebsiteAdministration.Name.Text" xml:space="preserve">
-    <value>Admin</value>
-  </data>
-  <data name="Tab.WebsiteAdministration.Title.Text" xml:space="preserve">
-    <value>Website Administration</value>
-  </data>
-  <data name="Tab.WebsiteAdministration.ContentPane.Module.BasicFeatures.Title.Text" xml:space="preserve">
-    <value>Basic Features</value>
-  </data>
-  <data name="Tab.FileManagement.Content.Text" xml:space="preserve">
-    <value>File Management</value>
-  </data>
-  <data name="Tab.FileManagement.Name.Text" xml:space="preserve">
-    <value>File Management</value>
-  </data>
-  <data name="Tab.FileManagement.Title.Text" xml:space="preserve">
-    <value>Website Administration</value>
-  </data>
-  <data name="Tab.FileManagement.ContentPane.Module.ResourceManager.Title.Text" xml:space="preserve">
-    <value>Resource Manager</value>
-  </data>
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!-- 
+    Microsoft ResX Schema 
+    
+    Version 2.0
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
+    associated with the data types.
+    
+    Example:
+    
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+                
+    There are any number of "resheader" rows that contain simple 
+    name/value pairs.
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
+    mimetype set.
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
+    extensible. For a given mimetype the value must be set accordingly:
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
+    read any of the formats listed below.
+    
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+    
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array 
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="https://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:import namespace="https://www.w3.org/XML/1998/namespace" />
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" />
+              </xsd:sequence>
+              <xsd:attribute name="name" use="required" type="xsd:string" />
+              <xsd:attribute name="type" type="xsd:string" />
+              <xsd:attribute name="mimetype" type="xsd:string" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string" />
+              <xsd:attribute name="name" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" />
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="PortalDescription.Text" xml:space="preserve">
+    <value>Default Website Template</value>
+  </data>
+  <data name="Setting.DefaultLanguage.Text" xml:space="preserve">
+    <value>en-US</value>
+  </data>
+  <data name="Setting.FooterText.Text" xml:space="preserve">
+    <value>Copyright [year] by My Website</value>
+  </data>
+  <data name="Tab.Home.Content.Text" xml:space="preserve">
+    <value>Home</value>
+  </data>
+  <data name="Tab.Home.Name.Text" xml:space="preserve">
+    <value>Home</value>
+  </data>
+  <data name="Tab.Home.Title.Text" xml:space="preserve">
+    <value>Home</value>
+  </data>
+  <data name="Tab.Home.BannerPane.Module.HomeBanner.Title.Text" xml:space="preserve">
+    <value>Home Banner</value>
+  </data>
+  <data name="Tab.Home.BannerPane.Module.HomeBanner.Content.H2.Text" xml:space="preserve">
+    <value>Your installation was successful!</value>
+  </data>
+  <data name="Tab.Home.BannerPane.Module.HomeBanner.Content.H5.Text" xml:space="preserve">
+    <value>OPEN * SCALABLE * EXTENSIBLE * SECURE</value>
+  </data>
+  <data name="Tab.Home.BannerPane.Module.HomeBanner.Content.Lead.Text" xml:space="preserve">
+    <value>Welcome to your new DNN installation!  DNN makes it easy to build your dream web solution.  From its open-source accessibility to its scalable architecture and extensible framework, you can depend on security throughout.  DNN checks all the boxes for small, medium, large, and enterprise businesses alike!</value>
+  </data>
+  <data name="Tab.Home.BannerPane.Module.HomeBanner.Content.Image.Alt.Text" xml:space="preserve">
+    <value>DNN Seal</value>
+  </data>
+  <data name="Tab.Home.BannerPane.Module.HomeBanner.Content.Image.Title.Text" xml:space="preserve">
+    <value>DNN Seal</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Title.Text" xml:space="preserve">
+    <value>Home Content</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Build.DivId.Text" xml:space="preserve">
+    <value>build</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Build.H2.Text" xml:space="preserve">
+    <value>Start Building</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Build.Lead.Text" xml:space="preserve">
+    <value>Out of the box, you have great tools at your fingertips to start managing content. To the left, you&#39;ll see the Persona Bar. Here is where you can manage Pages, Users, Roles, Assets, Themes, Sites, and much more. Go ahead and hover over CONTENT, MANAGE, and SETTINGS to start exploring.</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.DivId.Text" xml:space="preserve">
+    <value>learn</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.H2.Text" xml:space="preserve">
+    <value>Learn DNN</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Lead.Text" xml:space="preserve">
+    <value>Whether you have just inherited a DNN site in your job, or you are a seasoned DNN veteran, there's always more to learn. DNN has been around for decades and is extremely robust. Learn more. Do more.</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Administrators.Image.Alt.Text" xml:space="preserve">
+    <value>Administrators Icon</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Administrators.Image.Title.Text" xml:space="preserve">
+    <value>Administrators Icon</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Administrators.H4.Text" xml:space="preserve">
+    <value>Administrators</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Administrators.Div.Text" xml:space="preserve">
+    <value>Find documentation for both Administrators and Super Users (aka, Host Users). Administrators and Super Users will handle tasks such as installing &amp; upgrading DNN, configuring permissions and security roles, updating site settings, installing and upgrading extensions, and much more.</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Administrators.Button.Text" xml:space="preserve">
+    <value>Learn More</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Developers.Image.Alt.Text" xml:space="preserve">
+    <value>Developers Icon</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Developers.Image.Title.Text" xml:space="preserve">
+    <value>Developers Icon</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Developers.H4.Text" xml:space="preserve">
+    <value>Developers</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Developers.Div.Text" xml:space="preserve">
+    <value>DNN has an open API and many extension points. Developers can create custom DNN extensions using various development approaches. The content in this section will help you get started and learn more about DNN's extensibility model and applicable development patterns.</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Developers.Button.Text" xml:space="preserve">
+    <value>Learn More</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Designers.Image.Alt.Text" xml:space="preserve">
+    <value>Designers Icon</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Designers.Image.Title.Text" xml:space="preserve">
+    <value>Designers Icon</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Designers.H4.Text" xml:space="preserve">
+    <value>Designers</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Designers.Div.Text" xml:space="preserve">
+    <value>Designers can achieve any look and feel desired with DNN. The content in this section will help designers and front-end developers alike understand the process for creating themes (formerly referred to as "skins") within DNN. If you can design it in Photoshop you can create it as a DNN theme!</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Learn.Designers.Button.Text" xml:space="preserve">
+    <value>Learn More</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.DivId.Text" xml:space="preserve">
+    <value>extend</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.Image.Alt.Text" xml:space="preserve">
+    <value>DNN Extensions Icon</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.Image.Title.Text" xml:space="preserve">
+    <value>DNN Extensions Icon</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.H2.Text" xml:space="preserve">
+    <value>Extend DNN</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.H4.Text" xml:space="preserve">
+    <value>Themes &amp; Modules</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.Lead.Text" xml:space="preserve">
+    <value>There are so many open source and commercial extensions for DNN, just waiting for you to explore and use for your next awesome DNN creation! Be sure to check them out and see what meets your project needs. Also, don't forget that you can easily create your own custom extensions, or work with an awesome and trusted provider in the DNN ecosystem to do this for you.</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.PrimaryButton.Text" xml:space="preserve">
+    <value>Open Source Extensions</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Extend.SecondaryButton.Text" xml:space="preserve">
+    <value>Visit DNN Store</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DivId.Text" xml:space="preserve">
+    <value>participate</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.H2.Text" xml:space="preserve">
+    <value>Participate in the DNN Community</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.Lead.Text" xml:space="preserve">
+    <value>No matter your persona, our community welcomes you and encourages you to participate. Not only can you receive and provide help, you may just make some lifetime friends in the process.</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.SlackImage.Alt.Text" xml:space="preserve">
+    <value>Slack Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.SlackImage.Title.Text" xml:space="preserve">
+    <value>Slack Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DiscordImage.Alt.Text" xml:space="preserve">
+    <value>Discord Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DiscordImage.Title.Text" xml:space="preserve">
+    <value>Discord Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.GitHubImage.Alt.Text" xml:space="preserve">
+    <value>GitHub Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.GitHubImage.Title.Text" xml:space="preserve">
+    <value>GitHub Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnCommunityImage.Alt.Text" xml:space="preserve">
+    <value>DNN Community Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnCommunityImage.Title.Text" xml:space="preserve">
+    <value>DNN Community Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnForumsImage.Alt.Text" xml:space="preserve">
+    <value>DNN Forums Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnForumsImage.Title.Text" xml:space="preserve">
+    <value>DNN Forums Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnBlogsImage.Alt.Text" xml:space="preserve">
+    <value>DNN Blogs Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnBlogsImage.Title.Text" xml:space="preserve">
+    <value>DNN Blogs Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnDocsImage.Alt.Text" xml:space="preserve">
+    <value>DNN Docs Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnDocsImage.Title.Text" xml:space="preserve">
+    <value>DNN Docs Logo White</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnCommunityAltImage.Alt.Text" xml:space="preserve">
+    <value>DNN Community Alt Logo</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnCommunityAltImage.Title.Text" xml:space="preserve">
+    <value>DNN Community Alt Logo</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.EventsImage.Alt.Text" xml:space="preserve">
+    <value>EVENTS</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.EventsImage.Title.Text" xml:space="preserve">
+    <value>EVENTS</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnConnectGroupPhotoImage.Alt.Text" xml:space="preserve">
+    <value>DNN Connect Group Photo</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnConnectGroupPhotoImage.Title.Text" xml:space="preserve">
+    <value>DNN Connect Group Photo</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnSummitGroupPhotoImage.Alt.Text" xml:space="preserve">
+    <value>DNN Summit Group Photo</value>
+  </data>
+  <data name="Tab.Home.FluidPane.Module.HomeContent.Content.Participate.DnnSummitGroupPhotoImage.Title.Text" xml:space="preserve">
+    <value>DNN Summit Group Photo</value>
+  </data>
+  <data name="Tab.Home.FooterPane.Module.FooterContent.Title.Text" xml:space="preserve">
+    <value>Footer Content</value>
+  </data>
+  <data name="Tab.Home.FooterPane.Module.FooterContent.Content.DnnFooterLogoImage.Alt.Text" xml:space="preserve">
+    <value>DNN Footer Logo</value>
+  </data>
+  <data name="Tab.Home.FooterPane.Module.FooterContent.Content.DnnFooterLogoImage.Title.Text" xml:space="preserve">
+    <value>DNN Footer Logo</value>
+  </data>
+  <data name="Tab.Build.Content.Text" xml:space="preserve">
+    <value>Build</value>
+  </data>
+  <data name="Tab.Build.Name.Text" xml:space="preserve">
+    <value>Build</value>
+  </data>
+  <data name="Tab.Build.Title.Text" xml:space="preserve">
+    <value>Build</value>
+  </data>
+  <data name="Tab.Build.Url.Text" xml:space="preserve">
+    <value>/#build</value>
+  </data>
+  <data name="Tab.Learn.Content.Text" xml:space="preserve">
+    <value>Learn</value>
+  </data>
+  <data name="Tab.Learn.Name.Text" xml:space="preserve">
+    <value>Learn</value>
+  </data>
+  <data name="Tab.Learn.Title.Text" xml:space="preserve">
+    <value>Learn</value>
+  </data>
+  <data name="Tab.Learn.Url.Text" xml:space="preserve">
+    <value>/#learn</value>
+  </data>
+  <data name="Tab.Extend.Content.Text" xml:space="preserve">
+    <value>Extend</value>
+  </data>
+  <data name="Tab.Extend.Name.Text" xml:space="preserve">
+    <value>Extend</value>
+  </data>
+  <data name="Tab.Extend.Title.Text" xml:space="preserve">
+    <value>Extend</value>
+  </data>
+  <data name="Tab.Extend.Url.Text" xml:space="preserve">
+    <value>/#extend</value>
+  </data>
+  <data name="Tab.Participate.Content.Text" xml:space="preserve">
+    <value>Participate!</value>
+  </data>
+  <data name="Tab.Participate.Name.Text" xml:space="preserve">
+    <value>Participate!</value>
+  </data>
+  <data name="Tab.Participate.Title.Text" xml:space="preserve">
+    <value>Participate!</value>
+  </data>
+  <data name="Tab.Participate.Url.Text" xml:space="preserve">
+    <value>/#participate</value>
+  </data>
+  <data name="Tab.ActivityFeed.Content.Text" xml:space="preserve">
+    <value>Activity Feed</value>
+  </data>
+  <data name="Tab.ActivityFeed.Name.Text" xml:space="preserve">
+    <value>Activity Feed</value>
+  </data>
+  <data name="Tab.ActivityFeed.Title.Text" xml:space="preserve">
+    <value>Activity Feed</value>
+  </data>
+  <data name="Tab.ActivityFeed.ContentPane.Module.MemberDirectory.Title.Text" xml:space="preserve">
+    <value>Member Directory</value>
+  </data>
+  <data name="Tab.ActivityFeed.ContentPane.Module.Navigation.Title.Text" xml:space="preserve">
+    <value>Navigation</value>
+  </data>
+  <data name="Tab.ActivityFeed.ContentPane.Module.ViewProfile.Title.Text" xml:space="preserve">
+    <value>ViewProfile</value>
+  </data>
+  <data name="Tab.ActivityFeed.ContentPane.Module.Journal.Title.Text" xml:space="preserve">
+    <value>Journal</value>
+  </data>
+  <data name="Tab.SearchResults.Content.Text" xml:space="preserve">
+    <value>Search Results</value>
+  </data>
+  <data name="Tab.SearchResults.Name.Text" xml:space="preserve">
+    <value>Search Results</value>
+  </data>
+  <data name="Tab.SearchResults.Title.Text" xml:space="preserve">
+    <value>Search Results</value>
+  </data>
+  <data name="Tab.SearchResults.ContentPane.Module.SearchResults.Title.Text" xml:space="preserve">
+    <value>Search Results</value>
+  </data>
+  <data name="Tab.404ErrorPage.Content.Text" xml:space="preserve">
+    <value>404 Error Page</value>
+  </data>
+  <data name="Tab.404ErrorPage.Name.Text" xml:space="preserve">
+    <value>404 Error Page</value>
+  </data>
+  <data name="Tab.404ErrorPage.Title.Text" xml:space="preserve">
+    <value>404 Error Page</value>
+  </data>
+  <data name="Tab.404ErrorPage.Module.Title.Text" xml:space="preserve">
+    <value>Page cannot be found</value>
+  </data>
+  <data name="Tab.404ErrorPage.Module.Content.Text" xml:space="preserve">
+    <value>Sorry, the page you are looking for cannot be found and might have been removed, had its name changed, or is temporarily unavailable. It is recommended that you start again from the homepage. Feel free to contact us if the problem persists or if you cannot find what you’re looking for.</value>
+  </data>
+  <data name="Tab.MyProfile.Content.Text" xml:space="preserve">
+    <value>My Profile</value>
+  </data>
+  <data name="Tab.MyProfile.Name.Text" xml:space="preserve">
+    <value>My Profile</value>
+  </data>
+  <data name="Tab.MyProfile.Title.Text" xml:space="preserve">
+    <value>My Profile</value>
+  </data>
+  <data name="Tab.MyProfile.ContentPane.Module.MemberDirectory.Title.Text" xml:space="preserve">
+    <value>Member Directory</value>
+  </data>
+  <data name="Tab.MyProfile.ContentPane.Module.Navigation.Title.Text" xml:space="preserve">
+    <value>Navigation</value>
+  </data>
+  <data name="Tab.MyProfile.ContentPane.Module.ViewProfile.Title.Text" xml:space="preserve">
+    <value>ViewProfile</value>
+  </data>
+  <data name="Tab.MyFriends.Content.Text" xml:space="preserve">
+    <value>My Friends</value>
+  </data>
+  <data name="Tab.MyFriends.Name.Text" xml:space="preserve">
+    <value>Friends</value>
+  </data>
+  <data name="Tab.MyFriends.Title.Text" xml:space="preserve">
+    <value>My Friends</value>
+  </data>
+  <data name="Tab.MyFriends.ContentPane.Module.MemberDirectory.Title.Text" xml:space="preserve">
+    <value>Member Directory</value>
+  </data>
+  <data name="Tab.MyFriends.ContentPane.Module.Navigation.Title.Text" xml:space="preserve">
+    <value>Navigation</value>
+  </data>
+  <data name="Tab.MyFriends.ContentPane.Module.ViewProfile.Title.Text" xml:space="preserve">
+    <value>ViewProfile</value>
+  </data>
+  <data name="Tab.MyMessages.Content.Text" xml:space="preserve">
+    <value>My Messages</value>
+  </data>
+  <data name="Tab.MyMessages.Name.Text" xml:space="preserve">
+    <value>Messsages</value>
+  </data>
+  <data name="Tab.MyMessages.Title.Text" xml:space="preserve">
+    <value>My Messsages</value>
+  </data>
+  <data name="Tab.MyMessages.ContentPane.Module.MemberDirectory.Title.Text" xml:space="preserve">
+    <value>Member Directory</value>
+  </data>
+  <data name="Tab.MyMessages.ContentPane.Module.Navigation.Title.Text" xml:space="preserve">
+    <value>Navigation</value>
+  </data>
+  <data name="Tab.MyMessages.ContentPane.Module.ViewProfile.Title.Text" xml:space="preserve">
+    <value>ViewProfile</value>
+  </data>
+  <data name="Tab.MyMessages.ContentPane.Module.MessageCenter.Title.Text" xml:space="preserve">
+    <value>Message Center</value>
+  </data>
+  <data name="Tab.WebsiteAdministration.Content.Text" xml:space="preserve">
+    <value>Website Administration</value>
+  </data>
+  <data name="Tab.WebsiteAdministration.Name.Text" xml:space="preserve">
+    <value>Admin</value>
+  </data>
+  <data name="Tab.WebsiteAdministration.Title.Text" xml:space="preserve">
+    <value>Website Administration</value>
+  </data>
+  <data name="Tab.WebsiteAdministration.ContentPane.Module.BasicFeatures.Title.Text" xml:space="preserve">
+    <value>Basic Features</value>
+  </data>
+  <data name="Tab.FileManagement.Content.Text" xml:space="preserve">
+    <value>File Management</value>
+  </data>
+  <data name="Tab.FileManagement.Name.Text" xml:space="preserve">
+    <value>File Management</value>
+  </data>
+  <data name="Tab.FileManagement.Title.Text" xml:space="preserve">
+    <value>Website Administration</value>
+  </data>
+  <data name="Tab.FileManagement.ContentPane.Module.ResourceManager.Title.Text" xml:space="preserve">
+    <value>Resource Manager</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/DNN Platform/Website/Providers/DataProviders/SqlDataProvider/10.00.01.SqlDataProvider b/DNN Platform/Website/Providers/DataProviders/SqlDataProvider/10.00.01.SqlDataProvider
new file mode 100644
index 00000000000..343b722cfe1
--- /dev/null
+++ b/DNN Platform/Website/Providers/DataProviders/SqlDataProvider/10.00.01.SqlDataProvider	
@@ -0,0 +1,9 @@
+/************************************************************/
+/*****              SqlDataProvider                     *****/
+/*****                                                  *****/
+/*****                                                  *****/
+/***** Note: To manually execute this script you must   *****/
+/*****       perform a search and replace operation     *****/
+/*****       for {databaseOwner} and {objectQualifier}  *****/
+/*****                                                  *****/
+/************************************************************/
diff --git a/DNN Platform/Website/development.config b/DNN Platform/Website/development.config
index 3b4e730aa6c..9f879f13b63 100644
--- a/DNN Platform/Website/development.config	
+++ b/DNN Platform/Website/development.config	
@@ -37,8 +37,8 @@
   <connectionStrings>
     <!-- Connection String for SQL Server 2008/2012 Express -->
     <add name="SiteSqlServer" connectionString="Data Source=.\SQLExpress;Integrated Security=True;User Instance=True;AttachDBFilename=|DataDirectory|Database.mdf;" providerName="System.Data.SqlClient"/>
-    <!-- Connection String for SQL Server 2008/2012
-    <add name="SiteSqlServer" connectionString="Server=(local);Database=DotNetNuke;uid=;pwd=;" providerName="System.Data.SqlClient" />
+    <!-- Connection String for SQL Server 2008/2012
+    <add name="SiteSqlServer" connectionString="Server=(local);Database=DotNetNuke;uid=;pwd=;" providerName="System.Data.SqlClient" />
     -->
   </connectionStrings>
 
@@ -55,7 +55,7 @@
     <!--optionally strip angle brackets on public login and registration screens-->
     <add key="PersistentCookieTimeout" value="0"/>
     <!--use as persistent cookie expiration. Value is in minutes, and only active if a non-zero figure-->
-    <!-- set UsePortNumber to true to preserve the port number if you're using a port number other than 80 (the standard)
+    <!-- set UsePortNumber to true to preserve the port number if you're using a port number other than 80 (the standard)
         <add key="UsePortNumber" value="true" /> -->
     <!-- Services Framework Tracing is primarily useful for developing and debugging -->
     <add key="EnableServicesFrameworkTracing" value="false" />
@@ -150,19 +150,19 @@
     <authentication mode="Forms">
       <forms name=".DOTNETNUKE" protection="All" timeout="60" cookieless="UseCookies"/>
     </authentication>
-    <!--
-    <identity impersonate="true"/>
-    <authentication mode="Windows">
-    </authentication>
+    <!--
+    <identity impersonate="true"/>
+    <authentication mode="Windows">
+    </authentication>
     -->
     <!-- allow large file uploads -->
     <httpRuntime targetFramework="4.7.2" shutdownTimeout="120" executionTimeout="1200" useFullyQualifiedRedirectUrl="true" maxRequestLength="28672" requestLengthDiskThreshold="81920" maxUrlLength="2048" requestPathInvalidCharacters="&lt;,&gt;,*,%,:,\,?" enableVersionHeader="false"  requestValidationMode="2.0" fcnMode="Single" />
     <httpCookies httpOnlyCookies="true" requireSSL="false" domain=""/>
-    <!--  GLOBALIZATION
-    This section sets the globalization settings of the application.
-    Utf-8 is not supported on Netscape 4.x
-    If you need netscape compatiblity leave iso-8859-1.
-    UTF-8 is recommended for complex languages
+    <!--  GLOBALIZATION
+    This section sets the globalization settings of the application.
+    Utf-8 is not supported on Netscape 4.x
+    If you need netscape compatiblity leave iso-8859-1.
+    UTF-8 is recommended for complex languages
     -->
     <globalization culture="en-US" uiCulture="en" requestEncoding="UTF-8" responseEncoding="UTF-8" fileEncoding="UTF-8"/>
     <!--<globalization culture="en-US" uiCulture="en"  fileEncoding="iso-8859-1" requestEncoding="iso-8859-1" responseEncoding="iso-8859-1"/>-->
@@ -194,33 +194,33 @@
       </controls>
     </pages>
     <!-- ASP.NET 2 Membership/Profile/Role and AnonymousAuthentication Providers -->
-    <!-- anonymousIdentification configuration:
-          enabled="[true|false]"                              Feature is enabled?
-          cookieName=".ASPXANONYMOUS"                         Cookie Name
-          cookieTimeout="100000"                              Cookie Timeout in minutes
-          cookiePath="/"                                      Cookie Path
-          cookieRequireSSL="[true|false]"                     Set Secure bit in Cookie
-          cookieSlidingExpiration="[true|false]"              Reissue expiring cookies?
-          cookieProtection="[None|Validation|Encryption|All]" How to protect cookies from being read/tampered
-          domain="[domain]"                                   Enables output of the "domain" cookie attribute set to the specified value
+    <!-- anonymousIdentification configuration:
+          enabled="[true|false]"                              Feature is enabled?
+          cookieName=".ASPXANONYMOUS"                         Cookie Name
+          cookieTimeout="100000"                              Cookie Timeout in minutes
+          cookiePath="/"                                      Cookie Path
+          cookieRequireSSL="[true|false]"                     Set Secure bit in Cookie
+          cookieSlidingExpiration="[true|false]"              Reissue expiring cookies?
+          cookieProtection="[None|Validation|Encryption|All]" How to protect cookies from being read/tampered
+          domain="[domain]"                                   Enables output of the "domain" cookie attribute set to the specified value
         -->
     <anonymousIdentification enabled="true" cookieName=".ASPXANONYMOUS" cookieTimeout="100000" cookiePath="/" cookieRequireSSL="false" cookieSlidingExpiration="true" cookieProtection="None" domain=""/>
     <membership defaultProvider="AspNetSqlMembershipProvider" userIsOnlineTimeWindow="15">
       <providers>
         <clear/>
-        <!-- Configuration for AspNetSqlMembershipProvider:
-                connectionStringName="string"               Name corresponding to the entry in <connectionStrings> section where the connection string for the provider is specified
-                maxInvalidPasswordAttempts="int"            The number of failed password attempts, or failed password answer attempts that are allowed before locking out a user?s account
-                passwordAttemptWindow="int"                 The time window, in minutes, during which failed password attempts and failed password answer attempts are tracked
-                enablePasswordRetrieval="[true|false]"      Should the provider support password retrievals
-                enablePasswordReset="[true|false]"          Should the provider support password resets
-                requiresQuestionAndAnswer="[true|false]"    Should the provider require Q & A
-                minRequiredPasswordLength="int"		        The minimum password length
-                minRequiredNonalphanumericCharacters="int"  The minimum number of non-alphanumeric characters
-                applicationName="string"                    Optional string to identity the application: defaults to Application Metabase path
-                requiresUniqueEmail="[true|false]"          Should the provider require a unique email to be specified
-                passwordFormat="[Clear|Hashed|Encrypted]"   Storage format for the password: Hashed (SHA1), Clear or Encrypted (Triple-DES)
-                description="string"                        Description of what the provider does
+        <!-- Configuration for AspNetSqlMembershipProvider:
+                connectionStringName="string"               Name corresponding to the entry in <connectionStrings> section where the connection string for the provider is specified
+                maxInvalidPasswordAttempts="int"            The number of failed password attempts, or failed password answer attempts that are allowed before locking out a user?s account
+                passwordAttemptWindow="int"                 The time window, in minutes, during which failed password attempts and failed password answer attempts are tracked
+                enablePasswordRetrieval="[true|false]"      Should the provider support password retrievals
+                enablePasswordReset="[true|false]"          Should the provider support password resets
+                requiresQuestionAndAnswer="[true|false]"    Should the provider require Q & A
+                minRequiredPasswordLength="int"		        The minimum password length
+                minRequiredNonalphanumericCharacters="int"  The minimum number of non-alphanumeric characters
+                applicationName="string"                    Optional string to identity the application: defaults to Application Metabase path
+                requiresUniqueEmail="[true|false]"          Should the provider require a unique email to be specified
+                passwordFormat="[Clear|Hashed|Encrypted]"   Storage format for the password: Hashed (SHA1), Clear or Encrypted (Triple-DES)
+                description="string"                        Description of what the provider does
                 -->
         <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="SiteSqlServer" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" minRequiredPasswordLength="7" minRequiredNonalphanumericCharacters="0" requiresUniqueEmail="false" passwordFormat="Hashed" applicationName="DotNetNuke" description="Stores and retrieves membership data from the local Microsoft SQL Server database"/>
       </providers>
@@ -409,6 +409,7 @@
         <clear />
         <add name="BasicAuth" type="DotNetNuke.Web.Api.Auth.BasicAuthMessageHandler, DotNetNuke.Web" enabled="false" defaultInclude="true" forceSSL="false" />
         <add name="DigestAuth" type="DotNetNuke.Web.Api.Auth.DigestAuthMessageHandler, DotNetNuke.Web" enabled="false" defaultInclude="true" forceSSL="false" />
+        <add name="ApiTokenAuth" type="DotNetNuke.Web.Api.Auth.ApiTokenAuthMessageHandler, DotNetNuke.Web" enabled="false" defaultInclude="true" forceSSL="true" />
       </messageHandlers>
     </authServices>
     <cryptography defaultProvider="FipsCompilanceCryptographyProvider">
diff --git a/DNN Platform/Website/release.config b/DNN Platform/Website/release.config
index 399da56aa5a..f5082b30e99 100644
--- a/DNN Platform/Website/release.config	
+++ b/DNN Platform/Website/release.config	
@@ -37,8 +37,8 @@
   <connectionStrings>
     <!-- Connection String for SQL Server 2008/2012 Express -->
     <add name="SiteSqlServer" connectionString="Data Source=.\SQLExpress;Integrated Security=True;User Instance=True;AttachDBFilename=|DataDirectory|Database.mdf;" providerName="System.Data.SqlClient"/>
-    <!-- Connection String for SQL Server 2008/2012
-    <add name="SiteSqlServer" connectionString="Server=(local);Database=DotNetNuke;uid=;pwd=;" providerName="System.Data.SqlClient" />
+    <!-- Connection String for SQL Server 2008/2012
+    <add name="SiteSqlServer" connectionString="Server=(local);Database=DotNetNuke;uid=;pwd=;" providerName="System.Data.SqlClient" />
     -->
   </connectionStrings>
 
@@ -55,7 +55,7 @@
     <!--optionally strip angle brackets on public login and registration screens-->
     <add key="PersistentCookieTimeout" value="0"/>
     <!--use as persistent cookie expiration. Value is in minutes, and only active if a non-zero figure-->
-    <!-- set UsePortNumber to true to preserve the port number if you're using a port number other than 80 (the standard)
+    <!-- set UsePortNumber to true to preserve the port number if you're using a port number other than 80 (the standard)
         <add key="UsePortNumber" value="true" /> -->
     <!-- Services Framework Tracing is primarily useful for developing and debugging -->
     <add key="EnableServicesFrameworkTracing" value="false" />
@@ -128,8 +128,8 @@
 
   <system.web>
     <machineKey validationKey="F9D1A2D3E1D3E2F7B3D9F90FF3965ABDAC304902" decryptionKey="F9D1A2D3E1D3E2F7B3D9F90FF3965ABDAC304902F8D923AC" decryption="3DES" validation="SHA1"/>
-    <!-- set code access security trust level - this is generally set in the machine.config
-    <trust level="Full" originUrl=".*" />
+    <!-- set code access security trust level - this is generally set in the machine.config
+    <trust level="Full" originUrl=".*" />
     -->
     <!-- set debugmode to false for running application -->
     <compilation debug="false" strict="false" targetFramework="4.7.2">
@@ -151,19 +151,19 @@
     <authentication mode="Forms">
       <forms name=".DOTNETNUKE" protection="All" timeout="60" cookieless="UseCookies"/>
     </authentication>
-    <!--
-    <identity impersonate="true"/>
-    <authentication mode="Windows">
-    </authentication>
+    <!--
+    <identity impersonate="true"/>
+    <authentication mode="Windows">
+    </authentication>
     -->
     <!-- allow large file uploads -->
     <httpRuntime targetFramework="4.7.2" shutdownTimeout="120" executionTimeout="1200" useFullyQualifiedRedirectUrl="true" maxRequestLength="28672" requestLengthDiskThreshold="81920" maxUrlLength="2048" requestPathInvalidCharacters="&lt;,&gt;,*,%,:,\,?" enableVersionHeader="false"  requestValidationMode="2.0" fcnMode="Single" />
     <httpCookies httpOnlyCookies="true" requireSSL="false" domain=""/>
-    <!--  GLOBALIZATION
-    This section sets the globalization settings of the application.
-    Utf-8 is not supported on Netscape 4.x
-    If you need netscape compatiblity leave iso-8859-1.
-    UTF-8 is recommended for complex languages
+    <!--  GLOBALIZATION
+    This section sets the globalization settings of the application.
+    Utf-8 is not supported on Netscape 4.x
+    If you need netscape compatiblity leave iso-8859-1.
+    UTF-8 is recommended for complex languages
     -->
     <globalization culture="en-US" uiCulture="en" requestEncoding="UTF-8" responseEncoding="UTF-8" fileEncoding="UTF-8"/>
     <!--<globalization culture="en-US" uiCulture="en"  fileEncoding="iso-8859-1" requestEncoding="iso-8859-1" responseEncoding="iso-8859-1"/>-->
@@ -195,33 +195,33 @@
       </controls>
     </pages>
     <!-- ASP.NET 2 Membership/Profile/Role and AnonymousAuthentication Providers -->
-    <!-- anonymousIdentification configuration:
-          enabled="[true|false]"                              Feature is enabled?
-          cookieName=".ASPXANONYMOUS"                         Cookie Name
-          cookieTimeout="100000"                              Cookie Timeout in minutes
-          cookiePath="/"                                      Cookie Path
-          cookieRequireSSL="[true|false]"                     Set Secure bit in Cookie
-          cookieSlidingExpiration="[true|false]"              Reissue expiring cookies?
-          cookieProtection="[None|Validation|Encryption|All]" How to protect cookies from being read/tampered
-          domain="[domain]"                                   Enables output of the "domain" cookie attribute set to the specified value
+    <!-- anonymousIdentification configuration:
+          enabled="[true|false]"                              Feature is enabled?
+          cookieName=".ASPXANONYMOUS"                         Cookie Name
+          cookieTimeout="100000"                              Cookie Timeout in minutes
+          cookiePath="/"                                      Cookie Path
+          cookieRequireSSL="[true|false]"                     Set Secure bit in Cookie
+          cookieSlidingExpiration="[true|false]"              Reissue expiring cookies?
+          cookieProtection="[None|Validation|Encryption|All]" How to protect cookies from being read/tampered
+          domain="[domain]"                                   Enables output of the "domain" cookie attribute set to the specified value
         -->
     <anonymousIdentification enabled="true" cookieName=".ASPXANONYMOUS" cookieTimeout="100000" cookiePath="/" cookieRequireSSL="false" cookieSlidingExpiration="true" cookieProtection="None" domain=""/>
     <membership defaultProvider="AspNetSqlMembershipProvider" userIsOnlineTimeWindow="15">
       <providers>
         <clear/>
-        <!-- Configuration for AspNetSqlMembershipProvider:
-                connectionStringName="string"               Name corresponding to the entry in <connectionStrings> section where the connection string for the provider is specified
-                maxInvalidPasswordAttempts="int"            The number of failed password attempts, or failed password answer attempts that are allowed before locking out a user?s account
-                passwordAttemptWindow="int"                 The time window, in minutes, during which failed password attempts and failed password answer attempts are tracked
-                enablePasswordRetrieval="[true|false]"      Should the provider support password retrievals
-                enablePasswordReset="[true|false]"          Should the provider support password resets
-                requiresQuestionAndAnswer="[true|false]"    Should the provider require Q & A
-                minRequiredPasswordLength="int"		        The minimum password length
-                minRequiredNonalphanumericCharacters="int"  The minimum number of non-alphanumeric characters
-                applicationName="string"                    Optional string to identity the application: defaults to Application Metabase path
-                requiresUniqueEmail="[true|false]"          Should the provider require a unique email to be specified
-                passwordFormat="[Clear|Hashed|Encrypted]"   Storage format for the password: Hashed (SHA1), Clear or Encrypted (Triple-DES)
-                description="string"                        Description of what the provider does
+        <!-- Configuration for AspNetSqlMembershipProvider:
+                connectionStringName="string"               Name corresponding to the entry in <connectionStrings> section where the connection string for the provider is specified
+                maxInvalidPasswordAttempts="int"            The number of failed password attempts, or failed password answer attempts that are allowed before locking out a user?s account
+                passwordAttemptWindow="int"                 The time window, in minutes, during which failed password attempts and failed password answer attempts are tracked
+                enablePasswordRetrieval="[true|false]"      Should the provider support password retrievals
+                enablePasswordReset="[true|false]"          Should the provider support password resets
+                requiresQuestionAndAnswer="[true|false]"    Should the provider require Q & A
+                minRequiredPasswordLength="int"		        The minimum password length
+                minRequiredNonalphanumericCharacters="int"  The minimum number of non-alphanumeric characters
+                applicationName="string"                    Optional string to identity the application: defaults to Application Metabase path
+                requiresUniqueEmail="[true|false]"          Should the provider require a unique email to be specified
+                passwordFormat="[Clear|Hashed|Encrypted]"   Storage format for the password: Hashed (SHA1), Clear or Encrypted (Triple-DES)
+                description="string"                        Description of what the provider does
                 -->
         <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="SiteSqlServer" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" minRequiredPasswordLength="7" minRequiredNonalphanumericCharacters="0" requiresUniqueEmail="false" passwordFormat="Hashed" applicationName="DotNetNuke" description="Stores and retrieves membership data from the local Microsoft SQL Server database"/>
       </providers>
@@ -406,6 +406,7 @@
         <clear />
         <add name="BasicAuth" type="DotNetNuke.Web.Api.Auth.BasicAuthMessageHandler, DotNetNuke.Web" enabled="false" defaultInclude="true" forceSSL="false" />
         <add name="DigestAuth" type="DotNetNuke.Web.Api.Auth.DigestAuthMessageHandler, DotNetNuke.Web" enabled="false" defaultInclude="true" forceSSL="false" />
+        <add name="ApiTokenAuth" type="DotNetNuke.Web.Api.Auth.ApiTokenAuthMessageHandler, DotNetNuke.Web" enabled="false" defaultInclude="true" forceSSL="true" />
       </messageHandlers>
     </authServices>
     <cryptography defaultProvider="FipsCompilanceCryptographyProvider">
diff --git a/Dnn.AdminExperience/ClientSide/AdminLogs.Web/src/components/LogSettings/LogSettingEditor/index.jsx b/Dnn.AdminExperience/ClientSide/AdminLogs.Web/src/components/LogSettings/LogSettingEditor/index.jsx
index 5e57aaa1e87..27a971b42d4 100644
--- a/Dnn.AdminExperience/ClientSide/AdminLogs.Web/src/components/LogSettings/LogSettingEditor/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/AdminLogs.Web/src/components/LogSettings/LogSettingEditor/index.jsx
@@ -275,7 +275,7 @@ class LogSettingEditor extends Component {
             <div className="log-setting-editor">
                 <Grid numberOfColumns={2}>{children}</Grid>
                 <div className="buttons-box">
-                    {this.props.logTypeSettingId !== "" && <Button type="secondary" onClick={this.deleteLogSetting.bind(this) }>{Localization.get("ConfigBtnDelete") }</Button>}
+                    {this.props.logTypeSettingId !== "" && <Button type="danger" onClick={this.deleteLogSetting.bind(this) }>{Localization.get("ConfigBtnDelete") }</Button>}
                     <Button type="secondary" onClick={this.props.Collapse.bind(this) }>{Localization.get("ConfigBtnCancel") }</Button>
                     <Button type="primary" onClick={this.addUpdateLogSetting.bind(this) }>{Localization.get("ConfigBtnSave") }</Button>
                 </div>
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/package.json b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/package.json
index d10d464219a..0e25d863d1f 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/package.json
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/package.json
@@ -19,6 +19,7 @@
     "lint": "eslint --fix",
     "test": "echo \"No tests script specified to run.\"",
     "build": "set NODE_ENV=production && webpack --mode production --config dist.webpack.config.js",
+    "watch": "set NODE_ENV=debug && webpack --mode development --config dist.webpack.config.js --watch",
     "debug": "set NODE_ENV=debug && webpack --mode production --config dist.webpack.config.js",
     "storybook": "start-storybook -p 9001 -c .storybook"
   },
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/BackToLink/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/BackToLink/style.less
index 436ec9202c7..49257656bfb 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/BackToLink/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/BackToLink/style.less
@@ -1,7 +1,7 @@
 @import "../../styles/index";
 a.dnn-back-to-link {
     font-weight: bold;
-    color: @thunder;
+    color: var(--dnn-color-foreground, @thunder);
     cursor: pointer;
     display: inline-block;
     > span {
@@ -15,14 +15,14 @@ a.dnn-back-to-link {
         > svg {
             width: 16px;
             height: 16px;
-            fill: @thunder;
+            fill: var(--dnn-color-foreground, @thunder);
         }
     }
     &:hover {
         color: @mountainMist;
         .dnn-back-to-arrow {
             > svg {
-                fill: @mountainMist;
+                fill: var(--dnn-color-foreground-light, @mountainMist);
             }
         }
     }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Button/index.jsx b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Button/index.jsx
index cc7fa7c761f..3c00f4ced0c 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Button/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Button/index.jsx
@@ -15,7 +15,7 @@ Button.propTypes = {
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
     size: PropTypes.oneOf(["small", "large"]),
-    type: PropTypes.oneOf(["primary", "secondary"]).isRequired,
+    type: PropTypes.oneOf(["primary", "secondary", "neutral", "danger"]).isRequired,
     onClick: PropTypes.func,
     disabled: PropTypes.bool,
     style: PropTypes.object
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Button/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Button/style.less
index bce977adb16..f9bd71b0237 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Button/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Button/style.less
@@ -1,28 +1,25 @@
 @import "../../styles/index";
 button.dnn-ui-common-button {
-    border: 1px solid @curiousBlue;
+    border: 1px solid var(--dnn-color-primary, @curiousBlue);
     height: 34px;
     padding: 0 22px;
     font-size: 10pt;
-    color: @curiousBlue;
-    background: @white;
-    border-radius: 3px;
+    color: var(--dnn-color-primary, @curiousBlue);
+    background: var(--dnn-color-primary-contrast, @white);
+    border-radius: var(--dnn-controls-radius, 3px);
     cursor: pointer;
     font-family: inherit;
     &:hover {
-        color: @cerulean;
-        border-color: @cerulean;
-    }
-    &:focus{
-        outline: none;
+        color: var(--dnn-color-primary-light, @cerulean);
+        border-color: var(--dnn-color-primary-light, @cerulean);
     }
     &:active {
-        color: @matisse;
-        border-color: @matisse;
+        color: var(--dnn-color-primary-dark, @matisse);
+        border-color: var(--dnn-color-primary-dark, @matisse);
     }
     &:disabled {
-        color: @alto;
-        border-color: @alto;
+        color: var(--dnn-color-neutral, @alto);
+        border-color: var(--dnn-color-neutral, @alto);
         cursor: not-allowed;
     }
 
@@ -31,19 +28,48 @@ button.dnn-ui-common-button {
     }
 
     &[role=primary] {
-        background: @curiousBlue;
+        background: var(--dnn-color-primary, @curiousBlue);
         border: none;
         color: @white;
 
         &:hover {
-            background: @cerulean;
+            background: var(--dnn-color-primary-light, @cerulean);
         }
         &:active {
-            background: @matisse;
+            background: var(--dnn-color-primary-dark, @matisse);
         }
         &:disabled {
-            color: @mountainMist;
-            background: @mercury;
+            color: var(--dnn-color-neutral-dark, @mountainMist);
+            background: var(--dnn-color-neutral, @mercury);
+            cursor: not-allowed;
+        }
+    }
+    &[role=danger] {
+        color: var(--dnn-color-danger, @alizarinCrimson);
+        border: 1px solid var(--dnn-color-danger, @alizarinCrimson);
+        background-color: var(--dnn-color-background, @white);
+
+        &:hover, &:active {
+            background-color: var(--dnn-color-danger, @alizarinCrimson);
+            color: var(--dnn-color-background, @white);
+        }
+        &:disabled {
+            color: var(--dnn-color-neutral-dark, @mountainMist);
+            background: var(--dnn-color-neutral, @mercury);
+            cursor: not-allowed;
+        }
+    }
+    &[role=neutral]{
+        color: var(--dnn-color-foreground-light, @thunder);
+        border: 1px solid var(--dnn-color-foreground-light, @gondola);
+        background-color: var(--dnn-color-background, @white);
+        &:hover, &:active{
+            background-color: var(--dnn-color-background, @mercury);
+            color: var(--dnn-color-foreground, @gondola);
+        }
+        &:disabled{
+            color: var(--dnn-color-neutral-contrast, @mountainMist);
+            background: var(--dnn-color-neutral, @mercury);
             cursor: not-allowed;
         }
     }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/CollapsibleRow/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/CollapsibleRow/style.less
index 5194a4507c8..f69b783d7f0 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/CollapsibleRow/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/CollapsibleRow/style.less
@@ -3,7 +3,7 @@
     width: 100%;
     div.collapsible-header {
         text-transform: uppercase;
-        color: rgb(178, 189, 195);
+        color: var(--dnn-color-surface, rgb(178, 189, 195));
         width: 100%;
         float: left;
         position: relative;
@@ -31,7 +31,7 @@
             user-select: none;
             &:after {
                 border: 6px solid transparent;
-                border-bottom: 6px solid black;
+                border-bottom: 6px solid var(--dnn-color-foreground, black);
                 content: "";
                 position: absolute;
                 left: -15px;
@@ -39,7 +39,7 @@
             }
             &.collapsed {
                 &:after {
-                    border-top: 6px solid black;
+                    border-top: 6px solid var(--dnn-color-foreground, black);
                     border-bottom: 6px solid transparent;
                     top: 5px;
                 }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/ContentLoadWrapper/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/ContentLoadWrapper/style.less
index b0c1d954453..b5ec1f973ec 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/ContentLoadWrapper/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/ContentLoadWrapper/style.less
@@ -14,7 +14,7 @@
     position: relative;
     width: 100%;
     &.upload-error {
-        background-color: rgba(255, 255, 255, 0.5);
+        background-color: var(--dnn-color-surface, rgba(255, 255, 255, 0.5));
         .try-load-again {
             position: absolute;
             top: 0;
@@ -36,22 +36,22 @@
                     height: 40px;
                     margin: 0 auto;
                     > svg {
-                        fill: @mountainMist;
+                        fill: var(--dnn-color-neutral, @mountainMist);
                         &:hover {
-                            fill: @mountainMist;
+                            fill: var(--dnn-color-neutral, @mountainMist);
                         }
                     }
                 }
             }
             span {
                 float: none;
-                color: @curiousBlue;
+                color: var(--dnn-color-primary, @curiousBlue);
                 cursor: pointer;
             }
         }
         .upload-bar-container {
             .upload-bar-box {
-                background: @alto;
+                background: var(--dnn-color-neutral-light, @alto);
             }
         }
     }
@@ -99,9 +99,9 @@
                 animation-name: placeHolderShimmer;
                 animation-timing-function: linear;
                 width: 105px;
-                background: @nonPhotoBlue;
-                background-image: -webkit-linear-gradient(to right, @nonPhotoBlue 0%, @solitude 35%, @nonPhotoBlue 100%);
-                background-image: linear-gradient(to right, @nonPhotoBlue 0%, @solitude 35%, @nonPhotoBlue 100%);
+                background: var(--dnn-color-primary-light, @nonPhotoBlue);
+                background-image: -webkit-linear-gradient(to right, var(--dnn-color-primary-light, @nonPhotoBlue) 0%, var(--dnn-color-background, @nonPhotoBlue) 35%, var(--dnn-color-primary-light, @nonPhotoBlue) 100%);
+                background-image: linear-gradient(to right, var(--dnn-color-primary-light, @nonPhotoBlue) 0%, var(--dnn-color-background, @nonPhotoBlue) 35%, var(--dnn-color-primary-light, @nonPhotoBlue) 100%);
                 background-size: 105px 5px;
                 height: 5px;
                 position: relative;
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DatePicker/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DatePicker/style.less
index 8a40043eae3..3c632950929 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DatePicker/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DatePicker/style.less
@@ -18,19 +18,19 @@
         height: 0;
         border: none;
     }
-    .calendar-container {       
+    .calendar-container {
         position: absolute;
         width: 256px;
         left: 0px;
         border: 1px solid @alto;
-        box-shadow: 0px 0px 17px 2px rgba(0, 0, 0, .2);
+        box-shadow: 0px 0px 17px 2px rgba(var(--dnn-color-foreground-r, 0), var(--dnn-color-foreground-g, 0), var(--dnn-color-foreground-b, 0), .2);
         opacity: 0;
         pointer-events: none;
         transition: 300ms;
         transform-origin: 100% 0% 0px;
         transform: scale(1);
         z-index: 10;
-        background: white;
+        background: var(--dnn-color-background, white);
         text-align: center;
 
         &.show-above-input {
@@ -62,13 +62,13 @@
         cursor: pointer;
         float: left;
         padding-top: 1px;
-        color: @alto;
+        color: var(--dnn-color-foreground-light, @alto);
         margin-left: 7px;
         &:hover {
-            color: @rollingStone;
+            color: var(--dnn-color-neutral, @rollingStone);
         }
         &.active, &.active:hover {
-            color: @curiousBlue;
+            color: var(--dnn-color-primary, @curiousBlue);
         }
     }
     .clear-button {
@@ -80,11 +80,12 @@
         top: 3px;
         font-size: 26px;
         &:hover {
-            color: @rollingStone;
+            color: var(--dnn-color-foreground-light, @rollingStone);
         }
     }
     .calendar-text {
-        border: 1px solid #b0afae;
+        border: 1px solid var(--dnn-color-foreground-light, #b0afae);
+        border-radius: var(--dnn-controls-radius, 0);
         padding: 8px 12px;
         cursor: pointer;
         min-height: 16px;
@@ -118,7 +119,7 @@
             position: absolute;
             display: block;
             cursor: pointer;
-            border: 1px solid #ccc;
+            border: 1px solid var(--dnn-color-foreground-light, #ccc);
             padding: 0;
             width: 28px;
             height: 28px;
@@ -148,7 +149,7 @@
             text-transform: uppercase;
             padding: 10px 0;
             font-weight: 600;
-            color: @bulgarianRose;
+            color: var(--dnn-color-foreground, @bulgarianRose);
         }
         .DayPicker-Weekdays {
             width: 100%;
@@ -157,14 +158,14 @@
                 width: 100%;
                 float: left;
                 .DayPicker-Weekday {
-                    color: #fff;
+                    color: var(--dnn-color-neutral-contrast, #fff);
                     line-height: 30px;
                     text-align: center;
-                    background-color: @alto;
+                    background-color: var(--dnn-color-neutral, @alto);
                     width: 14.28%;
                     box-sizing: border-box;
                     float: left;
-                    border: 2px solid #fff;
+                    border: 2px solid var(--dnn-color-neutral, @alto);
                 }
             }
         }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DayPicker/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DayPicker/style.less
index 8a40043eae3..1d1165e2bc4 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DayPicker/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DayPicker/style.less
@@ -22,15 +22,15 @@
         position: absolute;
         width: 256px;
         left: 0px;
-        border: 1px solid @alto;
-        box-shadow: 0px 0px 17px 2px rgba(0, 0, 0, .2);
+        border: 1px solid var(--dnn-color-foreground-light, @alto);
+        box-shadow: 0px 0px 17px 2px rgba(var(--dnn-color-foreground-r, 0), var(--dnn-color-foreground-g, 0), var(--dnn-color-foreground-b, 0), .2);
         opacity: 0;
         pointer-events: none;
         transition: 300ms;
         transform-origin: 100% 0% 0px;
         transform: scale(1);
         z-index: 10;
-        background: white;
+        background: var(--dnn-color-background, white);
         text-align: center;
 
         &.show-above-input {
@@ -62,17 +62,14 @@
         cursor: pointer;
         float: left;
         padding-top: 1px;
-        color: @alto;
+        color: var(--dnn-color-neutral, @alto);
         margin-left: 7px;
-        &:hover {
-            color: @rollingStone;
-        }
-        &.active, &.active:hover {
-            color: @curiousBlue;
+        &:hover, &:active {
+            color: var(--dnn-color-primary, @curiousBlue);
         }
     }
     .clear-button {
-        color: @alto;
+        color: var(--dnn-color-neutral, @alto);
         cursor: pointer;
         height: 9px;
         position: absolute;
@@ -80,11 +77,12 @@
         top: 3px;
         font-size: 26px;
         &:hover {
-            color: @rollingStone;
+            color: var(--dnn-color-neutral-dark, @rollingStone);
         }
     }
     .calendar-text {
-        border: 1px solid #b0afae;
+        border: 1px solid var(--dnn-color-foreground-light, #b0afae);
+        border-radius: var(--dnn-controls-radius, 0);
         padding: 8px 12px;
         cursor: pointer;
         min-height: 16px;
@@ -118,7 +116,7 @@
             position: absolute;
             display: block;
             cursor: pointer;
-            border: 1px solid #ccc;
+            border: 1px solid var(--dnn-color-neutral, #ccc);
             padding: 0;
             width: 28px;
             height: 28px;
@@ -148,7 +146,7 @@
             text-transform: uppercase;
             padding: 10px 0;
             font-weight: 600;
-            color: @bulgarianRose;
+            color: var(--dnn-color-foreground, @bulgarianRose);
         }
         .DayPicker-Weekdays {
             width: 100%;
@@ -157,14 +155,14 @@
                 width: 100%;
                 float: left;
                 .DayPicker-Weekday {
-                    color: #fff;
+                    color: var(--dnn-color-background, #fff);
                     line-height: 30px;
                     text-align: center;
                     background-color: @alto;
                     width: 14.28%;
                     box-sizing: border-box;
                     float: left;
-                    border: 2px solid #fff;
+                    border: 2px solid var(--dnn-color-background, #fff);
                 }
             }
         }
@@ -179,18 +177,18 @@
             cursor: pointer;
             display: block;
             padding: 6px 0 6px 0;
-            color: @rollingStone;
+            color: var(--dnn-color-neutral, @rollingStone);
             font-size: 11px;
             font-family: inherit;
             line-height: 15px;
             text-align: center;
-            background: @mercury;
+            background: var(--dnn-color-background, @mercury);
             box-sizing: border-box;
-            border: 2px solid #fff;
+            border: 2px solid var(--dnn-color-background, #fff);
             outline: 0 !important;
             &.DayPicker-Day--selected {
-                background: @curiousBlue !important;
-                color: #fff;
+                background: var(--dnn-color-primary, @curiousBlue) !important;
+                color: var(--dnn-color-primary-contrast, #fff);
             }
             &.DayPicker-Day--outside {
                 opacity: 0;
@@ -199,50 +197,40 @@
             &.DayPicker-Day--disabled {
                 pointer-events: none;
                 cursor: default;
-                color: #999;
+                color: var(--dnn-color-neutral, #999);
                 opacity: .3;
             }
             &:hover {
-                background: @alto;
+                background: var(--dnn-color-neutral-light, @alto);
             }
         }
     }
     button[role="primary"] {
         float: right;
         margin: 10px;
-        background: @curiousBlue;
-        color: white;
+        background: var(--dnn-color-primary, @curiousBlue);
+        color: var(--dnn-color-primary-contrast, white);
         padding: 9px 20px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
-        &:hover {
-            background: @cerulean;
-        }
-        &:active {
-            background: @matisse;
+        &:hover, &:active {
+            background: var(--dnn-color-primary-light, @cerulean);
         }
     }
     button[role="secondary"] {
         float: right;
         height: 34px;
         margin: 10px;
-        background: @white;
-        color: @curiousBlue;
+        background: var(--dnn-color-primary-contrast, @white);
+        color: var(--dnn-color-primary, @curiousBlue);
         padding: 0 22px;
-        border: 1px solid @curiousBlue;        
+        border: 1px solid var(--dnn-color-primary, @curiousBlue);
         border-radius: 4px;
         cursor: pointer;
-        &:hover {
-            color: @cerulean;
-            border-color: @cerulean;
-        }
-        &:focus{
-            outline: none;
-        }
-        &:active {
-            color: @matisse;
-            border-color: @matisse;
+        &:hover, &:active {
+            color: var(--dnn-collor-primary-light, @cerulean);
+            border-color: var(--dnn-collor-primary-light, @cerulean);
         }
     }
     .date-input {
@@ -268,7 +256,7 @@
                 height: 0;
                 border-left: 4.88px solid transparent;
                 border-right: 4.88px solid transparent;
-                border-top: 4.34px solid #6f7273;
+                border-top: 4.34px solid var(--dnn-color-neutral, #6f7273);
                 z-index: 2;
                 pointer-events: none;
             }
@@ -344,12 +332,12 @@
         
         
         float: left;
-        border-top: 1px solid @mercury;
+        border-top: 1px solid var(--dnn-color-neutral-light, @mercury);
         margin-left: 10px;
         pointer-events: none;
         .time-text {
             position: relative;
-            color: @curiousBlue;
+            color: var(--dnn-color-primary, @curiousBlue);
             font-weight: 600;
             letter-spacing: 1px;
             height: 16px;
@@ -363,17 +351,17 @@
                 height: 0;
                 border-left: 3px solid transparent;
                 border-right: 3px solid transparent;
-                border-top: 4px solid @curiousBlue;
+                border-top: 4px solid var(--dnn-color-primary, @curiousBlue);
             }
             .time-selector {
                 height: 132px;
                 overflow: hidden;
-                background: white;
+                background: var(--dnn-color-background, white);
                 position: absolute;
                 left: 50%;
                 transform: translate(-50%);
                 top: 31px;
-                border: 1px solid @alto;
+                border: 1px solid var(--dnn-color-neutral, @alto);
                 padding: 5px 0px;
                 box-sizing: border-box;
                 box-shadow: 0px 0px 17px 2px rgba(0, 0, 0, .2);
@@ -387,12 +375,12 @@
                     overflow-x: auto;
                     height: 100%;
                     .time-option {
-                        color: @rollingStone;
+                        color: var(--dnn-color-neutral, @rollingStone);
                         padding: 5px;
                         cursor: pointer;
                         &:hover {
-                            background: @gallery;
-                            color: @curiousBlue;
+                            background: var(--dnn-color-primary-contrast, @gallery);
+                            color: var(--dnn-color-primary, @curiousBlue);
                         }
                     }
                 }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DnnTabs/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DnnTabs/style.less
index 774201c4799..331210f209f 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DnnTabs/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DnnTabs/style.less
@@ -12,7 +12,7 @@
     &.primary {
         > ul {
             padding: 0;
-            background-color: @mercury;
+            background-color: var(--dnn-color-surface, @mercury);
             border: none;
             margin: 0;
             li {
@@ -21,7 +21,7 @@
                 padding: 17px 44px;
                 font-size: 10pt;
                 bottom: 0px;
-                color: @bulgarianRose;
+                color: var(--dnn-color-surface-contrast, @bulgarianRose);
                 display: inline-block;
                 &:focus {
                     box-shadow: none;
@@ -36,14 +36,15 @@
                 }
                 &[aria-selected=true] {
                     border: none;
-                    background: @white;
+                    background: var(--dnn-color-background, @white);
                 }
             }
         }
     }
     &.secondary {
+        --soft-foreground: rgba(var(--dnn-color-foreground-r, 0), var(--dnn-color-foreground-g, 0), var(--dnn-color-foreground-b, 0), 0.6);
         > ul {
-            border-bottom: 1px solid @alto;
+            border-bottom: 1px solid var(--soft-foreground);
             margin: 0;
             li {
                 display: inline-block;
@@ -56,19 +57,19 @@
                 bottom: 0;
                 border: none;
                 border-bottom: 3px solid transparent;
-                color: @mountainMist;
+                color: var(--soft-foreground);
                 &:last-child {
                     margin-right: 0;
                 }
                 &[aria-selected=true] {
                     background-color: transparent;
                     border: none;
-                    border-bottom: 3px solid @curiousBlue;
+                    border-bottom: 3px solid var(--dnn-color-primary, @curiousBlue);
                     color: @curiousBlue !important;
                     &:focus {
                         box-shadow: none;
                         outline: medium;
-                        border-color: @curiousBlue !important;
+                        border-color: var(--dnn-color-primary, @curiousBlue) !important;
                         border: none;
                         border-bottom: 3px solid;
                         &:after {
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Dropdown/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Dropdown/style.less
index 7c0f1aba35a..7a2572c56f2 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Dropdown/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Dropdown/style.less
@@ -4,10 +4,10 @@
     display: inline-block;
     cursor: pointer;
     &.disabled {
-        background: @mercury;
-        color: @mountainMist;
+        background: var(--dnn-color-neutral, @mercury);
+        color: var(--dnn-color-neutral-dark, @mountainMist);
         svg {
-            fill: @mountainMist;
+            fill: var(--dnn-color-neutral-dark, @mountainMist);
         }
         cursor: not-allowed;
         .collapsible-label {
@@ -16,26 +16,27 @@
     }
     &.open {
         .collapsible-content {
-            background: @white;
-            border: 1px solid @alto;
+            background: var(--dnn-color-background, @white);
+            border: 1px solid var(--dnn-color-foreground-light, @alto);
             margin-top: 3px;
         }
         &.with-border {
-            border: 1px solid @curiousBlue;
+            border: 1px solid var(--dnn-color-primary-light, @curiousBlue);
         }
     }
     &.with-border {
-        border: 1px solid @mountainMist;
+        border: 1px solid var(--dnn-color-foreground-light, @mountainMist);
+        border-radius: var(--dnn-controls-radius, 0);
         .collapsible-content {
             box-shadow: none;
             margin-top: 0;
             &.open {
-                border: 1px solid @alto;
+                border: 1px solid var(--dnn-color-foreground-light, @alto);
                 border-top: none;
             }
         }
         &.disabled {
-            border: 1px solid @mercury;
+            border: 1px solid var(--dnn-color-neutral, @mercury);
         }
     }
     &.large {
@@ -62,7 +63,7 @@
         right: 10px;
         top: 9px;
         svg {
-            fill: @rollingStone;
+            fill: var(--dnn-color-foreground, @rollingStone);
         }
     }
     .collapsible-label {
@@ -72,7 +73,7 @@
         width: 100%;
         font-size: 13px;
         border: none;
-        color: @bulgarianRose;
+        color: var(--dnn-color-foreground, @bulgarianRose);
         overflow: hidden;
         text-overflow: ellipsis;
         padding: 8px 40px 8px 15px;
@@ -92,10 +93,8 @@
         top: 102%;
         width: 100%;
         box-sizing: content-box;
-        background-color: @white;
+        background-color: var(--dnn-color-background, @white);
         z-index: 1000;
-        -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-        -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
         box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
         ul {
             padding: 15px 0 15px 0;
@@ -115,12 +114,12 @@
                 width: 100%;
                 box-sizing: border-box;
                 &.selected {
-                    color: @curiousBlue;
+                    color: var(--dnn-color-primary, @curiousBlue);
                     font-weight: bold;
                 }
                 &:hover {
-                    background-color: @gallery;
-                    color: @curiousBlue;
+                    background-color: var(--dnn-color-neutral-light, @gallery);
+                    color: var(--dnn-color-primary, @curiousBlue);
                 }
             }
         }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DropdownWithError/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DropdownWithError/style.less
index 5c7f6619c38..7160ec351f8 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DropdownWithError/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/DropdownWithError/style.less
@@ -5,13 +5,13 @@
     &.disabled {
         .dnn-label {
             label {
-                color: @mountainMist;
+                color: var(--dnn-color-neutral, @mountainMist);
                 cursor: not-allowed;
             }
         }
         .dropdown-tooltip-container {
             .dnn-dropdown-input {
-                color: @mountainMist;
+                color: var(--dnn-color-foreground, @mountainMist);
                 cursor: not-allowed;
             }
         }
@@ -24,11 +24,11 @@
         }
     }
     .dnn-dropdown {
-        color: @bulgarianRose;
+        color: var(--dnn-color-foreground, @bulgarianRose);
     }
     &.error {
         .dnn-dropdown {
-            border-bottom: 2px solid @alizarinCrimson;
+            border-bottom: 2px solid var(--dnn-color-danger, @alizarinCrimson);
         }
     }
     .dnn-ui-common-tooltip {
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/EditableField/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/EditableField/style.less
index 5cb5013d3fe..dcbb2e201b7 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/EditableField/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/EditableField/style.less
@@ -45,7 +45,7 @@
         input, textarea {
             width: 100%;
             opacity: 0;
-            border-radius: 0;
+            border-radius: var(--dnn-controls-radius, 0);
             pointer-events: none;
         }
         textarea {
@@ -58,7 +58,7 @@
             right: 5px;
             font-size: 13px;
             font-weight: bold;
-            color: @curiousBlue;
+            color: var(--dnn-color-primary, @curiousBlue);
             opacity: 0;
             transition: .2s;
             transition-delay: 0s;
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FileUpload/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FileUpload/style.less
index ae77f53cc8e..bc0a40cbc74 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FileUpload/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FileUpload/style.less
@@ -4,13 +4,13 @@
     float: left;
     width: 304px;
     height: 162px;
-    background: @alabaster;
-    border: 12px solid white;
-    outline: 1px solid @mountainMist;
+    background: var(--dnn-color-surface, @alabaster);
+    border: 12px solid var(--dnn-color-background, white);
+    outline: 1px solid var(--dnn-color-foreground-light, @mountainMist);
     position: relative;
+    border-radius: var(--dnn-controls-radius, 0);
     .overlay {        
         position: absolute;
-        background: rgba(30, 136, 195, .0);
         top: -12px;
         bottom: -12px;
         left: -12px;
@@ -19,16 +19,20 @@
         transition: @transition;
         z-index: 1;
         &.hover {
-            background: rgba(30, 136, 195, .6);
+            background: rgba(
+                var(--dnn-color-primary-r, 30),
+                var(--dnn-color-primary-g, 136),
+                var(--dnn-color-primary-b, 195),
+                0.6);
             * {
                 pointer-events: none;
             }
             span {
-                color: white;
+                color: var(--dnn-color-background, white);
             }
             .buttons {
                 .button.upload {
-                    color: white;
+                    color: var(--dnn-color-background, white);
                 }
             }
         }
@@ -39,21 +43,25 @@
             }
         }
         &:hover {
-            background: rgba(30, 136, 195, .6);
+            background: rgba(
+                var(--dnn-color-primary-r, 30),
+                var(--dnn-color-primary-g, 136),
+                var(--dnn-color-primary-b, 195),
+                0.6);
             span {
-                color: white;
+                color: var(--dnn-color-background, white);
             }
             .buttons {
                 &:hover {
                     .button {
                         color: @alto;
                         &:hover {
-                            color: white;
+                            color: var(--dnn-color-background, white);
                         }
                     }
                 }
                 .button {
-                    color: white;
+                    color: var(--dnn-color-background, white);
                 }
             }
         }
@@ -62,7 +70,7 @@
             float: left;
             width: 128px;
             box-sizing: border-box;
-            color: @rollingStone;
+            color: var(--dnn-color-surface-contrast, @rollingStone);
             transition: @transition;
         }
         .buttons {
@@ -77,7 +85,7 @@
                 width: 32px;
                 height: 32px;
                 padding: 0 17.5px;
-                color: @alto;
+                color: var(--dnn-color-foreground, @alto);
                 cursor: pointer;
                 position: relative;
                 overflow: hidden;
@@ -109,18 +117,18 @@
         bottom: -12px;
         left: -12px;
         right: -12px;
-        background: white;
+        background: var(--dnn-color-background, white);
         padding: 14px 22px;
         z-index: 2;
         h4 {
             margin-bottom: 8px;
-            color: @bulgarianRose;
+            color: var(--dnn-color-foreground, @bulgarianRose);
         }
         .textarea-container {
             float: left;
             width: 100%;
             height: 90px;
-            border: 1px solid @mountainMist;
+            border: 1px solid var(--dnn-color-foreground, @mountainMist);
             position: relative;
             textarea {
                 resize: none;
@@ -130,19 +138,19 @@
                 outline: none !important;
                 padding: 10px;
                 box-sizing: border-box;
-                color: @bulgarianRose;
+                color: var(--dnn-color-foreground, @bulgarianRose);
             }
         }
         span {
             float: right;
             margin-right: 10px;
-            color: @curiousBlue;
+            color: var(--dnn-color-primary, @curiousBlue);
         }
         .drop-down {
             width: 100%;
             float: left;
             height: 30px;
-            border: 1px solid @mountainMist;
+            border: 1px solid var(--dnn-color-foreground, @mountainMist);
             margin-bottom: 16px;
             position: relative;
             &:after {
@@ -155,7 +163,7 @@
                 pointer-events: none;
                 border-left: 6px solid transparent;
                 border-right: 6px solid transparent;
-                border-top: 6px solid @rollingStone;
+                border-top: 6px solid var(--dnn-color-foreground, @rollingStone);
             }
         }
     }
@@ -190,7 +198,7 @@
         background-color: @alabaster;
         padding: 3px 10px;
         border-radius: 3px;
-        border: solid 1px lightgray;
+        border: solid 1px var(--dnn-color-background, lightgray);
         opacity: 0.8;
     }
 }
@@ -204,12 +212,12 @@
             opacity: 0;
         }
         .upload-bar-container {
-            color: @curiousBlue;
+            color: var(--dnn-color-primary, @curiousBlue);
             float: left;
             width: 100%;
             height: 100%;
-            border: 1px solid @curiousBlue;
-            background: #f4f6f7;
+            border: 1px solid var(--dnn-color-primary, @curiousBlue);
+            background: var(--dnn-color-background, #f4f6f7);
             padding: 5px 20px;
             box-sizing: border-box;
             .upload-file-name {
@@ -223,7 +231,7 @@
                 margin: auto;
             }
             h4 {
-                color: @curiousBlue;
+                color: var(--dnn-color-primary, @curiousBlue);
                 margin: auto;
                 text-align: center;
                 font-size: 14px;
@@ -234,12 +242,12 @@
                 float: left;
                 width: 100%;
                 height: 4px;
-                background: @alto;
+                background: var(--dnn-color-background, @alto);
                 margin-top: 5px;
                 .upload-bar {
                     width: 0;
                     float: left;
-                    background: @curiousBlue;
+                    background: var(--dnn-color-primary, @curiousBlue);
                     height: 100%;
                     left: 0px;
                     transition: .1s;
@@ -249,13 +257,13 @@
     }
     &.upload-error {
         .upload-bar-container {
-            border: 1px solid @alizarinCrimson;
-            color: @alizarinCrimson;
+            border: 1px solid var(--dnn-color-danger, @alizarinCrimson);
+            color: var(--dnn-color-danger, @alizarinCrimson);
             h4 {
-                color: @alizarinCrimson;
+                color: var(--dnn-color-danger, @alizarinCrimson);
             }
             .upload-bar-box {
-                background: @alizarinCrimson;
+                background: var(--dnn-color-danger, @alizarinCrimson);
             }
         }
     }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FolderPicker/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FolderPicker/style.less
index d7f2c5fba8f..b2370ceed0a 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FolderPicker/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/FolderPicker/style.less
@@ -13,7 +13,8 @@
     width: 100%;
     float: left;
     height: 30px;
-    border: 1px solid @mountainMist;
+    border: 1px solid var(--dnn-color-foreground-light, @mountainMist);
+    border-radius: var(--dnn-controls-radius, 0);
     margin-bottom: 16px;
     position: relative;
     
@@ -27,7 +28,7 @@
         pointer-events: none;
         border-left: 6px solid transparent;
         border-right: 6px solid transparent;
-        border-top: 6px solid @rollingStone;
+        border-top: 6px solid var(--dnn-color-neutral, @rollingStone);
     }
 
     .selected-item {
@@ -54,8 +55,9 @@
         top: ~"calc(100% + 1px)";
         left: -1px;
         width: 100%;
-        border: 1px solid @alto;
-        background: white;
+        border: 1px solid var(--dnn-color-foreground-light, @alto);
+        border-radius: var(--dnn-controls-radius, 0);
+        background: var(--dnn-color-background, white);
         z-index: 1;
         transition: @transition;
         overflow: hidden;
@@ -76,7 +78,8 @@
             .search {
                 float: left;
                 width: 100%;
-                border: 1px solid @alto;
+                border: 1px solid var(--dnn-color-foreground-light, @alto);
+                border-radius: var(--dnn-controls-radius, 0);
                 position: relative;
                 .clear-button {
                     position: absolute;
@@ -98,7 +101,7 @@
                     top: 50%;
                     transform: translate(0, -50%);
                     height: 24px;
-                    color: @rollingStone;
+                    color: var(--dnn-color-foreground, @rollingStone);
                 }
                 input[type="text"] {
                     float: left;
@@ -111,7 +114,7 @@
             .items {
                 float: left;
                 width: 100%;
-                border: 1px solid @alto;
+                border: 1px solid var(--dnn-color-foreground, @alto);
                 height: 200px;
                 margin-top: 14px;
                 &, * {
@@ -140,7 +143,7 @@
                 width: 100%;
                 padding-top: 4px;
                 &:hover {
-                    color: @curiousBlue;
+                    color: var(--dnn-color-primary, @curiousBlue);
                 }   
             }
             & > ul {
@@ -192,7 +195,7 @@
                     height: 0;
                     border-top: 4px solid transparent;
                     border-bottom: 4px solid transparent;
-                    border-left: 4px solid @rollingStone;
+                    border-left: 4px solid var(--dnn-color-neutral, @rollingStone);
                 }
             }
         }
@@ -215,7 +218,7 @@
                 width: 100%;
                 padding-top: 4px;
                 &:hover {
-                    color: @curiousBlue;
+                    color: var(--dnn-color-primary, @curiousBlue);
                 }   
             }
             & > ul {
@@ -267,7 +270,7 @@
                     height: 0;
                     border-top: 4px solid transparent;
                     border-bottom: 4px solid transparent;
-                    border-left: 4px solid @rollingStone;
+                    border-left: 4px solid var(--dnn-color-neutral, @rollingStone);
                 }
             }
         }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/IconButton/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/IconButton/style.less
index 48c6ae086bb..02e5df0a7c9 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/IconButton/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/IconButton/style.less
@@ -3,18 +3,26 @@
     display: inline-block;
     svg{
         vertical-align: top;
-        fill: @alto;
+        fill: rgba(
+            var(--dnn-color-foreground-r, 0),
+            var(--dnn-color-foreground-g, 0),
+            var(--dnn-color-foreground-b, 0),
+            0.5);
     }
 
     &:hover{
         svg{
-            fill: @thunder;
+            fill: rgba(
+                var(--dnn-color-foreground-r, 0),
+                var(--dnn-color-foreground-g, 0),
+                var(--dnn-color-foreground-b, 0),
+                0.8)
         }
     }
 
     &:active, &.activated{
         svg{
-            fill: @curiousBlue;
+            fill: var(--dnn-color-primary, @curiousBlue);
         }
     }
 }
@@ -22,6 +30,10 @@
     display: inline-block;
     svg{
         vertical-align: top;
-        fill: @alto;
+        fill: rgba(
+            var(--dnn-color-foreground-r, 0),
+            var(--dnn-color-foreground-g, 0),
+            var(--dnn-color-foreground-b, 0),
+            0.5);
     }
 }
\ No newline at end of file
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/InputGroup/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/InputGroup/style.less
index c11bcebc393..463179278d6 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/InputGroup/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/InputGroup/style.less
@@ -9,9 +9,9 @@
             border-right: 0;
             border-radius: 3px;
             padding: 8px 16px;
-            border: 1px solid #CCCCCC;
+            border: 1px solid var(--dnn-color-surface, #CCCCCC);
             border-right: none;
-            color: #B3B3B3;
+            color: var(--dnn-color-surface-dark, #B3B3B3);
             text-align: center;
             width: 1%;
             white-space: nowrap;
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Label/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Label/style.less
index 2d4b44fbd64..ba6d753bf96 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Label/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Label/style.less
@@ -4,7 +4,7 @@
     width: 100%;
     label {
         margin-right: 10px;
-        color: @bulgarianRose;
+        color: var(--dnn-color-foreground, @bulgarianRose);
     }
     &.inline {
         float: left;
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Modal/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Modal/style.less
index bbaedbbb852..b8978023016 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Modal/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Modal/style.less
@@ -4,12 +4,16 @@
     .modal-header {
         width: 100%;
         height: 50px;
-        border-bottom: 1px solid @alto;
+        border-bottom: 1px solid rgba(
+            var(--dnn-color-foreground-r, 0),
+            var(--dnn-color-foreground-g, 0),
+            var(--dnn-color-foreground-b, 0),
+            0.5);
         h3 {
             font-size: 18px;
             padding: 15px 30px;
             float: left;
-            color: @bulgarianRose;
+            color: var(--dnn-color-foreground, @bulgarianRose);
         }
         .close-modal-button{
             width: 16px;
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/MultiLineInput/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/MultiLineInput/style.less
index be95fe472d1..290b8b890a1 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/MultiLineInput/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/MultiLineInput/style.less
@@ -3,23 +3,23 @@
     resize: none;
     width: 100%;
     margin-bottom: 10px;
-    border-radius: 3px;
-    background-color: @white;
-    border: 1px solid @mountainMist;
+    background-color: var(--dnn-color-background, @white);
+    border: 1px solid var(--dnn-color-foreground-light, @mountainMist);
+    border-radius: var(--dnn-controls-radius, 0);
     box-sizing: border-box;
     padding: 8px 16px 8px !important;
     min-height: 142px;
-    color: @bulgarianRose;
+    color: var(--dnn-color-foreground, @bulgarianRose);
     &:focus {
-        border: 1px solid @curiousBlue;
+        border: 1px solid var(--dnn-color-primary, @curiousBlue);
         outline: none;
     }
     &:disabled {
-        background: @mercury;
-        border-color: @mercury;
+        background: var(--dnn-color-neutral, @mercury);
+        border-color: var(--dnn-color-neutral, @mercury);
     }
 }
 
 ::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
-    color: @alto;
+    color: var(--dnn-color-foreground-light, @alto);
 }
\ No newline at end of file
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/MultiLineInputWithError/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/MultiLineInputWithError/style.less
index 85309087de9..5edaa716daf 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/MultiLineInputWithError/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/MultiLineInputWithError/style.less
@@ -10,15 +10,16 @@
         }
     }
     textarea {
-        color: @bulgarianRose;
+        color: var(--dnn-color-foreground, @bulgarianRose);
+        border: 1px solid var(--dnn-color-foreground-light, @mountainMist);
     }
     &.error {
         .input-tooltip-container {
             .dnn-ui-common-multi-line-input {
-                border-bottom: 2px solid @alizarinCrimson;
+                border-bottom: 2px solid var(--dnn-color-danger, @alizarinCrimson);
             }
             .dnn-inline-counter {
-                color: @alizarinCrimson;
+                color: var(--dnn-color-danger, @alizarinCrimson);
                 right: 26px;
             }
         }
@@ -26,10 +27,10 @@
     &.warning {
         .input-tooltip-container {
             .dnn-ui-common-multi-line-input {
-                border-bottom: 2px solid #EA9C00;
+                border-bottom: 2px solid var(--dnn-color-warning, #EA9C00);
             }
             .dnn-inline-counter {
-                color: #EA9C00;
+                color: var(--dnn-color-warning, #EA9C00);
                 right: 26px;
             }
         }
@@ -37,13 +38,13 @@
     &.disabled {
         .dnn-label {
             label {
-                color: @mountainMist;
+                color: var(--dnn-color-neutral, @mountainMist);
                 cursor: not-allowed;
             }
         }
         .input-tooltip-container {
             .dnn-ui-common-multi-line-input {
-                color: @mountainMist;
+                color: var(--dnn-color-neutral, @mountainMist);
                 cursor: not-allowed;
             }
         }
@@ -54,11 +55,11 @@
         width: 100%;
         .dnn-ui-common-multi-line-input{
             width: 100%;
-            border-radius: 0px;
+            border-radius: var(--dnn-controls-radius, 0);
         }
         .dnn-inline-counter {
             position: absolute;
-            color: @curiousBlue;
+            color: var(--dnn-color-primary, @curiousBlue);
             bottom: 13px;
             right: 7px;
         }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/NumberSlider/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/NumberSlider/style.less
index 2c939bb53b7..d4c25423847 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/NumberSlider/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/NumberSlider/style.less
@@ -13,9 +13,9 @@
         }
     }
     .slider {
-        background: #c6c6c6;
+        background: var(--dnn-color-surface, #c6c6c6);
         height: 10px;
-        border: 1px solid #6891a7;
+        border: 1px solid var(--dnn-color-primary-light, #6891a7);
         border-radius: 10px;
         width: 100%;
         float: left;
@@ -24,13 +24,13 @@
             width: 20px;
             height: 20px;
             border-radius: 100%;
-            background: #fff;
-            border: 1px solid #bfbfbf;
+            background: var(--dnn-color-background, #fff);
+            border: 1px solid var(--dnn-color-primary-light, #bfbfbf);
             top: -6px;
             & > div {
                 position: absolute;
                 top: -100%;
-                background: #fff;
+                background: var(--dnn-color-background, #fff);
                 left: 50%;
                 transform: translate(-50%, 0);
             }
@@ -39,7 +39,7 @@
             height: 100%;
             &.track-0 {
                 border-radius: 10px;
-                background: #0087c6;
+                background: var(--dnn-color-primary, #0087c6);
             }
         }
     }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PagePicker/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PagePicker/style.less
index df03729f6d1..4402357c3c2 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PagePicker/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PagePicker/style.less
@@ -21,7 +21,7 @@
         right: 10px;
         top: 11px;
         svg {
-            fill: @rollingStone;
+            fill: var(--dnn-color-foreground-light, @rollingStone);
         }
     }
     .collapsible-label {
@@ -33,7 +33,7 @@
         padding: 10px 40px 8px 15px;
         box-sizing: border-box;
         border: none;
-        color: @bulgarianRose;
+        color: var(--dnn-color-foreground, @bulgarianRose);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -44,10 +44,8 @@
         top: 38px;
         width: 100%;
         box-sizing: border-box;
-        background-color: @white;
+        background-color: var(--dnn-color-background, @white);
         z-index: 1000;
-        -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-        -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
         box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
         border: 0px;
         visibility: hidden;
@@ -65,7 +63,7 @@
                 padding: 0 15px;
                 list-style: none;
                 font-size: 13px;
-                color: @rollingStone;
+                color: var(--dnn-color-foreground, @rollingStone);
                 li {
                     font-size: 15px;
                     position: relative;
@@ -77,7 +75,7 @@
                         svg {
                             position: absolute;
                             left: -18px;
-                            fill: @mountainMist;
+                            fill: var(--dnn-color-foreground, @mountainMist);
                             width: 15px;
                             height: 15px;
                         }
@@ -100,7 +98,7 @@
                             svg {
                                 width: 16px;
                                 height: 16px;
-                                fill: @mountainMist;
+                                fill: var(--dnn-color-foreground, @mountainMist);
                                 position: absolute;
                                 left: 0;
                             }
@@ -116,25 +114,25 @@
                                 text-indent: 0px;
                             }
                             &:hover {
-                                color: @curiousBlue;
+                                color: var(--dnn-color-primary, @curiousBlue);
                                 svg {
                                     fill: @curiousBlue;
                                 }
                             }
                         }
                         &.selected {
-                            color: @curiousBlue;
+                            color: var(--dnn-color-primary, @curiousBlue);
                             svg {
-                                fill: @curiousBlue;
+                                fill: var(--dnn-color-primary, @curiousBlue);
                             }
                         }
                         &.non-selectable {
                             cursor: not-allowed;
                             >div {
                                 &:hover {
-                                    color: @rollingStone;
+                                    color: var(--dnn-color-foreground-light, @rollingStone);
                                     svg {
-                                        fill: @rollingStone;
+                                        fill: var(--dnn-color-foreground-light, @rollingStone);
                                     }
                                 }
                             }
@@ -149,7 +147,7 @@
             padding-top: 10px;
         }
         input[type="search"] {
-            border: 1px solid @alto !important;
+            border: 1px solid var(--dnn-color-foreground-light, @alto) !important;
             margin-bottom: 10px;
             padding-right: 30px;
             &:focus {
@@ -175,20 +173,21 @@
             margin-top: 3px;
         }
         &.with-border {
-            border: 1px solid @curiousBlue;
+            border: 1px solid var(--dnn-color-primary, @curiousBlue);
         }
     }
     &.with-border {
-        border: 1px solid @mountainMist;
+        border: 1px solid var(--dnn-color-foreground-light, @mountainMist);
+        border-radius: var(--dnn-controls-radius, 0);
         .collapsible-content {
             margin-top: 0;
             &.open {
-                border: 1px solid @alto;
+                border: 1px solid var(--dnn-color-foreground-light, @alto);
                 border-top: none;
             }
         }
         &.disabled {
-            border: 1px solid @mercury;
+            border: 1px solid var(--dnn-color-neutral, @mercury);
         }
     }
 }
\ No newline at end of file
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Pager/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Pager/style.less
index 5308ef982bf..d7a7e213b7b 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Pager/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Pager/style.less
@@ -36,8 +36,6 @@
             width: auto;
             max-width: 60%;
             float: right;
-            //top: -8px;
-            //position: relative;
             ul {
                 margin: 0;
                 padding: 0;
@@ -48,7 +46,7 @@
                     width: auto;
                     padding: 0px 5px;
                     height: 32px;
-                    border: 1px solid @alto;
+                    border: 1px solid var(--dnn-color-foreground-light, @alto);
                     float: left;
                     margin-left: -1px;
                     cursor: pointer;
@@ -56,9 +54,9 @@
                     text-align: center;
                 }
                 li.pages:not(.disabled):hover {
-                    color: @thunder;
+                    color: var(--dnn-color-foreground-light, @thunder);
                     svg {
-                        fill: @thunder;
+                        fill: var(--dnn-color-foreground-light, @thunder);
                     }
                 }
                 li.prev, li.next {
@@ -70,7 +68,7 @@
                     }
                 }
                 li.current {
-                    color: @curiousBlue;
+                    color: var(--dnn-color-primary, @curiousBlue);
                     cursor: auto;
                     font-weight: bold;
                 }
@@ -78,12 +76,12 @@
                     opacity: 0.5;
                 }
                 .text {
-                    color: @alto;
+                    color: var(--dnn-color-foreground-light, @thunder);
                     &:hover {
-                        color: @thunder
+                        color: var(--dnn-color-foreground-light, @thunder)
                     }
                     &:active {
-                        color: @curiousBlue;
+                        color: var(--dnn-color-primary, @curiousBlue);
                     }
                 }
                 .icon-button {
@@ -96,12 +94,12 @@
                     }
                     &:hover {
                         svg {
-                            fill: @thunder;
+                            fill: var(--dnn-color-foreground-light, @thunder);
                         }
                     }
                     &:active, &.activated {
                         svg {
-                            fill: @curiousBlue;
+                            fill: var(--dnn-color-primary, @curiousBlue);
                         }
                     }
                 }
@@ -109,7 +107,7 @@
                     display: inline-block;
                     svg {
                         vertical-align: top;
-                        fill: @alto;
+                        fill: var(--dnn-color-foreground-light, @alto);
                         width: 16px;
                         height: 16px;
                     }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PermissionGrid/Grid.jsx b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PermissionGrid/Grid.jsx
index 1ee4ac6c4c3..80cf7571cec 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PermissionGrid/Grid.jsx
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PermissionGrid/Grid.jsx
@@ -105,7 +105,7 @@ class Grid extends Component {
 
         let self = this;
         return (
-            <GridCell style={{"display":"table"}}className={props.type + "-permissions-grid"}>
+            <GridCell style={{"display":"table"}} className={props.type + "-permissions-grid"}>
                 <GridCaption service={props.service} localization={props.localization} type={props.type} onSuggestion={this.onSuggestion.bind(this) } />
                 <GridHeader type={props.type} definitions={props.definitions}
                     roleColumnWidth={roleColumnWidth}
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PermissionGrid/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PermissionGrid/style.less
index 0e996e8ce83..4c1f03e4e77 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PermissionGrid/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PermissionGrid/style.less
@@ -1,13 +1,13 @@
 @import "../../styles/index";
 .permissions-grid {
     .grid-caption {
-        border-bottom: 1px solid @alto;
+        border-bottom: 1px solid var(--dnn-color-foreground-light, @alto);
         padding: 0;
         & > .dnn-label {
             line-height: 38px;
             margin-top: 35px;
             font-weight: bold;
-            color: @bulgarianRose;
+            color: var(--dnn-color-foreground, @bulgarianRose);
         }
         .title {
             text-transform: uppercase;
@@ -20,14 +20,16 @@
         margin-top: 20px;
         min-height: 40px;
         height: auto;
-        border: 1px solid @alto;
+        border: 1px solid var(--dnn-color-foreground-light, @alto);
         font-weight: 600;
         text-transform: uppercase;
         .dnn-grid-cell {
-            border-left: 1px solid @alto;
+            border-left: 1px solid var(--dnn-color-foreground-light, @alto);
             min-height: 40px;
             position: relative;
             text-align: center;
+            display: flex;
+            align-items: center;
             &:first-child {
                 border-left: none;
                 padding-left: 5px;
@@ -48,13 +50,14 @@
     }
     .grid-row {
         min-height: 40px;
-        border: 1px solid @alto;
+        border: 1px solid var(--dnn-color-foreground-light, @alto);
         border-top: none;
         .dnn-grid-cell {
-            border-left: 1px solid @alto;
+            border-left: 1px solid var(--dnn-color-foreground-light, @alto);
             min-height: 40px;
-            text-align: center;
-            padding-top: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             &:first-child {
                 border-left: none;
                 padding-left: 5px;
@@ -62,7 +65,7 @@
                 text-overflow: ellipsis;
                 overflow:hidden;
                 span {
-                    display : block;
+                    display: block;
                     text-overflow: ellipsis;
                     overflow:hidden;
                     white-space: nowrap;
@@ -76,16 +79,22 @@
                 width: 16px;
                 height: 16px;
                 svg {
-                    fill: @rollingStone;
+                    fill: var(--dnn-color-foreground, @rollingStone);
                     width: 16px;
                 }
+                &[aria-label=trash] {
+                    svg {
+                        fill: var(--dnn-color-danger, @alizarinCrimson);
+                    }
+                }
             }
             .icon-flat.locked, .icon-button.locked {
                 svg {
-                    fill: @alto;
-                    background-color: @mercury;
+                    fill: var(--dnn-color-foreground, @alto);
+                    background-color: transparent;
                     width: 14px;
                     height: 14px;
+                    opacity: 0.5;
                 }
             }
             &.col-actions {
@@ -98,9 +107,9 @@
         height: 70px;
         line-height: 70px;
         text-transform: uppercase;
-        border: 1px solid @alto;
+        border: 1px solid var(--dnn-color-foreground-light, @alto);
         border-top: none;
-        color: @alto;
+        color: var(--dnn-color-foreground-light, @alto);
         font-weight: bold;
         text-align: center;
     }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PersonaBarPage/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PersonaBarPage/style.less
index f2c29e929e3..c6f9187e52a 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PersonaBarPage/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PersonaBarPage/style.less
@@ -5,7 +5,7 @@
     width: 100%;
     min-height: 100%;
     height: auto;
-    background-color: #fafafa;
+    background-color: var(--dnn-color-surface-light, #fafafa);
     visibility: hidden;
     opacity: 0;
     transition: all 0.3s ease-in-out;
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PersonaBarPageBody/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PersonaBarPageBody/style.less
index 8367302764b..d3ba9ed8331 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PersonaBarPageBody/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PersonaBarPageBody/style.less
@@ -24,17 +24,17 @@
     }
     .dnn-workspace-tray {
         height: 44px;
-        border-bottom: 1px solid @alto;
+        border-bottom: 1px solid var(--dnn-color-surface-dark, @alto);
         margin-bottom: 15px;
     }
 
     .persona-bar-page-body {
-        background: @white;
-        border: 1px solid @alto;
+        background: var(--dnn-color-background, @white);
+        border: 1px solid var(--dnn-color-surface-dark, @alto);
 
         .dnn-workspace-tray {
             padding: 14px 0;
-            border-bottom: 1px solid @alto;
+            border-bottom: 1px solid var(--dnn-color-surface-dark, @alto);
             margin-bottom: 15px;
         }
     }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PersonaBarPageHeader/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PersonaBarPageHeader/style.less
index 9c8871b0508..f73eb842be3 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PersonaBarPageHeader/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PersonaBarPageHeader/style.less
@@ -3,7 +3,7 @@
     position: absolute;
     top: 0;
     width: 100%;
-    background-color: @white;
+    background-color: var(--dnn-color-background, @white);
     .prefixes(box-sizing, border-box);
     min-height: 103px;
     z-index: 1001;
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PortableTransitionModal/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PortableTransitionModal/style.less
index 199e06425b1..3c3dbb810e7 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PortableTransitionModal/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/PortableTransitionModal/style.less
@@ -51,7 +51,7 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        background: #fff;
+        background: var(--dnn-color-background, #fff);
         overflow: hidden;
         .close {
             position: absolute;
@@ -62,13 +62,13 @@
             cursor: pointer;
             width: 37px;
             &:hover {
-                color: #fff;
+                color: var(--dnn-color-background, #fff);
             }
         }
         .header {
             float: left;
             width: 100%;
-            background: #0c3b4f;
+            background: var(--dnn-color-primary-dark, #0c3b4f);
             padding: 20px;
             font-size: 20px;
         }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/RadioButtons/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/RadioButtons/style.less
index 63e8e46dee0..0f7211c2f69 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/RadioButtons/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/RadioButtons/style.less
@@ -11,7 +11,7 @@
     }
     >label {
         float: left;
-        color: @bulgarianRose;
+        color: var(--dnn-color-foreground, @bulgarianRose);
     }
     .dnn-ui-common-tooltip {
         float: left;
@@ -43,7 +43,7 @@
                 word-wrap: break-word;
                 height: auto;
                 margin-bottom: 24px;
-                color: @thunder;
+                color: var(--dnn-color-foreground, @thunder);
             }
             .check {
                 display: block;
@@ -65,23 +65,23 @@
                 visibility: hidden;
             }
             input[type=radio]:checked ~ .check {
-                background: @curiousBlue;
+                background: var(--dnn-color-primary, @curiousBlue);
                 border: none !important;
-                box-shadow: inset 0 0 1px 1px @curiousBlue, inset 0 0 0 4px #fff;
+                box-shadow: inset 0 0 1px 1px var(--dnn-color-primary, @curiousBlue), inset 0 0 0 4px var(--dnn-color-primary-contrast, #fff);
             }
             &.disabled {
                 label {
-                    color: @alto;
+                    color: var(--dnn-color-neutral, @alto);
                     cursor: not-allowed;
                 }
                 &.checked {
                     input[type=radio]:checked ~ .check {
-                        background: @alto;
+                        background: var(--dnn-color-neutral, @alto);
                         box-shadow: inset 0 0 1px 1px @alto, inset 0 0 0 3px @gallery;
                     }
                 }
                 .check {
-                    box-shadow: inset 0 0 1px 1px  @mercury;
+                    box-shadow: inset 0 0 1px 1px var(--dnn-color-foreground-light, @mercury);
                     cursor: not-allowed;
                 }
             }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/ScrollBar/styles.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/ScrollBar/styles.less
index 1d3de9b6119..30e6e29e502 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/ScrollBar/styles.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/ScrollBar/styles.less
@@ -3,13 +3,13 @@
   margin: 0 auto;
   width: 175px;
   min-height: 109px;
-  background: white;
+  background: var(--dnn-color-background, white);
   .container {
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     position: relative;
-    background: white;
+    background: var(--dnn-color-background, white);
   
     padding: 0px;
   }
@@ -44,7 +44,7 @@
       .scrollbar {
         width: 20px;
         height: 6px;
-        background: black;
+        background: var(--dnn-color-foreground, black);
         margin-top: 1px;
         border-collapse: separate;
         border-radius: 3px;
@@ -60,7 +60,7 @@
       .scrollbar {
         width: 6px;
         height: 20px;
-        background: black;
+        background: var(--dnn-color-foreground, black);
         margin-left: 1px;
         border-collapse: separate;
         border-radius: 3px;
@@ -79,12 +79,12 @@
     transition: all 0.4s;
 
     &:hover {
-      background: white;
+      background: var(--dnn-color-background, white);
       opacity: 0.6 !important;
     }
 
     &:active {
-      background: white;
+      background: var(--dnn-color-background, white);
       opacity: 0.6 !important;
     }
   }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/SearchableTags/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/SearchableTags/style.less
index f9265f85423..377b2819a73 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/SearchableTags/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/SearchableTags/style.less
@@ -1,26 +1,27 @@
 @import "../../styles/index";
 .tags-field {
-    background: #fff;
+    background: var(--dnn-color-background, #fff);
     float: left;
     width: 300px;
-    border: 1px solid @mountainMist;
+    border: 1px solid var(--dnn-color-foreground-light, @alto);
+    border-radius: var(--dnn-controls-radius, 0);
     box-sizing: border-box;
     position: relative;
     &.error {
-        border-bottom: 2px solid red;
+        border-bottom: 2px solid var(--dnn-color-danger, red);
     }
     &.disabled {
         &, * {
             pointer-events: none;
         }
-        background: @mercury;
-        border-color: @mercury;
+        background: var(--dnn-color-neutral, @mercury);
+        border-color: var(--dnn-color-neutral, @mercury);
         .tag {
-            background: @alto;
+            background: var(--dnn-color-neutral-light, @alto);
         }
     }
     &.active {
-        border: 1px solid @curiousBlue;
+        border: 1px solid var(--dnn-color-primary, @curiousBlue);
     }
     .dark-form-control {
         padding: 0px !important;
@@ -33,7 +34,7 @@
         padding: 9px 12px;
         background: transparent;
         border: none;
-        color: @bulgarianRose;
+        color: var(--dnn-color-foreground, @bulgarianRose);
         float: left;
         outline: none !important;
     }
@@ -43,8 +44,8 @@
         padding: 3px 18px 3px 7px !important;
         margin-top: 7px;
         margin-left: 9px;
-        background: @curiousBlue;
-        color: white;
+        background: var(--dnn-color-primary, @curiousBlue);
+        color: var(--dnn-color-background, white);
         font-size: 11px;
         .close {
             position: absolute;
@@ -57,19 +58,19 @@
     .tag-search-results {
         position: absolute;
         width: 100%;
-        border: 1px solid @mountainMist;
+        border: 1px solid var(--dnn-color-foreground-light, @alto);
         top: 100%;
         margin-top: 1px;
         border-top: none;
         left: -1px;
         padding: 6px 0px;
-        background: white;
+        background: var(--dnn-color-background, white);
         .result-item {
             padding: 6px 10px;
             cursor: pointer;
             &.selected {
-                background: @gallery;
-                color: @curiousBlue;
+                background: var(--dnn-color-primary, @gallery);
+                color: var(--dnn-color-primary-contrast, @curiousBlue);
             }
         }
     }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Select/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Select/style.less
index 620901dff5c..0e60495395b 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Select/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Select/style.less
@@ -2,16 +2,17 @@
 .dnn-uicommon-select {
     resize: none;       
     border-radius: 3px;       
-    background-color: @white;
-    border: 1px solid @alto;
+    background-color: var(--dnn-color-background, white);
+    border: 1px solid var(--dnn-color-foreground-light, @alto);
+    border-radius: var(--dnn-controls-radius, 0);
     box-sizing: border-box;
     padding: 8px 16px;
     &:focus {
-        background: @white;
-        border: 1px solid @curiousBlue;
+        background: var(--dnn-color-background, white);
+        border: 1px solid var(--dnn-color-primary, @curiousBlue);
     }
     &:disabled {
-        background: @mercury;
-        border: 1px solid @mercury;
+        background: var(--dnn-color-neutral-light, @mercury);
+        border: 1px solid var(--dnn-color-neutral-light, @mercury);
     }
 }
\ No newline at end of file
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/SingleLineInput/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/SingleLineInput/style.less
index 33dba688989..1f18cec1ce8 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/SingleLineInput/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/SingleLineInput/style.less
@@ -1,23 +1,24 @@
 @import "../../styles/index";
 .dnn-ui-common-single-line-input {
-    background-color: @white;
-    border: 1px solid @mountainMist;
+    background-color: var(--dnn-color-background, white);
+    border: 1px solid var(--dnn-color-foreground-light, @mountainMist);
+    border-radius: var(--dnn-controls-radius, 0);
     padding: 8px;
     box-sizing: border-box;
-    color: @bulgarianRose;
+    color: var(--dnn-color-foreground, @bulgarianRose);
     &.large {
         padding: 13px 8px;
     }
     &:focus {
-        border: 1px solid @curiousBlue;
+        border: 1px solid var(--dnn-color-primary, @curiousBlue);
         outline: none;
     }
     &:disabled {
-        background: @mercury;
-        border-color: @mercury;
+        background: var(--dnn-color-neutral, @mercury);
+        border-color: var(--dnn-color-neutral, @mercury);
     }
 }
 
 ::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
-    color: @alto;
+    color: var(--dnn-color-foreground-light, @alto);
 }
\ No newline at end of file
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/SingleLineInputWithError/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/SingleLineInputWithError/style.less
index 57c23fec44a..b606708b092 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/SingleLineInputWithError/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/SingleLineInputWithError/style.less
@@ -5,13 +5,13 @@
     &.disabled {
         .dnn-label {
             label {
-                color: @mountainMist;
+                color: var(--dnn-color-foreground-light, @mountainMist);
                 cursor: not-allowed;
             }
         }
         .input-tooltip-container {
             .dnn-ui-common-single-line-input {
-                color: @mountainMist;
+                color: var(--dnn-color-foreground-light, @mountainMist);
                 cursor: not-allowed;
             }
         }
@@ -24,26 +24,26 @@
         }
     }
     input {
-        color: @bulgarianRose;
+        color: var(--dnn-color-foreground, @bulgarianRose);
     }
     &.error {
         input {
-            border-bottom: 2px solid @alizarinCrimson;
+            border-bottom: 2px solid var(--dnn-color-danger, @alizarinCrimson);
         }
         .input-tooltip-container {
             .dnn-inline-counter {
-                color: @alizarinCrimson;
+                color: var(--dnn-color-danger, @alizarinCrimson);
                 right: 26px;
             }
         }
     }
     &.warning {
         input {
-            border-bottom: 2px solid #EA9C00;
+            border-bottom: 2px solid var(--dnn-color-warning, #EA9C00);
         }
         .input-tooltip-container {
             .dnn-inline-counter {
-                color: #EA9C00;
+                color: var(--dnn-color-warning, #EA9C00);
                 right: 26px;
             }
         }
@@ -54,14 +54,14 @@
         width: 100%;
         .dnn-ui-common-single-line-input{
             width: 100%;
-            border-radius: 0px;
+            border-radius: var(--dnn-controls-radius, 0);
         }
         &.inline {
             width: auto;
         }
         .dnn-inline-counter {
             position: absolute;
-            color: @curiousBlue;
+            color: var(--dnn-color-primary, @curiousBlue);
             top: 9px;
             right: 7px;
         }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Sortable/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Sortable/style.less
index ee1c57defd7..8e12995c1f1 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Sortable/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Sortable/style.less
@@ -11,17 +11,17 @@
         .prefixes(user-select, none);
     }
     &.dragged-over {
-        box-shadow: 0px -2px 0px 0px  #1e88c3 inset;
+        box-shadow: 0px -2px 0px 0px  var(--dnn-color-primary, #1e88c3) inset;
     }
     &.sortable-selected {
-        background: #e9f0f9;
-        color: white;
+        background: var(--dnn-color-background-dark, #e9f0f9);
+        color: var(--dnn-color-background, white);
     }
 }
 
 .dnn-sortable-dragging {
     background: #e9f0f9;
-    border: 1px solid #1e88c3;
+    border: 1px solid var(--dnn-color-primary, #1e88c3);
     cursor: move;
     opacity: .8;
 }
\ No newline at end of file
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Switch/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Switch/style.less
index b70908c7ef7..f8a8fab4ae8 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Switch/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Switch/style.less
@@ -17,7 +17,7 @@
     }
     .switch-label {
         padding-top: 1px;
-        color: @bulgarianRose;
+        color: var(--dnn-color-foreground, @bulgarianRose);
         font-size: 13px;
         font-weight: bold;
         float: left;
@@ -26,7 +26,7 @@
         float: right;
         .on-off-text {
             margin-top: 2px;
-            color: @bulgarianRose;
+            color: var(--dnn-color-foreground, @bulgarianRose);
             &.place-left {
                 float: left;
             }
@@ -40,19 +40,14 @@
         position: relative;
         width: 45px;
         height: 21px;
-        -webkit-border-radius: 14px;
-        -moz-border-radius: 14px;
-        border-radius: 14px;
-        border: 1px solid @mountainMist;
-        background-color: @alto;
+        border-radius: var(--dnn-controls-radius, 14px);
+        border: 1px solid var(--dnn-color-foreground-light, @mountainMist);
+        background-color: var(--dnn-color-background-dark, @alto);
         margin: 0;
         cursor: pointer;
-        -webkit-transition: background 100ms linear;
-        -moz-transition: background 100ms linear;
-        -o-transition: background 100ms linear;
         transition: background 100ms linear;
-        box-sizing: content-box !important;
         -moz-box-sizing: content-box !important;
+        box-sizing: content-box !important;
         &.place-left {
             margin-left: 8px;
         }
@@ -60,31 +55,29 @@
             margin-right: 8px;
         }
         &.dnn-switch-active {
-            background-color: @cerulean;
-            border-color: @matisse;
+            background-color: var(--dnn-color-primary, @cerulean);
             .mark {
                 left: 24px;
-                border-color: @matisse;
+                border-color: var(--dnn-color-foreground-light, @matisse);
             }
         }
         &.dnn-switch-readonly {
-            border: 1px solid @mercury;
+            border: 1px solid var(--dnn-color-neutral, @mercury);
             cursor: not-allowed;
-            background-color: @mercury;
+            background-color: var(--dnn-color-neutral, @mercury);
+            opacity: 0.5;
             .mark {
-                border: 1px solid @mercury;
-                background-color: @gallery;
+                border: 1px solid var(--dnn-color-neutral-dark, @mercury);
+                background-color: var(--dnn-color-neutral-light, @gallery);
             }
         }
         .mark {
             width: 21px;
             height: 21px;
             display: inline-block;
-            -webkit-border-radius: 13px;
-            -moz-border-radius: 13px;
-            border-radius: 13px;
-            background-color: @white;
-            border: 1px solid @mountainMist;
+            border-radius: var(--dnn-controls-radius, 13px);
+            background-color: var(--dnn-color-background, @white);
+            border: 1px solid var(--dnn-color-foreground-light, @mountainMist);
             position: absolute;
             top: 0px;
             left: 0px;
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Tags/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Tags/style.less
index ddd49383e72..5baa2716bad 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Tags/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Tags/style.less
@@ -1,13 +1,13 @@
 @import "../../styles/index";
 
 .dnn-uicommon-tags-field-input {
-    background: #fff;
+    background: var(--dnn-color-background, #fff);
     float: left;
     width: 100%;
-    border: 1px solid @mountainMist;
+    border: 1px solid var(--dnn-color-foreground-light, @mountainMist);
     box-sizing: border-box;
     position: relative;
-    border-radius: 0px;
+    border-radius: var(--dnn-controls-radius, 0px);
     font-size: 13px !important;
     font-family: proxima_nova,Arial !important;
 
@@ -16,20 +16,20 @@
     }
 
     &.error {
-        border-bottom: 2px solid red;
+        border-bottom: 2px solid var(--dnn-color-danger, red);
     }
     &.disabled {
         &, * {
             pointer-events: none;
         }
-        background: @mercury;
-        border-color: @mercury;
+        background: var(--dnn-color-neutral, @mercury);
+        border-color: var(--dnn-color-neutral, @mercury);
         .tag {
-            background: @alto;
+            background: var(--dnn-color-neutral-dark, @alto);
         }
     }
     &.active {
-        border: 1px solid @curiousBlue;
+        border: 1px solid var(--dnn-color-primary, @curiousBlue);
     }
     div[type="text"] {
         width: 100%;
@@ -39,12 +39,6 @@
         margin: 0 !important;
     }
 
-    div.typing-text {
-        height: 16px;
-        padding: 9px;
-        color: #C8C8C8;
-    }
-
     .input-container {
         float: left;
         position: relative;
@@ -67,20 +61,20 @@
             .suggestion {
                 color: gray;
                 padding: 9px;
-                background-color: #FFFFFF;
+                background-color: var(--dnn-color-background, #FFFFFF);
                 cursor: pointer;
                 margin: 0px;
                 list-style: none;
                 height: 15px;
 
                 &:hover {
-                    background-color: @gallery;
-                    color: @curiousBlue;
+                    background-color: var(--dnn-color-primary-contrast, @gallery);
+                    color: var(--dnn-color-primary, @curiousBlue);
                 }
 
                 &.selected {
-                    background-color: @curiousBlue;
-                    color: @gallery;
+                    background-color: var(--dnn-color-primary, @curiousBlue);
+                    color: var(--dnn-color-primary-contrast, @gallery);
                 }
             }
         }
@@ -91,7 +85,7 @@
         padding: 9px 12px;
         background: transparent;
         border: none;
-        color: @bulgarianRose;
+        color: var(--dnn-color-foreground, @bulgarianRose);
         float: left;
         box-sizing: content-box !important;
         outline: none !important;
@@ -106,11 +100,11 @@
         position: relative;
         padding: 3px 18px 3px 7px !important;
         margin: 7px 0 5px 9px !important;
-        background: @seagull;
+        background: var(--dnn-color-primary, @seagull);
         border: none;
-        color: white;
+        border-radius: var(--dnn-controls-radius, 0px);
+        color: var(--dnn-color-primary-contrast, white);
         font-size: 11px;
-        border-radius: 0px;
         max-width: calc(100% - 18px);
         overflow: hidden;
         text-overflow: ellipsis;
@@ -130,19 +124,19 @@
     .tag-search-results {
         position: absolute;
         width: 100%;
-        border: 1px solid @mountainMist;
+        border: 1px solid var(--dnn-color-foreground-light, @mountainMist);
         top: 100%;
         margin-top: 1px;
         border-top: none;
         left: -1px;
         padding: 6px 0px;
-        background: white;
+        background: var(--dnn-color-background, white);
         .result-item {
             padding: 6px 10px;
             cursor: pointer;
             &.selected {
-                background: @gallery;
-                color: @curiousBlue;
+                background: var(--dnn-color-primary-light, @gallery);
+                color: var(--dnn-color-primary-contrast, @curiousBlue);
             }
         }
     }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Tooltip/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Tooltip/style.less
index 06c584dd884..019bf24461e 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Tooltip/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/Tooltip/style.less
@@ -18,10 +18,11 @@
         z-index:50;
         visibility: visible;
         .tooltip-inner{
-            background-color: rgb(75, 78, 79);
-            color: #fff;
+            background-color: var(--dnn-color-surface, rgb(75, 78, 79));
+            color: var(--dnn-color-surface-contrast, #fff);
             padding:5px 10px;
-            border-radius: 5px;
+            border: 1px solid var(--dnn-color-surface-dark, rgb(40, 40, 40));
+            border-radius: var(--dnn-controls-radius, 5px);
             position: relative;
             font-family: proxima_nova, HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
             &::before{
@@ -54,67 +55,71 @@
         &.tooltip-overlay--hidden{
             opacity:0;
             pointer-events: none;
-            visibility: hidden;     
+            visibility: hidden;
         }
     } 
     &.error {
         .icon svg {
-            color: @alizarinCrimson;
-            fill: @alizarinCrimson;
+            color: var(--dnn-color-danger, @alizarinCrimson);
+            fill: var(--dnn-color-danger, @alizarinCrimson);
         }
         .tooltip-inner{
-            background-color: @alizarinCrimson;
+            background-color: var(--dnn-color-danger, @alizarinCrimson);
+            color: var(--dnn-color-danger-contrast, #fff);
         }  
         .top .tooltip-inner::before{
-            border-top-color: @alizarinCrimson;
+            border-top-color: var(--dnn-color-danger, @alizarinCrimson);
         }
         .bottom .tooltip-inner::before{
-            border-bottom-color: @alizarinCrimson;
+            border-bottom-color: var(--dnn-color-danger, @alizarinCrimson);
         }
     }
     &.warning {
         .icon svg {
-            color: #EA9C00;
-            fill: #EA9C00;
+            color: var(--dnn-color-warning, #EA9C00);
+            fill: var(--dnn-color-warning, #EA9C00);
         }
         .tooltip-inner{
-            background-color: #EA9C00;
+            background-color: var(--dnn-color-warning, #EA9C00);
+            color: var(--dnn-color-warning-contrast, #fff);
         }  
         .top .tooltip-inner::before{
-            border-top-color: #EA9C00;
+            border-top-color: var(--dnn-color-warning, #EA9C00);
         }
         .bottom .tooltip-inner::before{
-            border-bottom-color: #EA9C00;
+            border-bottom-color: var(--dnn-color-warning, #EA9C00);
         }
     }
     &.info {
         .icon svg {
-            color: @alto;
-            fill: @alto;
+            color: var(--dnn-color-neutral, @alto);
+            fill: var(--dnn-color-neutral, @alto);
         }
         .tooltip-inner{
-            background-color: @thunder;
+            background-color: var(--dnn-color-info, @thunder);
+            color: var(--dnn-color-info-contrast, #fff);
         }  
         .top .tooltip-inner::before{
-            border-top-color: @thunder;
+            border-top-color: var(--dnn-color-info, @thunder);
         }
         .bottom .tooltip-inner::before{
-            border-bottom-color: @thunder;
+            border-bottom-color: var(--dnn-color-info, @thunder);
         }
     }
     &.global {
         .icon svg {
-            color: @cerulean;
-            fill: @cerulean;
+            color: var(--dnn-color-info, @cerulean);
+            fill: var(--dnn-color-info, @cerulean);
         }
         .tooltip-inner{
-            background-color: @cerulean;
+            background-color: var(--dnn-color-info, @cerulean);
+            color: var(--dnn-color-info-contrast, #fff);
         }  
         .top .tooltip-inner::before{
-            border-top-color: @cerulean;
+            border-top-color: var(--dnn-color-info, @cerulean);
         }
         .bottom .tooltip-inner::before{
-            border-bottom-color: @cerulean;
+            border-bottom-color: var(--dnn-color-info, @cerulean);
         }   
     }
     .icon svg {
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/TransitionModal/style.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/TransitionModal/style.less
index 793d75e5042..47eb715faa4 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/TransitionModal/style.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/TransitionModal/style.less
@@ -18,7 +18,11 @@
         left: 0;
         bottom: 0;
         right: 0;
-        background: rgba(0, 0, 0, .7);
+        background: rgba(
+            var(--dnn-color-foreground-r, 0),
+            var(--dnn-color-foreground-g, 0),
+            var(--dnn-color-foreground-b, 0),
+            var(--dnn-variation-opacity, 0.7));
     }
     .modal-content {
         position: absolute;
@@ -27,7 +31,7 @@
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        background: #fff;
+        background: var(--dnn-color-background, #fff);
         overflow: hidden;
         .close {
             position: absolute;
@@ -38,13 +42,13 @@
             cursor: pointer;
             width: 37px;
             &:hover {
-                color: #fff;
+                color: var(--dnn-color-background, #fff);
             }
         }
         .header {
             float: left;
             width: 100%;
-            background: #0c3b4f;
+            background: var(--dnn-color-primary, #0c3b4f);
             padding: 20px;
             font-size: 20px;
         }
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/TreeControlInteractor/styles.less b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/TreeControlInteractor/styles.less
index 1289f36c19c..2b75d7141ae 100644
--- a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/TreeControlInteractor/styles.less
+++ b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/TreeControlInteractor/styles.less
@@ -1,6 +1,5 @@
 @import "../../styles/index";
 
-
 .page-picker {
     padding-left: 40px;
     svg {
@@ -8,7 +7,7 @@
     }
 
     .__react_component_tooltip {
-        border:1px solid @alto;
+        border:1px solid var(--dnn-color-background-dark, @alto);
         margin-left:20px;
         width:200px;
         white-space:normal;
@@ -29,7 +28,7 @@
         height: 0.3ex;
         top: 0.9ex;
         left: 0.4ex;
-        border: 3px solid white;
+        border: 3px solid var(--dnn-color-background, white);
         border-top: none;
         border-right: none;
         -webkit-transform: rotate(-45deg);
@@ -47,7 +46,7 @@
         height: 0.3ex;
         top: 0.9ex;
         left: 0.4ex;
-        border: 3px solid white;
+        border: 3px solid var(--dnn-color-background, white);
         border-top: none;
         border-right: none;
         -webkit-transform: rotate(-45deg);
@@ -78,7 +77,7 @@
         vertical-align: -25%;
         height: 2ex;
         width: 2ex;
-        border: 1px solid rgb(166, 166, 166);
+        border: 1px solid var(--dnn-color-neutral, rgb(166, 166, 166));
         margin-right: 0.5em;
     }
     input[type="checkbox"] + label.treecontrol-label-parent-unselected {
@@ -94,7 +93,7 @@
         vertical-align: -25%;
         height: 2ex;
         width: 2ex;
-        border: 2px solid  @curiousBlue;
+        border: 2px solid var(--dnn-color-primary, @curiousBlue);
         margin-right: 0.5em;
     }
 
@@ -105,8 +104,8 @@
         vertical-align: -25%;
         height: 2ex;
         width: 2ex;
-        border: 1px solid rgb(166, 166, 166);
-        background-color: @curiousBlue;
+        border: 1px solid var(--dnn-color-neutral, rgb(166, 166, 166));
+        background-color: var(--dnn-color-primary, @curiousBlue);
         margin-right: 0.5em;
     }
 
@@ -117,11 +116,11 @@
         vertical-align: -25%;
         height: 2ex;
         width: 2ex;
-        -webkit-box-shadow:inset 0px 0px 0px 1px @curiousBlue;
-        -moz-box-shadow:inset 0px 0px 0px 1px  @curiousBlue;
-        box-shadow:inset 0px 0px 0px 1px  @curiousBlue;
+        -webkit-box-shadow:inset 0px 0px 0px 1px var(--dnn-color-primary, @curiousBlue);
+        -moz-box-shadow:inset 0px 0px 0px 1px  var(--dnn-color-primary, @curiousBlue);
+        box-shadow:inset 0px 0px 0px 1px  var(--dnn-color-primary, @curiousBlue);
         border:1px solid white;
-        background-color: @curiousBlue;
+        background-color: var(--dnn-color-primary, @curiousBlue);
         margin-right: 0.5em;
     }
     input[type="checkbox"]:checked + span {
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepFive.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepFive.jsx
index b1d291644d7..b5a2d5eb6d5 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepFive.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepFive.jsx
@@ -74,7 +74,7 @@ const StepFive = ({
             </GridCell>
         }
         <GridCell className="modal-footer">
-            <Button type="secondary" onClick={onCancel}>{Localization.get("Cancel.Button")}</Button>
+            <Button type="neutral" onClick={onCancel}>{Localization.get("Cancel.Button")}</Button>
             <Button type="secondary" onClick={onPrevious}>{Localization.get("Previous.Button")}</Button>
             <Button type="primary" disabled={!createPackage && !createManifest} onClick={onNext}>{Localization.get("Next.Button")}</Button>
         </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepFour.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepFour.jsx
index a1154d44d6c..1ddee235b4c 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepFour.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepFour.jsx
@@ -14,7 +14,7 @@ const StepFour = ({onCancel, onNext, onChange, selectedManifest, onPrevious}) =>
                 onChange={onChange.bind(this, "selectedManifest")} />
         </GridCell>
         <GridCell className="modal-footer">
-            <Button type="secondary" onClick={onCancel}>{Localization.get("Cancel.Button")}</Button>
+            <Button type="neutral" onClick={onCancel}>{Localization.get("Cancel.Button")}</Button>
             <Button type="secondary" onClick={onPrevious}>{Localization.get("Previous.Button")}</Button>
             <Button type="primary" onClick={onNext}>{Localization.get("Next.Button")}</Button>
         </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepOne.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepOne.jsx
index 21f87fa1774..9a419e9abed 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepOne.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepOne.jsx
@@ -60,7 +60,7 @@ const StepOne = ({packageManifest,
             </GridCell>
         </GridCell>
         <GridCell className="modal-footer">
-            <Button type="secondary" onClick={onCancel}>{Localization.get("Cancel.Button")}</Button>
+            <Button type="neutral" onClick={onCancel}>{Localization.get("Cancel.Button")}</Button>
             <Button type="primary" onClick={onNext}>{Localization.get("Next.Button")}</Button>
         </GridCell>
     </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepThree.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepThree.jsx
index ec558e0d24b..3e46bb3ebce 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepThree.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepThree.jsx
@@ -14,7 +14,7 @@ const StepThree = ({packageManifest, onCancel, onNext, onPrevious, onFileOrAssem
                 onChange={onFileOrAssemblyChange.bind(this, "assemblies")} />
         </GridCell>
         <GridCell className="modal-footer">
-            <Button type="secondary" onClick={onCancel}>{Localization.get("Cancel.Button")}</Button>
+            <Button type="neutral" onClick={onCancel}>{Localization.get("Cancel.Button")}</Button>
             <Button type="secondary" onClick={onPrevious}>{Localization.get("Previous.Button")}</Button>
             <Button type="primary" onClick={onNext}>{Localization.get("Next.Button")}</Button>
         </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepTwo.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepTwo.jsx
index 24e7a65be24..8e587a2f4c5 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepTwo.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/CreatePackageModal/StepTwo.jsx
@@ -27,7 +27,7 @@ const StepTwo = ({packageManifest, onCancel, onNext, onBasePathChange, onPreviou
                 onChange={onFileOrAssemblyChange.bind(this, "files")} />
         </GridCell>
         <GridCell className="modal-footer">
-            <Button type="secondary" onClick={onCancel}>{Localization.get("Cancel.Button")}</Button>
+            <Button type="neutral" onClick={onCancel}>{Localization.get("Cancel.Button")}</Button>
             <Button type="secondary" onClick={onPrevious}>{Localization.get("Previous.Button")}</Button>
             <Button type="primary" onClick={onNext}>{Localization.get("Next.Button")}</Button>
         </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/DeleteExtension/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/DeleteExtension/index.jsx
index caf3d2db944..fb48c9c488f 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/DeleteExtension/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/DeleteExtension/index.jsx
@@ -64,8 +64,8 @@ class DeleteExtension extends Component {
                                 tooltipMessage={Localization.get("DeleteFiles.HelpText")} />
                         </GridCell>
                         <GridCell className="modal-footer">
-                            <Button type="secondary" onClick={this.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
-                            <Button type="primary" onClick={this.onDelete.bind(this)}>{Localization.get("Delete.Button")}</Button>
+                            <Button type="neutral" onClick={this.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
+                            <Button type="danger" onClick={this.onDelete.bind(this)}>{Localization.get("Delete.Button")}</Button>
                         </GridCell>
                     </GridCell>
                 </PersonaBarPageBody>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/AuthenticationSystem/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/AuthenticationSystem/index.jsx
index b1798bbbd77..eb86fbeb44f 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/AuthenticationSystem/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/AuthenticationSystem/index.jsx
@@ -52,7 +52,7 @@ class AuthenticationSystem extends Component {
                 </GridSystem>
                 {!props.actionButtonsDisabled &&
                     <GridCell columnSize={100} className="modal-footer">
-                        <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
+                        <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
                         <Button type="primary" onClick={props.onSave.bind(this, true)}>{Localization.get("EditModule_SaveAndClose.Button")}</Button>
                         <Button type="primary" onClick={props.onSave.bind(this)}>{props.primaryButtonText}</Button>
                     </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Container/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Container/index.jsx
index 9a519624f1d..a8d4833ec25 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Container/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Container/index.jsx
@@ -23,7 +23,7 @@ class Container extends Component {
                 </GridCell>
                 {!props.actionButtonsDisabled &&
                     <GridCell columnSize={100} className="modal-footer">
-                        <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
+                        <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
                         {!props.disabled && <Button type="primary" onClick={props.onSave.bind(this, true)}>{Localization.get("EditModule_SaveAndClose.Button")}</Button>}
                         {!props.disabled && <Button type="primary" onClick={props.onSave.bind(this)}>{props.primaryButtonText}</Button>}
                     </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/CoreLanguagePack/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/CoreLanguagePack/index.jsx
index 4a06a6738c4..4f374417cd9 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/CoreLanguagePack/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/CoreLanguagePack/index.jsx
@@ -31,7 +31,7 @@ class CoreLanguagePack extends Component {
                 </GridCell>
                 {!props.actionButtonsDisabled &&
                     <GridCell columnSize={100} className="modal-footer">
-                        <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
+                        <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
                         {!props.disabled && <Button type="primary" onClick={props.onSave.bind(this, true)}>{Localization.get("EditModule_SaveAndClose.Button")}</Button>}
                         {!props.disabled && <Button type="primary">{props.primaryButtonText}</Button>}
                     </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/ExtensionLanguagePack/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/ExtensionLanguagePack/index.jsx
index ad7fb3048c6..1815f7f318e 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/ExtensionLanguagePack/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/ExtensionLanguagePack/index.jsx
@@ -41,7 +41,7 @@ class ExtensionLanguagePack extends Component {
 
                 {!props.actionButtonsDisabled &&
                     <GridCell columnSize={100} className="modal-footer">
-                        <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
+                        <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
                         {!props.disabled && <Button type="primary" onClick={props.onSave.bind(this, true)}>{Localization.get("EditModule_SaveAndClose.Button")}</Button>}
                         {!props.disabled && <Button type="primary">{props.primaryButtonText}</Button>}
                     </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Module/ModuleDefinitions/ModuleDefinitionRow/Controls/ControlFields.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Module/ModuleDefinitions/ModuleDefinitionRow/Controls/ControlFields.jsx
index 8601995c378..ed43faa3a21 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Module/ModuleDefinitions/ModuleDefinitionRow/Controls/ControlFields.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Module/ModuleDefinitions/ModuleDefinitionRow/Controls/ControlFields.jsx
@@ -143,7 +143,7 @@ class ControlFields extends Component {
                     </div>
                 </GridSystem>
                 <GridCell columnSize={100} className="modal-footer">
-                    <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("AddModuleControl_Cancel.Button")}</Button>
+                    <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("AddModuleControl_Cancel.Button")}</Button>
                     <Button type="primary" onClick={props.onSave.bind(this)}>{Localization.get("AddModuleControl_Update.Button")}</Button>
                 </GridCell>
             </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Module/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Module/index.jsx
index 48239a0b26d..ebe4a1d878c 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Module/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/CustomSettings/Module/index.jsx
@@ -232,7 +232,7 @@ class Module extends Component {
                 }
                 {!props.actionButtonsDisabled &&
                     <GridCell columnSize={100} className="modal-footer">
-                        <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
+                        <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
                         <Button type="primary" disabled={props.formIsDirty || props.controlFormIsDirty} onClick={props.onSave.bind(this, true)}>{Localization.get("EditModule_SaveAndClose.Button")}</Button>
                         <Button type="primary" disabled={props.formIsDirty || props.controlFormIsDirty} onClick={props.onSave.bind(this)}>{Localization.get("Save.Button")}</Button>
                     </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/EditSettings/AuthenticationSystemSettings/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/EditSettings/AuthenticationSystemSettings/index.jsx
index dc375767d37..2821c61e399 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/EditSettings/AuthenticationSystemSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/EditSettings/AuthenticationSystemSettings/index.jsx
@@ -39,7 +39,7 @@ class AuthenticationSystemSettings extends Component {
                 </GridCell>
                 {!props.actionButtonsDisabled &&
                     <GridCell columnSize={100} className="modal-footer">
-                        <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
+                        <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
                         <Button type="primary" onClick={props.onSave.bind(this, true)}>{Localization.get("EditModule_SaveAndClose.Button")}</Button>
                         <Button type="primary" onClick={props.onSave.bind(this)}>{Localization.get("Save")}</Button>
                     </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/EditSettings/ModuleSettings/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/EditSettings/ModuleSettings/index.jsx
index 8716e1b4378..80af02be8df 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/EditSettings/ModuleSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/EditSettings/ModuleSettings/index.jsx
@@ -54,7 +54,7 @@ class ModuleSettings extends Component {
                     service={utils.utilities.sf}
                     onPermissionsChanged={this.onPermissionsChanged.bind(this)} />
                 <GridCell className="actions-row">
-                    <Button onClick={props.onCancel.bind(this)}>{Localization.get("Cancel")}</Button>
+                    <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel")}</Button>
                     <Button type="primary" onClick={this.savePermissions.bind(this, true)}>{Localization.get("EditModule_SaveAndClose.Button")}</Button>
                     <Button type="primary" onClick={this.savePermissions.bind(this, false)}>{Localization.get("Save")}</Button>
                 </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/License/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/License/index.jsx
index 2417df0364b..a88fe07cfc8 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/License/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/License/index.jsx
@@ -40,7 +40,7 @@ class License extends Component {
                     onChange={props.onToggleLicenseAccept}                     
                 />                
                 {!props.buttonsAreHidden && <GridCell columnSize={100} className="modal-footer">
-                    <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
+                    <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
                     {!props.disabled && <Button type="primary" onClick={props.onSave.bind(this, true)}>{Localization.get("EditModule_SaveAndClose.Button")}</Button>}
                     {(!props.disabled || props.installationMode) && <Button type="primary" onClick={props.onSave.bind(this)} disabled={props.primaryButtonDisabled}>{props.primaryButtonText}</Button>}
                 </GridCell>}
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/PackageInformation/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/PackageInformation/index.jsx
index 951ea8be4e0..504df5bcace 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/PackageInformation/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/PackageInformation/index.jsx
@@ -153,7 +153,7 @@ class PackageInformation extends Component {
                     </div>
                 </GridSystem>
                 {!props.buttonsAreHidden && <GridCell columnSize={100} className="modal-footer">
-                    <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
+                    <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
                     {!props.disabled && <Button type="primary" onClick={props.onSave.bind(this, true)}>{Localization.get("EditModule_SaveAndClose.Button")}</Button>}
                     {(!props.disabled || props.installationMode) && <Button type="primary" onClick={props.onSave.bind(this)}>{props.primaryButtonText}</Button>}
                 </GridCell>}
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/ReleaseNotes/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/ReleaseNotes/index.jsx
index b3acb0eb6fe..fc3b3998a24 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/ReleaseNotes/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/EditExtension/ReleaseNotes/index.jsx
@@ -33,7 +33,7 @@ class ReleaseNotes extends Component {
                     </Scrollbars>
                 }
                 {!props.buttonsAreHidden && <GridCell columnSize={100} className="modal-footer">
-                    <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
+                    <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("Cancel.Button")}</Button>
                     {!props.disabled && <Button type="primary" onClick={props.onSave.bind(this, true)}>{Localization.get("EditModule_SaveAndClose.Button")}</Button>}
                     {(!props.disabled || props.installationMode) && <Button type="primary" onClick={props.onSave.bind(this)}>{props.primaryButtonText}</Button>}
                 </GridCell>}
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/InstallExtensionModal/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/InstallExtensionModal/index.jsx
index bf87dc1940b..0e1ba4249d7 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/InstallExtensionModal/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/InstallExtensionModal/index.jsx
@@ -251,7 +251,7 @@ class InstallExtensionModal extends Component {
                                     />
                                 </GridCell>
                                 <GridCell className="modal-footer">
-                                    <Button onClick={!props.viewingLog ? this.cancelInstallationOnUpload.bind(this) : this.toggleViewLog.bind(this, false)}>{Localization.get("InstallExtension_Cancel.Button")}</Button>
+                                    <Button type="neutral" onClick={!props.viewingLog ? this.cancelInstallationOnUpload.bind(this) : this.toggleViewLog.bind(this, false)}>{Localization.get("InstallExtension_Cancel.Button")}</Button>
                                     <Button onClick={legacyInstalled ? this.setAlreadyInstalled.bind(this, legacyTypeIsInstalled, true) : this.goToStep.bind(this, 1)} type="primary"
                                         disabled={(!props.parsedInstallationPackage || !props.parsedInstallationPackage.success)}>
                                         {Localization.get("InstallExtension_Upload.Button")}
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewExtensionModal/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewExtensionModal/index.jsx
index 1a7d9768028..a1524a2b94f 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewExtensionModal/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewExtensionModal/index.jsx
@@ -226,7 +226,7 @@ class NewExtensionModal extends Component {
                             actionButtonsDisabled={true}
                             isAddMode={true} />
                         <GridCell columnSize={100} className="modal-footer">
-                            <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("CreateExtension_Cancel.Button")}</Button>
+                            <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("CreateExtension_Cancel.Button")}</Button>
                             <Button type="primary" onClick={this.onSave.bind(this)}>{Localization.get("CreateExtension_Save.Button")}</Button>
                         </GridCell>
                     </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromControl/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromControl/index.jsx
index 0e527eff897..920cca00c71 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromControl/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromControl/index.jsx
@@ -226,7 +226,7 @@ class FromControl extends Component {
                     </div>
                 </GridSystem>
                 <GridCell columnSize={100} className="modal-footer">
-                    <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("NewModule_Cancel.Button")}</Button>
+                    <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("NewModule_Cancel.Button")}</Button>
                     <Button type="primary"
                         onClick={this.onCreateNewModule.bind(this)}>{Localization.get("NewModule_Create.Button")}</Button>
                 </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromManifest/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromManifest/index.jsx
index b3b889b60af..596f584cbb7 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromManifest/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromManifest/index.jsx
@@ -200,7 +200,7 @@ class FromManifest extends Component {
                     </div>
                 </GridSystem>
                 <GridCell columnSize={100} className="modal-footer">
-                    <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("NewModule_Cancel.Button")}</Button>
+                    <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("NewModule_Cancel.Button")}</Button>
                     <Button type="primary"
                         onClick={this.onCreateNewModule.bind(this)}>{Localization.get("NewModule_Create.Button")}</Button>
                 </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromNew/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromNew/index.jsx
index c415cfc40f2..91d917f4a30 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromNew/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/FromNew/index.jsx
@@ -211,7 +211,7 @@ class FromNew extends Component {
                     </div>
                 </GridSystem>
                 <GridCell columnSize={100} className="modal-footer">
-                    <Button type="secondary" onClick={props.onCancel.bind(this)}>{Localization.get("NewModule_Cancel.Button")}</Button>
+                    <Button type="neutral" onClick={props.onCancel.bind(this)}>{Localization.get("NewModule_Cancel.Button")}</Button>
                     <Button type="primary"
                         onClick={this.onCreateNewModule.bind(this)}>{Localization.get("NewModule_Create.Button")}</Button>
                 </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/index.jsx b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/index.jsx
index 12dd41b4162..dbfb7f8720b 100644
--- a/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Extensions.Web/src/components/NewModuleModal/index.jsx
@@ -161,7 +161,7 @@ class NewModuleModal extends Component {
                                     label={Localization.get("CreateNewModuleFrom.Label")}
                                     style={inputStyle} />
                                 {this.state.selectedType === "" &&
-                                    <Button type="secondary" onClick={this.onCancel.bind(this)}>{Localization.get("NewModule_Cancel.Button")}</Button>
+                                    <Button type="neutral" onClick={this.onCancel.bind(this)}>{Localization.get("NewModule_Cancel.Button")}</Button>
                                 }
                             </GridCell>
                         </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Licensing.Web/src/components/platform/index.jsx b/Dnn.AdminExperience/ClientSide/Licensing.Web/src/components/platform/index.jsx
index 8c3cf051634..1e835f800c3 100644
--- a/Dnn.AdminExperience/ClientSide/Licensing.Web/src/components/platform/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Licensing.Web/src/components/platform/index.jsx
@@ -31,7 +31,7 @@ class Platform extends Component {
     }
 
     onDocsClick() {
-        window.open("https://dnndocs.com", "_blank");
+        window.open("https://docs.dnncommunity.org", "_blank");
     }
 
     /* eslint-disable react/no-danger */
diff --git a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/AddPages/AddPages.jsx b/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/AddPages/AddPages.jsx
index 69eed9d45ce..e6a4e1086de 100644
--- a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/AddPages/AddPages.jsx
+++ b/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/AddPages/AddPages.jsx
@@ -108,7 +108,7 @@ class AddPages extends Component {
                     <div style={{clear: "both"}}></div>
                     <div className="buttons-box">
                         <Button
-                            type="secondary"
+                            type="neutral"
                             onClick={onCancel}>
                             {Localization.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/More/More.jsx b/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/More/More.jsx
index 9870ca29e8d..924df8bee92 100644
--- a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/More/More.jsx
+++ b/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/More/More.jsx
@@ -133,7 +133,7 @@ class More extends Component {
                                 />
                                 <Button
                                     disabled={this.props.cachedPageCount === 0}
-                                    type="secondary"
+                                    type="danger"
                                     onClick={this.onClearCache.bind(this)}>
                                     {Localization.get("ClearPageCache")}
                                 </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/PageSettings/PageSettings.jsx b/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/PageSettings/PageSettings.jsx
index 7471f764c0f..b1f6d321bec 100644
--- a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/PageSettings/PageSettings.jsx
+++ b/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/PageSettings/PageSettings.jsx
@@ -37,7 +37,7 @@ class PageSettings extends Component {
 
         let buttons = [<Button
             key="cancelButton"
-            type="secondary"
+            type="neutral"
             onClick={onCancel}>
             {Localization.get("Cancel")}
         </Button>,
@@ -54,7 +54,7 @@ class PageSettings extends Component {
             && securityService.userHasPermission(permissionTypes.DELETE_PAGE, selectedPage)) {
             buttons.unshift(<Button
                 key="delete"
-                type="secondary"
+                type="danger"
                 onClick={onDelete.bind(this, selectedPage)} >
                 {Localization.get("Delete")}
             </Button>);
diff --git a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/SaveAsTemplate/SaveAsTemplate.jsx b/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/SaveAsTemplate/SaveAsTemplate.jsx
index 668006adcb3..1ef7912e7c2 100644
--- a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/SaveAsTemplate/SaveAsTemplate.jsx
+++ b/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/SaveAsTemplate/SaveAsTemplate.jsx
@@ -55,7 +55,7 @@ class SaveAsTemplate extends Component {
                     </div>
                     <div className="buttons-box">
                         <Button
-                            type="secondary"
+                            type="neutral"
                             onClick={onCancel}>
                             {Localization.get("Cancel") }
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/Seo/PageUrls/EditUrl.jsx b/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/Seo/PageUrls/EditUrl.jsx
index e459e779d89..323bf16e095 100644
--- a/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/Seo/PageUrls/EditUrl.jsx
+++ b/Dnn.AdminExperience/ClientSide/Pages.Web/src/components/Seo/PageUrls/EditUrl.jsx
@@ -140,7 +140,7 @@ class EditUrl extends Component {
                         </GridCell>
                     </GridCell>
                     <div className="buttons-box" style={{float: "left", margin: "0 0 20px 0"}}>
-                        <Button type="secondary" onClick={onCancel} disabled={saving}>
+                        <Button type="neutral" onClick={onCancel} disabled={saving}>
                             {Localization.get("Cancel")}
                         </Button>
                         <Button type="primary" onClick={onSave} disabled={!this.state.hasChanges || saving}>
diff --git a/Dnn.AdminExperience/ClientSide/Roles.Web/src/components/roles/RoleEditor/RoleGroupEditor/index.jsx b/Dnn.AdminExperience/ClientSide/Roles.Web/src/components/roles/RoleEditor/RoleGroupEditor/index.jsx
index f2b25b8ab5c..172d60f24e5 100644
--- a/Dnn.AdminExperience/ClientSide/Roles.Web/src/components/roles/RoleEditor/RoleGroupEditor/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Roles.Web/src/components/roles/RoleEditor/RoleGroupEditor/index.jsx
@@ -124,7 +124,7 @@ class RoleGroupEditor extends Component {
                     <div className="clear"></div>
                 </div>
                 <div className="actions">
-                    <Button onClick={this.onCancel.bind(this) } className="do-not-close">{resx.get("Cancel") }</Button>
+                    <Button type="neutral" onClick={this.onCancel.bind(this) } className="do-not-close">{resx.get("Cancel") }</Button>
                     <Button type="primary" onClick={this.onSave.bind(this) }>{resx.get("Save") }</Button>
                 </div>
             </div>
diff --git a/Dnn.AdminExperience/ClientSide/Roles.Web/src/components/roles/RoleEditor/index.jsx b/Dnn.AdminExperience/ClientSide/Roles.Web/src/components/roles/RoleEditor/index.jsx
index dd550503137..6eb3557b9f1 100644
--- a/Dnn.AdminExperience/ClientSide/Roles.Web/src/components/roles/RoleEditor/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Roles.Web/src/components/roles/RoleEditor/index.jsx
@@ -362,14 +362,14 @@ class RolesEditor extends Component {
                     {
                         this.props.roleId > 0 && (!state.roleDetails.isSystem && state.roleDetails.id > -1) ?
                             <Button
-                                type="secondary"
+                                type="danger"
                                 onClick={this.deleteRole.bind(this)}>
                                 {resx.get("Delete")}
                             </Button>
                             : null
                     }
                     <Button
-                        type="secondary"
+                        type="neutral"
                         disabled={state.roleDetails.isSystem}
                         onClick={this.props.Collapse.bind(this)}>
                         {resx.get("Cancel")}
diff --git a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokenSettings/index.jsx b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokenSettings/index.jsx
index 06b95724b7e..f74ffe943e9 100644
--- a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokenSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokenSettings/index.jsx
@@ -183,7 +183,7 @@ class ApiTokenSettingsPanelBody extends Component {
                     <div className="buttons-box">
                         <Button
                             disabled={!this.props.apiTokenSettingsClientModified}
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}
                         >
                             {resx.get("Cancel")}
diff --git a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokens/ApiTokenRow/index.jsx b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokens/ApiTokenRow/index.jsx
index 7aa6d39ec1a..639fd601c7d 100644
--- a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokens/ApiTokenRow/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokens/ApiTokenRow/index.jsx
@@ -139,7 +139,7 @@ class ApiTokenRow extends Component {
                 <Collapse className="logitem-collapsible" isOpened={!this.state.collapsed}>{!state.collapsed && props.children}
                     {!state.collapsed && <div className="buttons-box">
                         <Button
-                            type="secondary"
+                            type="danger"
                             onClick={() => {
                                 utils.utilities.confirm(resx.get("DeleteApiKey.Confirm"), resx.get("Yes"), resx.get("No"), () => {
                                     this.props.dispatch(SecurityActions.revokeOrDeleteApiToken(this.props.apiToken.ApiTokenId, true, (data) => {
@@ -150,7 +150,7 @@ class ApiTokenRow extends Component {
                             }}>
                             {resx.get("DeleteApiKey")}
                         </Button>
-                        {statusClass == "active" && (
+                        {statusClass === "active" && (
                             <Button
                                 type="secondary"
                                 onClick={() => {
diff --git a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokens/CreateApiToken/index.jsx b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokens/CreateApiToken/index.jsx
index f4bdf8d0ae6..0a22bb26be7 100644
--- a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokens/CreateApiToken/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokens/CreateApiToken/index.jsx
@@ -134,7 +134,7 @@ class CreateApiToken extends Component {
                 </Grid>
                 <div className="buttons-box">
                     <Button
-                        type="secondary"
+                        type="neutral"
                         onClick={() => {
                             this.props.onCancel();
                         }}>
diff --git a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokens/index.jsx b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokens/index.jsx
index 07d6fbf36fb..45aa9cb49e2 100644
--- a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokens/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/apiTokens/index.jsx
@@ -223,7 +223,7 @@ class ApiTokensPanelBody extends Component {
             <div style={{ float: "left", width: "100%" }}>
                 <div className="tokenCommandBox">
                     <Button
-                        type="secondary"
+                        type="danger"
                         onClick={() => {
                             util.utilities.confirm(resx.get("DeleteExpired.Confirm"), resx.get("Yes"), resx.get("No"), () => {
                                 this.props.dispatch(SecurityActions.deleteExpiredAndRevokedApiTokens((data) => {
diff --git a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/basicSettings/index.jsx b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/basicSettings/index.jsx
index b1d4e1db0f2..2bcf6493970 100644
--- a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/basicSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/basicSettings/index.jsx
@@ -205,7 +205,7 @@ class BasicSettingsPanelBody extends Component {
                         <div className="buttons-box">
                             <Button
                                 disabled={!this.props.basicLoginSettingsClientModified}
-                                type="secondary"
+                                type="neutral"
                                 onClick={this.onCancel.bind(this) }>
                                 {resx.get("Cancel") }
                             </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/ipFilters/ipFilterEditor/index.jsx b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/ipFilters/ipFilterEditor/index.jsx
index 82a1ff6bdeb..89f3721cafb 100644
--- a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/ipFilters/ipFilterEditor/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/ipFilters/ipFilterEditor/index.jsx
@@ -192,7 +192,7 @@ class IpFilterEditor extends Component {
                 </GridSystem>
                 <div className="buttons-box">
                     <Button                        
-                        type="secondary"
+                        type="neutral"
                         onClick={this.props.Collapse.bind(this) }>
                         {resx.get("Cancel") }
                     </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/memberManagement/index.jsx b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/memberManagement/index.jsx
index d8a9faac4a4..4c485cf784e 100644
--- a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/memberManagement/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/memberManagement/index.jsx
@@ -357,7 +357,7 @@ class MemberManagementPanelBody extends Component {
                     <div className="buttons-box">
                         <Button
                             disabled={!this.props.memberSettingsClientModified}
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this) }>
                             {resx.get("Cancel") }
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/otherSettings/index.jsx b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/otherSettings/index.jsx
index 8cbdcefc1cd..560567a94d6 100644
--- a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/otherSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/otherSettings/index.jsx
@@ -309,7 +309,7 @@ class OtherSettingsPanelBody extends Component {
                     <div className="buttons-box">
                         <Button
                             disabled={!this.props.otherSettingsClientModified}
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/registrationSettings/index.jsx b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/registrationSettings/index.jsx
index 47c7c0830b8..63890ad659d 100644
--- a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/registrationSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/registrationSettings/index.jsx
@@ -540,7 +540,7 @@ class RegistrationSettingsPanelBody extends Component {
                         <div className="buttons-box">
                             <Button
                                 disabled={!this.props.registrationSettingsClientModified}
-                                type="secondary"
+                                type="neutral"
                                 onClick={this.onCancel.bind(this)}>
                                 {resx.get("Cancel")}
                             </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/sslSettings/index.jsx b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/sslSettings/index.jsx
index 517ac6ff595..97d9446b8c2 100644
--- a/Dnn.AdminExperience/ClientSide/Security.Web/src/components/sslSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Security.Web/src/components/sslSettings/index.jsx
@@ -252,7 +252,7 @@ class SslSettingsPanelBody extends Component {
                     <div className="buttons-box">
                         <Button
                             disabled={!this.props.sslSettingsClientModified}
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}
                         >
                             {resx.get("Cancel")}
diff --git a/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/generalSettings/index.jsx b/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/generalSettings/index.jsx
index f62fe882daa..716c9812322 100644
--- a/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/generalSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/generalSettings/index.jsx
@@ -210,7 +210,7 @@ class GeneralSettingsPanelBody extends Component {
                     <div className="buttons-box">
                         <Button
                             disabled={!this.props.clientModified}
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/regexSettings/index.jsx b/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/regexSettings/index.jsx
index b4ff535283e..36dfff5fb38 100644
--- a/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/regexSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/regexSettings/index.jsx
@@ -388,7 +388,7 @@ class RegexSettingsPanelBody extends Component {
                     <div className="buttons-box">
                         <Button
                             disabled={!this.props.regexClientModified}
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/sitemapSettings/index.jsx b/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/sitemapSettings/index.jsx
index cc83618cbd0..df1c54ae7cb 100644
--- a/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/sitemapSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/sitemapSettings/index.jsx
@@ -326,7 +326,7 @@ class SitemapSettingsPanelBody extends Component {
                             onSelect={this.onSettingChange.bind(this, "SitemapCacheDays")} />
                         <Button
                             className="clearCacheBtn"
-                            type="secondary"
+                            type="danger"
                             onClick={this.onClearCache.bind(this)}>
                             {resx.get("lnkResetCache")}
                         </Button>
@@ -413,7 +413,7 @@ class SitemapSettingsPanelBody extends Component {
                     <div className="buttons-box">
                         <Button
                             disabled={!this.props.clientModified}
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/sitemapSettings/providerEditor/index.jsx b/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/sitemapSettings/providerEditor/index.jsx
index 4b38110651a..9e06bd17526 100644
--- a/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/sitemapSettings/providerEditor/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Seo.Web/src/components/sitemapSettings/providerEditor/index.jsx
@@ -104,7 +104,7 @@ class ProviderEditor extends Component {
                     <Grid numberOfColumns={2}>{[columnOne, columnTwo]}</Grid>
                     <div className="buttons-box-secondary">
                         <Button
-                            type="secondary"
+                            type="neutral"
                             onClick={this.props.Collapse.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Servers.Web/src/actions/serversTab.js b/Dnn.AdminExperience/ClientSide/Servers.Web/src/actions/serversTab.js
index 6fa08419d5b..f70727987df 100644
--- a/Dnn.AdminExperience/ClientSide/Servers.Web/src/actions/serversTab.js
+++ b/Dnn.AdminExperience/ClientSide/Servers.Web/src/actions/serversTab.js
@@ -3,69 +3,69 @@ import serversTabService from "../services/serversTabService";
 import localization from "../localization";
 
 const serversTabActions = {
-  loadServers() {
-    return (dispatch) => {
-      dispatch({
-        type: ActionTypes.LOAD_SERVERS,
-      });
+    loadServers() {
+        return (dispatch) => {
+            dispatch({
+                type: ActionTypes.LOAD_SERVERS,
+            });
 
-      serversTabService
-        .getServers()
-        .then((response) => {
-          dispatch({
-            type: ActionTypes.LOADED_SERVERS,
-            payload: {
-              servers: response,
-            },
-          });
-        })
-        .catch(() => {
-          dispatch({
-            type: ActionTypes.ERROR_LOADING_SERVERS,
-            payload: {
-              errorMessage: localization.get("errorMessageLoadingServers"),
-            },
-          });
-        });
-    };
-  },
+            serversTabService
+                .getServers()
+                .then((response) => {
+                    dispatch({
+                        type: ActionTypes.LOADED_SERVERS,
+                        payload: {
+                            servers: response,
+                        },
+                    });
+                })
+                .catch(() => {
+                    dispatch({
+                        type: ActionTypes.ERROR_LOADING_SERVERS,
+                        payload: {
+                            errorMessage: localization.get("errorMessageLoadingServers"),
+                        },
+                    });
+                });
+        };
+    },
 
-  deleteServer(serverId) {
-    return (dispatch) => {
-      serversTabService
-        .deleteServer(serverId)
-        .then((response) => {
-          serversTabActions.loadServers()(dispatch);
-        })
-        .catch((err) => {
-          console.log(err);
-          dispatch({
-            type: ActionTypes.ERROR_DELETING_SERVER,
-            payload: {
-              errorMessage: localization.get("errorMessageDeleteServers"),
-            },
-          });
-        });
-    };
-  },
+    deleteServer(serverId) {
+        return (dispatch) => {
+            serversTabService
+                .deleteServer(serverId)
+                .then((response) => {
+                    serversTabActions.loadServers()(dispatch);
+                })
+                .catch((err) => {
+                    console.log(err);
+                    dispatch({
+                        type: ActionTypes.ERROR_DELETING_SERVER,
+                        payload: {
+                            errorMessage: localization.get("errorMessageDeleteServers"),
+                        },
+                    });
+                });
+        };
+    },
 
-  deleteNonActiveServers() {
-    return (dispatch) => {
-      serversTabService
-        .deleteNonActiveServers()
-        .then((response) => {
-          serversTabActions.loadServers()(dispatch);
-        })
-        .catch(() => {
-          dispatch({
-            type: ActionTypes.ERROR_DELETING_SERVER,
-            payload: {
-              errorMessage: localization.get("errorMessageDeleteServers"),
-            },
-          });
-        });
-    };
-  },
+    deleteNonActiveServers() {
+        return (dispatch) => {
+            serversTabService
+                .deleteNonActiveServers()
+                .then((response) => {
+                    serversTabActions.loadServers()(dispatch);
+                })
+                .catch(() => {
+                    dispatch({
+                        type: ActionTypes.ERROR_DELETING_SERVER,
+                        payload: {
+                            errorMessage: localization.get("errorMessageDeleteServers"),
+                        },
+                    });
+                });
+        };
+    },
 };
 
 export default serversTabActions;
diff --git a/Dnn.AdminExperience/ClientSide/Servers.Web/src/actions/smtpServerTab.js b/Dnn.AdminExperience/ClientSide/Servers.Web/src/actions/smtpServerTab.js
index bcd2c65aeee..0d7fdeb76bd 100644
--- a/Dnn.AdminExperience/ClientSide/Servers.Web/src/actions/smtpServerTab.js
+++ b/Dnn.AdminExperience/ClientSide/Servers.Web/src/actions/smtpServerTab.js
@@ -17,7 +17,7 @@ const smtpServeTabActions = {
                         smtpServerInfo: response
                     }
                 })]).then(() => {
-                    if(typeof callback === "function"){
+                    if (typeof callback === "function") {
                         callback();
                     }
                 }); 
@@ -39,7 +39,7 @@ const smtpServeTabActions = {
                     smtpServeMode
                 }
             })]).then(() => {
-                if(typeof callback === "function"){
+                if (typeof callback === "function") {
                     callback();
                 }
             });
@@ -83,7 +83,7 @@ const smtpServeTabActions = {
                     type: ActionTypes.UPDATED_SMTP_SERVER_SETTINGS,
                     payload: payload
                 })]).then(() => {
-                    if(typeof callback === "function"){
+                    if (typeof callback === "function") {
                         callback(payload);
                     }
                 });
@@ -137,7 +137,7 @@ const smtpServeTabActions = {
                         providerChanged: false
                     }
                 })]).then(() => {
-                    if(typeof callback === "function"){
+                    if (typeof callback === "function") {
                         callback();
                     }
                 }); 
diff --git a/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/App.jsx b/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/App.jsx
index 2ba29dfeb3e..119fc5e4b8a 100644
--- a/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/App.jsx
+++ b/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/App.jsx
@@ -40,7 +40,7 @@ class App extends Component {
                 <PersonaBarPage isOpen={true}>
                     <PersonaBarPageHeader title="Servers">
                         {buttonVisible && 
-                            <Button type="secondary" size="large" 
+                            <Button type="danger" size="large" 
                                 onClick={props.onClearCacheClicked}>{localization.get("clearCacheButtonLabel")}</Button>
                         }
                         {buttonVisible && 
@@ -63,7 +63,8 @@ App.propTypes = {
     onRestartApplicationClicked: PropTypes.func.isRequired,
     reloadPage: PropTypes.bool.isRequired,
     errorMessage: PropTypes.string,
-    infoMessage: PropTypes.string
+    infoMessage: PropTypes.string,
+    onClearCacheClicked: PropTypes.func
 };
 
 function mapStateToProps(state) {
diff --git a/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/Servers/ServerRow/index.jsx b/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/Servers/ServerRow/index.jsx
index 3445428d712..34084a28094 100644
--- a/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/Servers/ServerRow/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/Servers/ServerRow/index.jsx
@@ -1,13 +1,13 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import {
-  Button,
-  GridCell,
-  TextOverflowWrapper,
-  IconButton,
-  Collapsible,
-  SingleLineInputWithError,
-  SvgIcons,
+    Button,
+    GridCell,
+    TextOverflowWrapper,
+    IconButton,
+    Collapsible,
+    SingleLineInputWithError,
+    SvgIcons,
 } from "@dnnsoftware/dnn-react-common";
 import Localization from "../../../../localization";
 import util from "../../../../utils";
@@ -15,129 +15,129 @@ import "./style.less";
 import serversTabService from "../../../../services/serversTabService";
 
 export default class ServerRow extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      server: props.server,
-      newUrl: props.server.url,
-    };
-  }
+    constructor(props) {
+        super(props);
+        this.state = {
+            server: props.server,
+            newUrl: props.server.url,
+        };
+    }
 
-  toggleEdit() {
-    if (this.props.inEdit) {
-      this.props.collapse();
-    } else {
-      this.changeUrl(this.props.server.url);
-      this.props.openCollapse();
+    toggleEdit() {
+        if (this.props.inEdit) {
+            this.props.collapse();
+        } else {
+            this.changeUrl(this.props.server.url);
+            this.props.openCollapse();
+        }
     }
-  }
 
-  changeUrl(newUrl) {
-    this.setState({
-      newUrl: newUrl,
-    });
-  }
+    changeUrl(newUrl) {
+        this.setState({
+            newUrl: newUrl,
+        });
+    }
 
-  updateUrl() {
-    serversTabService
-      .editServerUrl(this.props.server.serverId, this.state.newUrl)
-      .then((response) => {
-        if (response) {
-          let server = this.state.server;
-          server.url = this.state.newUrl;
-          this.setState({
-            server: server,
-          });
-        }
-      })
-      .catch(() => {
-        util.notifyError(Localization.get("ServerUpdateUrlError"));
-      });
-    this.props.collapse();
-  }
+    updateUrl() {
+        serversTabService
+            .editServerUrl(this.props.server.serverId, this.state.newUrl)
+            .then((response) => {
+                if (response) {
+                    let server = this.state.server;
+                    server.url = this.state.newUrl;
+                    this.setState({
+                        server: server,
+                    });
+                }
+            })
+            .catch(() => {
+                util.notifyError(Localization.get("ServerUpdateUrlError"));
+            });
+        this.props.collapse();
+    }
 
-  deleteServer() {
-    util.confirm(
-      Localization.get("DeleteServerConfirm"),
-      Localization.get("Confirm"),
-      Localization.get("Cancel"),
-      function () {
-        this.props.deleteServer(this.props.server.serverId);
-      }.bind(this)
-    );
-  }
+    deleteServer() {
+        util.confirm(
+            Localization.get("DeleteServerConfirm"),
+            Localization.get("Confirm"),
+            Localization.get("Cancel"),
+            function () {
+                this.props.deleteServer(this.props.server.serverId);
+            }.bind(this)
+        );
+    }
 
-  render() {
-    const { server } = this.state;
-    return (
-      <div className={"collapsible-component1 " + this.props.inEdit}>
-        <div className={"collapsible-header1 " + !this.props.inEdit}>
-          <GridCell columnSize={5}>
-            <span
-              dangerouslySetInnerHTML={{ __html: SvgIcons.ListViewIcon }}
-              className={server.isActive ? "icon-flat active" : "icon-flat"}
-            ></span>
-          </GridCell>
-          <GridCell columnSize={25}>
-            <TextOverflowWrapper text={server.serverName} />
-          </GridCell>
-          <GridCell columnSize={40}>
-            <TextOverflowWrapper text={server.url} />
-          </GridCell>
-          <GridCell columnSize={20}>
-            {util.formatDateAndTime(server.lastActivityDate)}
-          </GridCell>
-          <GridCell columnSize={10}>
-            <IconButton
-              type="trash"
-              className={"edit-icon"}
-              onClick={this.deleteServer.bind(this)}
-              title={Localization.get("Delete")}
-            />
-            <IconButton
-              type="edit"
-              className={"edit-icon " + !this.props.inEdit}
-              onClick={this.toggleEdit.bind(this)}
-              title={Localization.get("Edit")}
-            />
-          </GridCell>
-        </div>
-        <Collapsible
-          accordion={true}
-          isOpened={this.props.inEdit}
-          className="role-row-collapsible"
-        >
-          <div key="editor-container-columnOne" className="editor-container">
-            <SingleLineInputWithError
-              value={this.state.newUrl}
-              onChange={(e) => {
-                this.changeUrl(e.target.value);
-              }}
-              label={Localization.get("Url")}
-              tooltipMessage={Localization.get("Url.Help")}
-              autoComplete="off"
-              inputStyle={{ marginBottom: 0 }}
-              tabIndex={1}
-            />
-          </div>
-          <div className="buttons-box">
-            <Button type="secondary" onClick={this.props.collapse.bind(this)}>
-              {Localization.get("Cancel")}
-            </Button>
-            <Button type="primary" onClick={this.updateUrl.bind(this)}>
-              {Localization.get("Save")}
-            </Button>
-          </div>
-        </Collapsible>
-      </div>
-    );
-  }
+    render() {
+        const { server } = this.state;
+        return (
+            <div className={"collapsible-component1 " + this.props.inEdit}>
+                <div className={"collapsible-header1 " + !this.props.inEdit}>
+                    <GridCell columnSize={5}>
+                        <span
+                            dangerouslySetInnerHTML={{ __html: SvgIcons.ListViewIcon }}
+                            className={server.isActive ? "icon-flat active" : "icon-flat"}
+                        ></span>
+                    </GridCell>
+                    <GridCell columnSize={25}>
+                        <TextOverflowWrapper text={server.serverName} />
+                    </GridCell>
+                    <GridCell columnSize={40}>
+                        <TextOverflowWrapper text={server.url} />
+                    </GridCell>
+                    <GridCell columnSize={20}>
+                        {util.formatDateAndTime(server.lastActivityDate)}
+                    </GridCell>
+                    <GridCell columnSize={10}>
+                        <IconButton
+                            type="trash"
+                            className={"edit-icon"}
+                            onClick={this.deleteServer.bind(this)}
+                            title={Localization.get("Delete")}
+                        />
+                        <IconButton
+                            type="edit"
+                            className={"edit-icon " + !this.props.inEdit}
+                            onClick={this.toggleEdit.bind(this)}
+                            title={Localization.get("Edit")}
+                        />
+                    </GridCell>
+                </div>
+                <Collapsible
+                    accordion={true}
+                    isOpened={this.props.inEdit}
+                    className="role-row-collapsible"
+                >
+                    <div key="editor-container-columnOne" className="editor-container">
+                        <SingleLineInputWithError
+                            value={this.state.newUrl}
+                            onChange={(e) => {
+                                this.changeUrl(e.target.value);
+                            }}
+                            label={Localization.get("Url")}
+                            tooltipMessage={Localization.get("Url.Help")}
+                            autoComplete="off"
+                            inputStyle={{ marginBottom: 0 }}
+                            tabIndex={1}
+                        />
+                    </div>
+                    <div className="buttons-box">
+                        <Button type="neutral" onClick={this.props.collapse.bind(this)}>
+                            {Localization.get("Cancel")}
+                        </Button>
+                        <Button type="primary" onClick={this.updateUrl.bind(this)}>
+                            {Localization.get("Save")}
+                        </Button>
+                    </div>
+                </Collapsible>
+            </div>
+        );
+    }
 }
 
 ServerRow.propTypes = {
-  server: PropTypes.object,
-  inEdit: PropTypes.bool,
-  openCollapse: PropTypes.func,
-  collapse: PropTypes.func,
-  deleteServer: PropTypes.func,
+    server: PropTypes.object,
+    inEdit: PropTypes.bool,
+    openCollapse: PropTypes.func,
+    collapse: PropTypes.func,
+    deleteServer: PropTypes.func,
 };
diff --git a/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/Servers/Servers/index.jsx b/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/Servers/Servers/index.jsx
index e55796f0dd4..d6b907052b3 100644
--- a/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/Servers/Servers/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/Servers/Servers/index.jsx
@@ -1,10 +1,10 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import {
-  Button,
-  GridSystem,
-  Label,
-  GridCell,
+    Button,
+    GridSystem,
+    Label,
+    GridCell,
 } from "@dnnsoftware/dnn-react-common";
 import InfoBlock from "../../../common/InfoBlock";
 import Localization from "../../../../localization";
@@ -20,122 +20,122 @@ import ServerList from "../ServerList";
 const defaultPlaceHolder = "...";
 
 class Servers extends Component {
-  componentDidMount() {
-    this.props.onRetrieveServers();
-  }
+    componentDidMount() {
+        this.props.onRetrieveServers();
+    }
 
-  UNSAFE_componentWillReceiveProps(newProps) {
-    if (
-      this.props.errorMessage !== newProps.errorMessage &&
+    UNSAFE_componentWillReceiveProps(newProps) {
+        if (
+            this.props.errorMessage !== newProps.errorMessage &&
       newProps.errorMessage
-    ) {
-      utils.notifyError(newProps.errorMessage);
+        ) {
+            utils.notifyError(newProps.errorMessage);
+        }
     }
-  }
 
-  deleteServer(serverId) {
-    this.props.deleteServer(serverId);
-  }
+    deleteServer(serverId) {
+        this.props.deleteServer(serverId);
+    }
 
-  deleteNonActiveServers() {
-    utils.confirm(
-      Localization.get("DeleteNonActiveServers.Confirm"),
-      Localization.get("Confirm"),
-      Localization.get("Cancel"),
-      function () {
-        this.props.deleteNonActiveServers();
-      }.bind(this)
-    );
-  }
+    deleteNonActiveServers() {
+        utils.confirm(
+            Localization.get("DeleteNonActiveServers.Confirm"),
+            Localization.get("Confirm"),
+            Localization.get("Cancel"),
+            function () {
+                this.props.deleteNonActiveServers();
+            }.bind(this)
+        );
+    }
 
-  hasInactiveServers() {
-    let res = false;
-    this.props.servers.forEach((s) => {
-      res = res || !s.isActive;
-    });
-    return res;
-  }
+    hasInactiveServers() {
+        let res = false;
+        this.props.servers.forEach((s) => {
+            res = res || !s.isActive;
+        });
+        return res;
+    }
 
-  render() {
-    const { props } = this;
-    let serverName = "";
-    props.servers.forEach((element) => {
-      if (element.isCurrent) {
-        serverName = element.serverName;
-      }
-    });
+    render() {
+        const { props } = this;
+        let serverName = "";
+        props.servers.forEach((element) => {
+            if (element.isCurrent) {
+                serverName = element.serverName;
+            }
+        });
 
-    return (
-      <GridCell>
-        <GridCell className="dnn-servers-info-panel">
-          <GridSystem>
+        return (
             <GridCell>
-              <InfoBlock
-                label={Localization.get("Servers_CurrentServerName")}
-                tooltip={Localization.get("Servers_CurrentServerName.Help")}
-                text={serverName}
-              />
+                <GridCell className="dnn-servers-info-panel">
+                    <GridSystem>
+                        <GridCell>
+                            <InfoBlock
+                                label={Localization.get("Servers_CurrentServerName")}
+                                tooltip={Localization.get("Servers_CurrentServerName.Help")}
+                                text={serverName}
+                            />
+                        </GridCell>
+                        <GridCell>
+                            {this.hasInactiveServers() ? (
+                                <div className="warningBox">
+                                    <div className="warningText">
+                                        {Localization.get("DeleteNonActiveServers.Warning")}
+                                    </div>
+                                    <div className="warningButton">
+                                        <Button
+                                            type="danger"
+                                            onClick={this.deleteNonActiveServers.bind(this)}
+                                        >
+                                            {Localization.get("DeleteNonActiveServers")}
+                                        </Button>
+                                    </div>
+                                </div>
+                            ) : null}
+                        </GridCell>
+                    </GridSystem>
+                </GridCell>
+                <GridCell className="dnn-servers-grid-panel">
+                    <Label
+                        className="header-title"
+                        label={Localization.get("plWebServers")}
+                    />
+                    <ServerList
+                        servers={props.servers}
+                        deleteServer={this.deleteServer.bind(this)}
+                    />
+                </GridCell>
             </GridCell>
-            <GridCell>
-              {this.hasInactiveServers() ? (
-                <div className="warningBox">
-                  <div className="warningText">
-                    {Localization.get("DeleteNonActiveServers.Warning")}
-                  </div>
-                  <div className="warningButton">
-                    <Button
-                      type="secondary"
-                      onClick={this.deleteNonActiveServers.bind(this)}
-                    >
-                      {Localization.get("DeleteNonActiveServers")}
-                    </Button>
-                  </div>
-                </div>
-              ) : null}
-            </GridCell>
-          </GridSystem>
-        </GridCell>
-        <GridCell className="dnn-servers-grid-panel">
-          <Label
-            className="header-title"
-            label={Localization.get("plWebServers")}
-          />
-          <ServerList
-            servers={props.servers}
-            deleteServer={this.deleteServer.bind(this)}
-          />
-        </GridCell>
-      </GridCell>
-    );
-  }
+        );
+    }
 }
 
 Servers.propTypes = {
-  errorMessage: PropTypes.string,
-  onRetrieveServers: PropTypes.func.isRequired,
-  deleteServer: PropTypes.func.isRequired,
-  deleteNonActiveServers: PropTypes.func.isRequired,
-  servers: PropTypes.array,
+    errorMessage: PropTypes.string,
+    onRetrieveServers: PropTypes.func.isRequired,
+    deleteServer: PropTypes.func.isRequired,
+    deleteNonActiveServers: PropTypes.func.isRequired,
+    servers: PropTypes.array,
 };
 
 function mapStateToProps(state) {
-  return {
-    servers: state.serversTab.servers,
-    errorMessage: state.serversTab.errorMessage,
-  };
+    return {
+        servers: state.serversTab.servers,
+        errorMessage: state.serversTab.errorMessage,
+    };
 }
 
 function mapDispatchToProps(dispatch) {
-  return {
-    ...bindActionCreators(
-      {
-        onRetrieveServers: ServersTabActions.loadServers,
-        deleteServer: ServersTabActions.deleteServer,
-        deleteNonActiveServers: ServersTabActions.deleteNonActiveServers,
-      },
-      dispatch
-    ),
-  };
+    return {
+        ...bindActionCreators(
+            {
+                onRetrieveServers: ServersTabActions.loadServers,
+                deleteServer: ServersTabActions.deleteServer,
+                deleteNonActiveServers: ServersTabActions.deleteNonActiveServers,
+            },
+            dispatch
+        ),
+    };
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(Servers);
diff --git a/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/SmtpServer.jsx b/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/SmtpServer.jsx
index 3acfd65fcd8..f4ac7d2af92 100644
--- a/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/SmtpServer.jsx
+++ b/Dnn.AdminExperience/ClientSide/Servers.Web/src/components/Tabs/SmtpServer.jsx
@@ -13,577 +13,563 @@ import SmtpServerTabActions from "../../actions/smtpServerTab";
 import utils from "../../utils";
 
 class SmtpServer extends Component {
-  componentDidMount() {
+    componentDidMount() {
 
-    const loadSettings = () => {
-      const { props } = this;
-
-      const selectedSmtpSettings = this.getSelectedSmtpSettings();
+        const loadSettings = () => {
+            const selectedSmtpSettings = this.getSelectedSmtpSettings();
       
-      this.onChangeAuthProvider({value: selectedSmtpSettings.authProvider}, true);
-    };
-
-    this.props.onRetrieveSmtpServerInfo(loadSettings.bind(this));
-    this.props.onRetrieveAuthProviders(loadSettings.bind(this));
-  }
+            this.onChangeAuthProvider({value: selectedSmtpSettings.authProvider}, true);
+        };
 
-  UNSAFE_componentWillReceiveProps(newProps) {
-    const { props } = this;
+        this.props.onRetrieveSmtpServerInfo(loadSettings.bind(this));
+        this.props.onRetrieveAuthProviders(loadSettings.bind(this));
+    }
 
-    if (
-      this.props.infoMessage !== newProps.infoMessage &&
+    UNSAFE_componentWillReceiveProps(newProps) {
+        if (
+            this.props.infoMessage !== newProps.infoMessage &&
       newProps.infoMessage
-    ) {
-      utils.notify(newProps.infoMessage);
-    }
+        ) {
+            utils.notify(newProps.infoMessage);
+        }
 
-    if (
-      this.props.errorMessage !== newProps.errorMessage &&
+        if (
+            this.props.errorMessage !== newProps.errorMessage &&
       newProps.errorMessage
-    ) {
-      utils.notifyError(newProps.errorMessage);
+        ) {
+            utils.notifyError(newProps.errorMessage);
+        }
+
+        const selectedSmtpSettings = this.getSelectedSmtpSettings();
+        if (newProps.providerChanged && selectedSmtpSettings.smtpAuthentication === "3") {
+            this.props.onRetrieveAuthProviders();
+        }
     }
 
-    const selectedSmtpSettings = this.getSelectedSmtpSettings();
-    if(newProps.providerChanged && selectedSmtpSettings.smtpAuthentication === "3"){
-      this.props.onRetrieveAuthProviders();
+    onChangeSmtpServerMode(mode) {
+        const loadSettings = () => {
+            const selectedSmtpSettings = this.getSelectedSmtpSettings();
+            this.onChangeAuthProvider({value: selectedSmtpSettings.authProvider}, true);
+        };
+    
+        this.props.onChangeSmtpServerMode(mode, loadSettings.bind(this));
     }
-  }
 
-  onChangeSmtpServerMode(mode) {
-    const loadSettings = () => {
-      const { props } = this;
+    onChangeAuthenticationMode(authentication) {
+        this.props.onChangeSmtpAuthentication(authentication);
+    }
 
-      const selectedSmtpSettings = this.getSelectedSmtpSettings();
-      this.onChangeAuthProvider({value: selectedSmtpSettings.authProvider}, true);
-    };
-    
-    this.props.onChangeSmtpServerMode(mode, loadSettings.bind(this));
-  }
-
-  onChangeAuthenticationMode(authentication) {
-    this.props.onChangeSmtpAuthentication(authentication);
-  }
-
-  onChangeSmtpEnableSsl(enabled) {
-    this.props.onChangeSmtpConfigurationValue("enableSmtpSsl", enabled);
-  }
-
-  onChangeField(key, event) {
-    this.props.onChangeSmtpConfigurationValue(key, event.target.value);
-  }
-
-  onChangeAuthProvider(provider, passCheck){
-    const { props } = this;
-
-    const authProvider = this.getSelectedAuthProviders().filter(function(item){
-      return item.name === provider.value;
-    }).pop();
-
-    this.props.onChangeSmtpConfigurationValue("authProvider", provider.value, passCheck);
-
-    //initialize settings
-    let settings = [];
-    if(typeof authProvider !== "undefined"){
-      for(let i = 0; i < authProvider.settings.length; i++){
-        const setting = authProvider.settings[i];
-        settings.push({
-          name: setting.name, 
-          value: setting.value, 
-          label: setting.label,
-          help: setting.help,
-          isSecure: setting.isSecure,
-          isRequired: setting.isRequired
-        });
-      }
+    onChangeSmtpEnableSsl(enabled) {
+        this.props.onChangeSmtpConfigurationValue("enableSmtpSsl", enabled);
     }
-    this.props.onChangeSmtpConfigurationValue("authProviderSettings", settings, passCheck);
-  }
-
-  onChangeAuthSetting(name, event){
-    const { props } = this;
-
-    const selectedSmtpSettings = this.getSelectedSmtpSettings();
-    const settings = selectedSmtpSettings.authProviderSettings;
-
-    let newSettings = [];
-    for(let i = 0; i < settings.length; i++){
-      newSettings.push({
-        name: settings[i].name,
-        value: settings[i].name === name ? event.target.value : settings[i].value,
-        label: settings[i].label,
-        help: settings[i].help,
-        isSecure: settings[i].isSecure,
-        isRequired: settings[i].isRequired
-      });
+
+    onChangeField(key, event) {
+        this.props.onChangeSmtpConfigurationValue(key, event.target.value);
     }
 
-    props.onChangeSmtpConfigurationValue("authProviderSettings", newSettings);
-  }
+    onChangeAuthProvider(provider, passCheck) {
+        const authProvider = this.getSelectedAuthProviders().filter(function (item) {
+            return item.name === provider.value;
+        }).pop();
+
+        this.props.onChangeSmtpConfigurationValue("authProvider", provider.value, passCheck);
+
+        //initialize settings
+        let settings = [];
+        if (typeof authProvider !== "undefined") {
+            for (let i = 0; i < authProvider.settings.length; i++) {
+                const setting = authProvider.settings[i];
+                settings.push({
+                    name: setting.name, 
+                    value: setting.value, 
+                    label: setting.label,
+                    help: setting.help,
+                    isSecure: setting.isSecure,
+                    isRequired: setting.isRequired
+                });
+            }
+        }
+        this.props.onChangeSmtpConfigurationValue("authProviderSettings", settings, passCheck);
+    }
 
-  onSave() {
-    const { props } = this;
+    onChangeAuthSetting(name, event) {
+        const { props } = this;
+
+        const selectedSmtpSettings = this.getSelectedSmtpSettings();
+        const settings = selectedSmtpSettings.authProviderSettings;
+
+        let newSettings = [];
+        for (let i = 0; i < settings.length; i++) {
+            newSettings.push({
+                name: settings[i].name,
+                value: settings[i].name === name ? event.target.value : settings[i].value,
+                label: settings[i].label,
+                help: settings[i].help,
+                isSecure: settings[i].isSecure,
+                isRequired: settings[i].isRequired
+            });
+        }
 
-    if (this.areThereValidationError()) {
-      return;
+        props.onChangeSmtpConfigurationValue("authProviderSettings", newSettings);
     }
 
-    const smtpSettings =
+    onSave() {
+        const { props } = this;
+
+        if (this.areThereValidationError()) {
+            return;
+        }
+
+        const smtpSettings =
       props.smtpServerInfo.smtpServerMode === "h" && utils.isHostUser()
-        ? props.smtpServerInfo.host
-        : props.smtpServerInfo.site;
-
-    const updateRequest = {
-      smtpServerMode: props.smtpServerInfo.smtpServerMode,
-      smtpServer: smtpSettings.smtpServer,
-      smtpConnectionLimit: smtpSettings.smtpConnectionLimit,
-      smtpMaxIdleTime: smtpSettings.smtpMaxIdleTime,
-      smtpAuthentication: smtpSettings.smtpAuthentication,
-      smtpUsername: smtpSettings.smtpUserName,
-      smtpPassword: smtpSettings.smtpPassword,
-      smtpHostEmail: smtpSettings.smtpHostEmail,
-      enableSmtpSsl: smtpSettings.enableSmtpSsl,
-      authProvider: smtpSettings.authProvider,
-      AuthProviderSettings: this.toDictionary(smtpSettings.authProviderSettings),
-      messageSchedulerBatchSize:
+          ? props.smtpServerInfo.host
+          : props.smtpServerInfo.site;
+
+        const updateRequest = {
+            smtpServerMode: props.smtpServerInfo.smtpServerMode,
+            smtpServer: smtpSettings.smtpServer,
+            smtpConnectionLimit: smtpSettings.smtpConnectionLimit,
+            smtpMaxIdleTime: smtpSettings.smtpMaxIdleTime,
+            smtpAuthentication: smtpSettings.smtpAuthentication,
+            smtpUsername: smtpSettings.smtpUserName,
+            smtpPassword: smtpSettings.smtpPassword,
+            smtpHostEmail: smtpSettings.smtpHostEmail,
+            enableSmtpSsl: smtpSettings.enableSmtpSsl,
+            authProvider: smtpSettings.authProvider,
+            AuthProviderSettings: this.toDictionary(smtpSettings.authProviderSettings),
+            messageSchedulerBatchSize:
         props.smtpServerInfo.host.messageSchedulerBatchSize,
-    };
-    props.onUpdateSmtpServerSettings(updateRequest, this.onSettingsUpdated);
-  }
-
-  onSettingsUpdated(result){
+        };
+        props.onUpdateSmtpServerSettings(updateRequest, this.onSettingsUpdated);
+    }
 
-  }
+    toDictionary(settings) {
+        let dict = {};
+        settings = settings || [];
+        for (let i = 0; i < settings.length; i++) {
+            dict[settings[i].name] = settings[i].value;
+        }
 
-  toDictionary(settings){
-    let dict = {};
-    settings = settings || [];
-    for(let i = 0; i < settings.length; i++){
-      dict[settings[i].name] = settings[i].value;
+        return dict;
     }
 
-    return dict;
-  }
-
-  getSelectedSmtpSettings(){
-    const { props } = this;
+    getSelectedSmtpSettings() {
+        const { props } = this;
 
-      const areGlobalSettings = props.smtpServerInfo.smtpServerMode === "h";
-      const selectedSmtpSettings =
+        const areGlobalSettings = props.smtpServerInfo.smtpServerMode === "h";
+        const selectedSmtpSettings =
         (areGlobalSettings
-          ? props.smtpServerInfo.host
-          : props.smtpServerInfo.site) || {};
-      return selectedSmtpSettings;
-  }
+            ? props.smtpServerInfo.host
+            : props.smtpServerInfo.site) || {};
+        return selectedSmtpSettings;
+    }
 
-  getSelectedAuthProviders(){
-    const { props } = this;
+    getSelectedAuthProviders() {
+        const { props } = this;
 
-    if(typeof props.smtpServerInfo === "undefined" || typeof props.authProviders === "undefined"){
-      return [];
+        if (typeof props.smtpServerInfo === "undefined" || typeof props.authProviders === "undefined") {
+            return [];
+        }
+
+        const isGlobal = props.smtpServerInfo.smtpServerMode === "h";
+        return (isGlobal ? props.authProviders.host : props.authProviders.site) || [];
     }
 
-    const isGlobal = props.smtpServerInfo.smtpServerMode === "h";
-    return (isGlobal ? props.authProviders.host : props.authProviders.site) || [];
-  }
-
-  areThereValidationError() {
-    let areErrors = false;
-    const errors = this.props.errors;
-    for (let prop in errors) {
-      if (errors[prop]) {
-        return true;
-      }
+    areThereValidationError() {
+        let areErrors = false;
+        const errors = this.props.errors;
+        for (let prop in errors) {
+            if (errors[prop]) {
+                return true;
+            }
+        }
+
+        return areErrors;
     }
 
-    return areErrors;
-  }
+    onTestSmtpSettings() {
+        const { props } = this;
 
-  onTestSmtpSettings() {
-    const { props } = this;
+        if (this.areThereValidationError()) {
+            return;
+        }
+
+        let smtpSettings = {};
+        if (props.smtpServerInfo.smtpServerMode === "h" && utils.isHostUser()) {
+            smtpSettings = props.smtpServerInfo.host;
+        }
+        if (props.smtpServerInfo.smtpServerMode === "p") {
+            smtpSettings = props.smtpServerInfo.site;
+        }
+        const authProvider = this.getSelectedAuthProviders().filter(function (item) {
+            return item.name === smtpSettings.authProvider;
+        }).pop() || {};
 
-    if (this.areThereValidationError()) {
-      return;
+        if (smtpSettings.smtpAuthentication === "3" && (props.isDirty || !authProvider.isAuthorized)) {
+            utils.notifyError(localization.get("OAuthConfigurationNotSaved"));
+            return;
+        }
+
+        const sendEmailRequest = {
+            smtpServerMode: props.smtpServerInfo.smtpServerMode,
+            smtpServer: smtpSettings.smtpServer,
+            smtpAuthentication: smtpSettings.smtpAuthentication,
+            smtpUsername: smtpSettings.smtpUserName,
+            smtpPassword: smtpSettings.smtpPassword,
+            enableSmtpSsl: smtpSettings.enableSmtpSsl,
+            authProvider: smtpSettings.authProvider
+        };
+        props.onSendTestEmail(sendEmailRequest);
     }
 
-    let smtpSettings = {};
-    if (props.smtpServerInfo.smtpServerMode === "h" && utils.isHostUser()) {
-      smtpSettings = props.smtpServerInfo.host;
+    onCompleteAuthorize() {
+        const selectedSmtpSettings = this.getSelectedSmtpSettings();
+        const authProvider = this.getSelectedAuthProviders().filter(function (item) {
+            return item.name === selectedSmtpSettings.authProvider;
+        }).pop();
+
+        if (authProvider) {
+            const myWindow = this.popupWindow("about:blank", "OAuth", 1090, 600);
+            myWindow.location = authProvider.authorizeUrl;
+
+            const intervalHandler = window.setInterval((() => {
+                if (myWindow.window === null || myWindow.closed === true) {
+                    this.props.onRetrieveAuthProviders();
+                    window.clearInterval(intervalHandler);
+                }
+            }).bind(this), 1000);
+        }
+    
+        return false;
     }
-    if (props.smtpServerInfo.smtpServerMode === "p") {
-      smtpSettings = props.smtpServerInfo.site;
+
+    popupWindow(url, title, w, h) {
+        const left = (screen.width / 2) - (w / 2);
+        const top = (screen.height / 2) - (h / 2);
+        return window.open(url, title, "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=" + w + ", height=" + h + ", top=" + top + ", left=" + left);
     }
-    const authProvider = this.getSelectedAuthProviders().filter(function(item){
-      return item.name === smtpSettings.authProvider;
-    }).pop() || {};
 
-    if(smtpSettings.smtpAuthentication === "3" && (props.isDirty || !authProvider.isAuthorized)){
-      utils.notifyError(localization.get("OAuthConfigurationNotSaved"));
-      return;
+    getSmtpServerOptions() {
+        return [
+            {
+                label: localization.get("GlobalSmtpHostSetting"),
+                value: "h",
+            },
+            {
+                label: localization
+                    .get("SiteSmtpHostSetting")
+                    .replace("{0}", this.props.smtpServerInfo.portalName || ""),
+                value: "p",
+            },
+        ];
     }
 
-    const sendEmailRequest = {
-      smtpServerMode: props.smtpServerInfo.smtpServerMode,
-      smtpServer: smtpSettings.smtpServer,
-      smtpAuthentication: smtpSettings.smtpAuthentication,
-      smtpUsername: smtpSettings.smtpUserName,
-      smtpPassword: smtpSettings.smtpPassword,
-      enableSmtpSsl: smtpSettings.enableSmtpSsl,
-      authProvider: smtpSettings.authProvider
-    };
-    props.onSendTestEmail(sendEmailRequest);
-  }
+    getSmtpAuthenticationOptions() {
+        const hasAuthProviders = this.getSelectedAuthProviders().length > 0;
+        let options = [
+            {
+                label: localization.get("SMTPAnonymous"),
+                value: "0",
+            },
+            {
+                label: localization.get("SMTPBasic"),
+                value: "1",
+            },
+            {
+                label: localization.get("SMTPNTLM"),
+                value: "2",
+            }
+        ];
 
-  onCompleteAuthorize(){
-    const { props } = this;
+        if (hasAuthProviders) {
+            options.push({
+                label: localization.get("SMTPOAUTH"),
+                value: "3",
+            });
+        }
 
-    const selectedSmtpSettings = this.getSelectedSmtpSettings();
-    const authProvider = this.getSelectedAuthProviders().filter(function(item){
-      return item.name === selectedSmtpSettings.authProvider;
-    }).pop();
+        return options;
+    }
 
-    if(authProvider){
-      const myWindow = this.popupWindow('about:blank', 'OAuth', 1090, 600);
-      myWindow.location = authProvider.authorizeUrl;
+    renderAuthSettings() {
+        const { props } = this;
 
-      const intervalHandler = window.setInterval((() => {
-        if(myWindow.window === null || myWindow.closed === true){
-          this.props.onRetrieveAuthProviders();
-          window.clearInterval(intervalHandler);
-        }
-      }).bind(this), 1000);
-    }
-    
-    return false;
-  }
-
-  popupWindow (url, title, w, h) {
-    const left = (screen.width / 2) - (w / 2);
-    const top = (screen.height / 2) - (h / 2);
-    return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
-  }
-
-  getSmtpServerOptions() {
-    return [
-      {
-        label: localization.get("GlobalSmtpHostSetting"),
-        value: "h",
-      },
-      {
-        label: localization
-          .get("SiteSmtpHostSetting")
-          .replace("{0}", this.props.smtpServerInfo.portalName || ""),
-        value: "p",
-      },
-    ];
-  }
-
-  getSmtpAuthenticationOptions() {
-    const hasAuthProviders = this.getSelectedAuthProviders().length > 0;
-    let options = [
-      {
-        label: localization.get("SMTPAnonymous"),
-        value: "0",
-      },
-      {
-        label: localization.get("SMTPBasic"),
-        value: "1",
-      },
-      {
-        label: localization.get("SMTPNTLM"),
-        value: "2",
-      }
-    ];
-
-    if(hasAuthProviders){
-      options.push({
-        label: localization.get("SMTPOAUTH"),
-        value: "3",
-      });
-    }
+        const authProvidersOptions = this.getSelectedAuthProviders().map(function (item) {
+            return {label: item.localizedName, value: item.name};
+        });
 
-    return options;
-  }
-
-  renderAuthSettings(){
-    const { props } = this;
-
-    const authProvidersOptions = this.getSelectedAuthProviders().map(function(item){
-      return {label: item.localizedName, value: item.name};
-    });
-
-    const areGlobalSettings = props.smtpServerInfo.smtpServerMode === "h";
-    const selectedSmtpSettings = this.getSelectedSmtpSettings();
-    const authProvider = this.getSelectedAuthProviders().filter(function(item){
-      return item.name === selectedSmtpSettings.authProvider;
-    }).pop();
-
-    let settingFields = null;
-    if(typeof authProvider !== "undefined"){
-      const settings = selectedSmtpSettings.authProviderSettings || [];
-
-      settingFields = settings.map(function(setting){
-        return <EditBlock
-                key={setting.name}
-                label={setting.label}
-                tooltip={setting.help}
-                value={setting.value}
-                isGlobal={areGlobalSettings}
-                onChange={this.onChangeAuthSetting.bind(this, setting.name)}
-                type={setting.isSecure ? "password" : "text"}
-              />;
-      }.bind(this));
-    }
+        const areGlobalSettings = props.smtpServerInfo.smtpServerMode === "h";
+        const selectedSmtpSettings = this.getSelectedSmtpSettings();
+        const authProvider = this.getSelectedAuthProviders().filter(function (item) {
+            return item.name === selectedSmtpSettings.authProvider;
+        }).pop();
+
+        let settingFields = null;
+        if (typeof authProvider !== "undefined") {
+            const settings = selectedSmtpSettings.authProviderSettings || [];
+
+            settingFields = settings.map(function (setting) {
+                return <EditBlock
+                    key={setting.name}
+                    label={setting.label}
+                    tooltip={setting.help}
+                    value={setting.value}
+                    isGlobal={areGlobalSettings}
+                    onChange={this.onChangeAuthSetting.bind(this, setting.name)}
+                    type={setting.isSecure ? "password" : "text"}
+                />;
+            }.bind(this));
+        }
 
-    const settingCompleted = (selectedSmtpSettings.authProviderSettings || []).filter(i => i.isRequired && (i.value || "") === "").length === 0;
-    return <div>
+        const settingCompleted = (selectedSmtpSettings.authProviderSettings || []).filter(i => i.isRequired && (i.value || "") === "").length === 0;
+        return <div>
             <div style={{paddingBottom: "22px", float: "left", width: "100%"}}>
-              <DropdownBlock
-                tooltip={localization.get("SmtpTab_OAuthProviders.Help")}
-                label={localization.get("SmtpTab_OAuthProviders")}
-                options={authProvidersOptions}
-                value={selectedSmtpSettings.authProvider}
-                onSelect={this.onChangeAuthProvider.bind(this)} />
+                <DropdownBlock
+                    tooltip={localization.get("SmtpTab_OAuthProviders.Help")}
+                    label={localization.get("SmtpTab_OAuthProviders")}
+                    options={authProvidersOptions}
+                    value={selectedSmtpSettings.authProvider}
+                    onSelect={this.onChangeAuthProvider.bind(this)} />
             </div>
             {settingFields}
             {authProvider && !authProvider.isAuthorized && authProvider.authorizeUrl && settingCompleted && !props.isDirty && 
               <div className="warningBox authorize-box">
-                <div className="warningText">
-                    {localization.get("CompleteAuthorize")}
-                </div>
-                <div className="warningButton">
-                    <Button
-                        type="secondary"
-                        onClick={this.onCompleteAuthorize.bind(this)}
-                    >
-                        {localization.get("Authorize")}
-                    </Button>
-                </div>
+                  <div className="warningText">
+                      {localization.get("CompleteAuthorize")}
+                  </div>
+                  <div className="warningButton">
+                      <Button
+                          type="secondary"
+                          onClick={this.onCompleteAuthorize.bind(this)}
+                      >
+                          {localization.get("Authorize")}
+                      </Button>
+                  </div>
               </div>
             }
             {authProvider && authProvider.isAuthorized && !props.isDirty && 
               <div className="warningBox authorize-box success">
-                <div className="warningText">
-                    {localization.get("AuthorizeCompleted")}
-                </div>
+                  <div className="warningText">
+                      {localization.get("AuthorizeCompleted")}
+                  </div>
               </div>
             }
-          </div>;
-  }
-
-  render() {
-    const { props } = this;
-
-    const areGlobalSettings = props.smtpServerInfo.smtpServerMode === "h";
-    const selectedSmtpSettings = this.getSelectedSmtpSettings();
-    const credentialVisible = selectedSmtpSettings.smtpAuthentication === "1";
-    const oauthEnabled = selectedSmtpSettings.smtpAuthentication === "3";
-    const smtpSettingsVisible = utils.isHostUser() || !areGlobalSettings;
-
-    if (props.smtpServerInfo.hideCoreSettings) {
-      return (
-        <div className="dnn-servers-info-panel-big smtpServerSettingsTab">
-          <div className="warningBox">
-            <div className="warningText">
-              {localization.get("NonCoreMailProvider")}
-            </div>
-          </div>
-        </div>
-      );
+        </div>;
     }
 
-    return (
-      <div className="dnn-servers-info-panel-big smtpServerSettingsTab">
-        <GridSystem>
-          <div className="leftPane">
-            <div className="tooltipAdjustment border-bottom">
-              <RadioButtonBlock
-                options={this.getSmtpServerOptions()}
-                label={localization.get("plSMTPMode")}
-                tooltip={localization.get("plSMTPMode.Help")}
-                onChange={this.onChangeSmtpServerMode.bind(this)}
-                value={props.smtpServerInfo.smtpServerMode}
-              />
-            </div>
-            <div className="tooltipAdjustment">
-              {smtpSettingsVisible && (
-                <div>
-                  <EditBlock
-                    label={localization.get("plSMTPServer")}
-                    tooltip={localization.get("plSMTPServer.Help")}
-                    value={selectedSmtpSettings.smtpServer}
-                    isGlobal={areGlobalSettings}
-                    onChange={this.onChangeField.bind(this, "smtpServer")}
-                    error={props.errors["smtpServer"]}
-                  />
-
-                  <EditBlock
-                    label={localization.get("plConnectionLimit")}
-                    tooltip={localization.get("plConnectionLimit.Help")}
-                    value={selectedSmtpSettings.smtpConnectionLimit}
-                    isGlobal={areGlobalSettings}
-                    onChange={this.onChangeField.bind(
-                      this,
-                      "smtpConnectionLimit"
-                    )}
-                    error={props.errors["smtpConnectionLimit"]}
-                  />
-
-                  <EditBlock
-                    label={localization.get("plMaxIdleTime")}
-                    tooltip={localization.get("plMaxIdleTime.Help")}
-                    value={selectedSmtpSettings.smtpMaxIdleTime}
-                    isGlobal={areGlobalSettings}
-                    onChange={this.onChangeField.bind(this, "smtpMaxIdleTime")}
-                    error={props.errors["smtpMaxIdleTime"]}
-                  />
+    render() {
+        const { props } = this;
+
+        const areGlobalSettings = props.smtpServerInfo.smtpServerMode === "h";
+        const selectedSmtpSettings = this.getSelectedSmtpSettings();
+        const credentialVisible = selectedSmtpSettings.smtpAuthentication === "1";
+        const oauthEnabled = selectedSmtpSettings.smtpAuthentication === "3";
+        const smtpSettingsVisible = utils.isHostUser() || !areGlobalSettings;
+
+        if (props.smtpServerInfo.hideCoreSettings) {
+            return (
+                <div className="dnn-servers-info-panel-big smtpServerSettingsTab">
+                    <div className="warningBox">
+                        <div className="warningText">
+                            {localization.get("NonCoreMailProvider")}
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div className="dnn-servers-info-panel-big smtpServerSettingsTab">
+                <GridSystem>
+                    <div className="leftPane">
+                        <div className="tooltipAdjustment border-bottom">
+                            <RadioButtonBlock
+                                options={this.getSmtpServerOptions()}
+                                label={localization.get("plSMTPMode")}
+                                tooltip={localization.get("plSMTPMode.Help")}
+                                onChange={this.onChangeSmtpServerMode.bind(this)}
+                                value={props.smtpServerInfo.smtpServerMode}
+                            />
+                        </div>
+                        <div className="tooltipAdjustment">
+                            {smtpSettingsVisible && (
+                                <div>
+                                    <EditBlock
+                                        label={localization.get("plSMTPServer")}
+                                        tooltip={localization.get("plSMTPServer.Help")}
+                                        value={selectedSmtpSettings.smtpServer}
+                                        isGlobal={areGlobalSettings}
+                                        onChange={this.onChangeField.bind(this, "smtpServer")}
+                                        error={props.errors["smtpServer"]}
+                                    />
+
+                                    <EditBlock
+                                        label={localization.get("plConnectionLimit")}
+                                        tooltip={localization.get("plConnectionLimit.Help")}
+                                        value={selectedSmtpSettings.smtpConnectionLimit}
+                                        isGlobal={areGlobalSettings}
+                                        onChange={this.onChangeField.bind(
+                                            this,
+                                            "smtpConnectionLimit"
+                                        )}
+                                        error={props.errors["smtpConnectionLimit"]}
+                                    />
+
+                                    <EditBlock
+                                        label={localization.get("plMaxIdleTime")}
+                                        tooltip={localization.get("plMaxIdleTime.Help")}
+                                        value={selectedSmtpSettings.smtpMaxIdleTime}
+                                        isGlobal={areGlobalSettings}
+                                        onChange={this.onChangeField.bind(this, "smtpMaxIdleTime")}
+                                        error={props.errors["smtpMaxIdleTime"]}
+                                    />
+                                </div>
+                            )}
+                            {smtpSettingsVisible && areGlobalSettings && (
+                                <EditBlock
+                                    label={localization.get("plBatch")}
+                                    tooltip={localization.get("plBatch.Help")}
+                                    value={props.smtpServerInfo.host.messageSchedulerBatchSize}
+                                    isGlobal={areGlobalSettings}
+                                    onChange={this.onChangeField.bind(
+                                        this,
+                                        "messageSchedulerBatchSize"
+                                    )}
+                                    error={props.errors["messageSchedulerBatchSize"]}
+                                />
+                            )}
+                        </div>
+                    </div>
+                    <div className="rightPane">
+                        {smtpSettingsVisible && (
+                            <div className="tooltipAdjustment border-bottom smtp-authentication-mode">
+                                <RadioButtonBlock
+                                    options={this.getSmtpAuthenticationOptions()}
+                                    label={localization.get("plSMTPAuthentication")}
+                                    tooltip={localization.get("plSMTPAuthentication.Help")}
+                                    onChange={this.onChangeAuthenticationMode.bind(this)}
+                                    value={selectedSmtpSettings.smtpAuthentication || "0"}
+                                    isGlobal={areGlobalSettings}
+                                />
+                            </div>
+                        )}
+                        {smtpSettingsVisible && credentialVisible && (
+                            <div className="tooltipAdjustment">
+                                <EditBlock
+                                    label={localization.get("plSMTPUsername")}
+                                    tooltip={localization.get("plSMTPUsername.Help")}
+                                    value={selectedSmtpSettings.smtpUserName}
+                                    isGlobal={areGlobalSettings}
+                                    onChange={this.onChangeField.bind(this, "smtpUserName")}
+                                    error={props.errors["smtpUserName"]}
+                                />
+
+                                <EditPwdBlock
+                                    label={localization.get("plSMTPPassword")}
+                                    changeButtonText={localization.get("Change")}
+                                    tooltip={localization.get("plSMTPPassword.Help")}
+                                    value={selectedSmtpSettings.smtpPassword}
+                                    isGlobal={areGlobalSettings}
+                                    onChange={this.onChangeField.bind(this, "smtpPassword")}
+                                    onClear={() =>
+                                        props.onChangeSmtpConfigurationValue("smtpPassword", "")
+                                    }
+                                    error={props.errors["smtpPassword"]}
+                                />
+                            </div>
+                        )}
+                        {smtpSettingsVisible && !oauthEnabled && (
+                            <div className="tooltipAdjustment border-bottom" style={{paddingBottom: "22px"}}>
+                                <SwitchBlock
+                                    label={localization.get("plSMTPEnableSSL")}
+                                    onText={localization.get("SwitchOn")}
+                                    offText={localization.get("SwitchOff")}
+                                    tooltip={localization.get("plSMTPEnableSSL.Help")}
+                                    value={selectedSmtpSettings.enableSmtpSsl}
+                                    onChange={this.onChangeSmtpEnableSsl.bind(this)}
+                                    isGlobal={areGlobalSettings}
+                                />
+                            </div>
+                        )}
+                        {oauthEnabled && (
+                            <div className="tooltipAdjustment border-bottom" style={{paddingBottom: "22px"}}>
+                                {this.renderAuthSettings()}
+                            </div>
+                        )}
+                        {smtpSettingsVisible && areGlobalSettings && (
+                            <EditBlock
+                                label={localization.get("plHostEmail")}
+                                tooltip={localization.get("plHostEmail.Help")}
+                                value={selectedSmtpSettings.smtpHostEmail}
+                                isGlobal={true}
+                                onChange={this.onChangeField.bind(this, "smtpHostEmail")}
+                                error={props.errors["smtpHostEmail"]}
+                            />
+                        )}
+                    </div>
+                </GridSystem>
+                <div className="clear" />
+                <div className="buttons-panel">
+                    <Button type="secondary" onClick={this.onTestSmtpSettings.bind(this)}>
+                        {localization.get("EmailTest")}
+                    </Button>
+                    <Button type="primary" onClick={this.onSave.bind(this)} disabled={!props.isDirty}>
+                        {localization.get("SaveButtonText")}
+                    </Button>
                 </div>
-              )}
-              {smtpSettingsVisible && areGlobalSettings && (
-                <EditBlock
-                  label={localization.get("plBatch")}
-                  tooltip={localization.get("plBatch.Help")}
-                  value={props.smtpServerInfo.host.messageSchedulerBatchSize}
-                  isGlobal={areGlobalSettings}
-                  onChange={this.onChangeField.bind(
-                    this,
-                    "messageSchedulerBatchSize"
-                  )}
-                  error={props.errors["messageSchedulerBatchSize"]}
-                />
-              )}
             </div>
-          </div>
-          <div className="rightPane">
-            {smtpSettingsVisible && (
-              <div className="tooltipAdjustment border-bottom smtp-authentication-mode">
-                <RadioButtonBlock
-                  options={this.getSmtpAuthenticationOptions()}
-                  label={localization.get("plSMTPAuthentication")}
-                  tooltip={localization.get("plSMTPAuthentication.Help")}
-                  onChange={this.onChangeAuthenticationMode.bind(this)}
-                  value={selectedSmtpSettings.smtpAuthentication || "0"}
-                  isGlobal={areGlobalSettings}
-                />
-              </div>
-            )}
-            {smtpSettingsVisible && credentialVisible && (
-              <div className="tooltipAdjustment">
-                <EditBlock
-                  label={localization.get("plSMTPUsername")}
-                  tooltip={localization.get("plSMTPUsername.Help")}
-                  value={selectedSmtpSettings.smtpUserName}
-                  isGlobal={areGlobalSettings}
-                  onChange={this.onChangeField.bind(this, "smtpUserName")}
-                  error={props.errors["smtpUserName"]}
-                />
-
-                <EditPwdBlock
-                  label={localization.get("plSMTPPassword")}
-                  changeButtonText={localization.get("Change")}
-                  tooltip={localization.get("plSMTPPassword.Help")}
-                  value={selectedSmtpSettings.smtpPassword}
-                  isGlobal={areGlobalSettings}
-                  onChange={this.onChangeField.bind(this, "smtpPassword")}
-                  onClear={() =>
-                    props.onChangeSmtpConfigurationValue("smtpPassword", "")
-                  }
-                  error={props.errors["smtpPassword"]}
-                />
-              </div>
-            )}
-            {smtpSettingsVisible && !oauthEnabled && (
-              <div className="tooltipAdjustment border-bottom" style={{paddingBottom: "22px"}}>
-                <SwitchBlock
-                  label={localization.get("plSMTPEnableSSL")}
-                  onText={localization.get("SwitchOn")}
-                  offText={localization.get("SwitchOff")}
-                  tooltip={localization.get("plSMTPEnableSSL.Help")}
-                  value={selectedSmtpSettings.enableSmtpSsl}
-                  onChange={this.onChangeSmtpEnableSsl.bind(this)}
-                  isGlobal={areGlobalSettings}
-                />
-              </div>
-            )}
-            {oauthEnabled && (
-              <div className="tooltipAdjustment border-bottom" style={{paddingBottom: "22px"}}>
-                {this.renderAuthSettings()}
-              </div>
-            )}
-            {smtpSettingsVisible && areGlobalSettings && (
-              <EditBlock
-                label={localization.get("plHostEmail")}
-                tooltip={localization.get("plHostEmail.Help")}
-                value={selectedSmtpSettings.smtpHostEmail}
-                isGlobal={true}
-                onChange={this.onChangeField.bind(this, "smtpHostEmail")}
-                error={props.errors["smtpHostEmail"]}
-              />
-            )}
-          </div>
-        </GridSystem>
-        <div className="clear" />
-        <div className="buttons-panel">
-          <Button type="secondary" onClick={this.onTestSmtpSettings.bind(this)}>
-            {localization.get("EmailTest")}
-          </Button>
-          <Button type="primary" onClick={this.onSave.bind(this)} disabled={!props.isDirty}>
-            {localization.get("SaveButtonText")}
-          </Button>
-        </div>
-      </div>
-    );
-  }
+        );
+    }
 }
 
 SmtpServer.propTypes = {
-  smtpServerInfo: PropTypes.object.isRequired,
-  authProviders: PropTypes.object,
-  authProvider: PropTypes.string,
-  errorMessage: PropTypes.string,
-  onRetrieveSmtpServerInfo: PropTypes.func.isRequired,
-  onRetrieveAuthProviders: PropTypes.func.isRequired,
-  onChangeSmtpServerMode: PropTypes.func.isRequired,
-  onChangeSmtpAuthentication: PropTypes.func.isRequired,
-  onChangeSmtpConfigurationValue: PropTypes.func.isRequired,
-  onUpdateSmtpServerSettings: PropTypes.func.isRequired,
-  infoMessage: PropTypes.string,
-  onSendTestEmail: PropTypes.func.isRequired,
-  errors: PropTypes.array,
-  isDirty: PropTypes.bool
+    smtpServerInfo: PropTypes.object.isRequired,
+    authProviders: PropTypes.object,
+    authProvider: PropTypes.string,
+    errorMessage: PropTypes.string,
+    onRetrieveSmtpServerInfo: PropTypes.func.isRequired,
+    onRetrieveAuthProviders: PropTypes.func.isRequired,
+    onChangeSmtpServerMode: PropTypes.func.isRequired,
+    onChangeSmtpAuthentication: PropTypes.func.isRequired,
+    onChangeSmtpConfigurationValue: PropTypes.func.isRequired,
+    onUpdateSmtpServerSettings: PropTypes.func.isRequired,
+    infoMessage: PropTypes.string,
+    onSendTestEmail: PropTypes.func.isRequired,
+    errors: PropTypes.array,
+    isDirty: PropTypes.bool
 };
 
 function mapStateToProps(state) {
-  return {
-    smtpServerInfo: state.smtpServer.smtpServerInfo,
-    authProviders: state.smtpServer.authProviders,
-    errorMessage: state.smtpServer.errorMessage,
-    infoMessage: state.smtpServer.infoMessage,
-    success: state.smtpServer.success,
-    providerChanged: state.smtpServer.providerChanged,
-    errors: state.smtpServer.errors,
-    isDirty: state.smtpServer.isDirty
-  };
+    return {
+        smtpServerInfo: state.smtpServer.smtpServerInfo,
+        authProviders: state.smtpServer.authProviders,
+        errorMessage: state.smtpServer.errorMessage,
+        infoMessage: state.smtpServer.infoMessage,
+        success: state.smtpServer.success,
+        providerChanged: state.smtpServer.providerChanged,
+        errors: state.smtpServer.errors,
+        isDirty: state.smtpServer.isDirty
+    };
 }
 
 function mapDispatchToProps(dispatch) {
-  return {
-    ...bindActionCreators(
-      {
-        onRetrieveSmtpServerInfo: SmtpServerTabActions.loadSmtpServerInfo,
-        onRetrieveAuthProviders: SmtpServerTabActions.loadAuthProviders,
-        onChangeSmtpServerMode: SmtpServerTabActions.changeSmtpServerMode,
-        onChangeSmtpAuthentication:
+    return {
+        ...bindActionCreators(
+            {
+                onRetrieveSmtpServerInfo: SmtpServerTabActions.loadSmtpServerInfo,
+                onRetrieveAuthProviders: SmtpServerTabActions.loadAuthProviders,
+                onChangeSmtpServerMode: SmtpServerTabActions.changeSmtpServerMode,
+                onChangeSmtpAuthentication:
           SmtpServerTabActions.changeSmtpAuthentication,
-        onChangeSmtpConfigurationValue:
+                onChangeSmtpConfigurationValue:
           SmtpServerTabActions.changeSmtpConfigurationValue,
-        onUpdateSmtpServerSettings:
+                onUpdateSmtpServerSettings:
           SmtpServerTabActions.updateSmtpServerSettings,
-        onSendTestEmail: SmtpServerTabActions.sendTestEmail,
-      },
-      dispatch
-    ),
-  };
+                onSendTestEmail: SmtpServerTabActions.sendTestEmail,
+            },
+            dispatch
+        ),
+    };
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(SmtpServer);
diff --git a/Dnn.AdminExperience/ClientSide/Servers.Web/src/constants/actionTypes/serversTab.js b/Dnn.AdminExperience/ClientSide/Servers.Web/src/constants/actionTypes/serversTab.js
index cea490d5009..9af5f04d49d 100644
--- a/Dnn.AdminExperience/ClientSide/Servers.Web/src/constants/actionTypes/serversTab.js
+++ b/Dnn.AdminExperience/ClientSide/Servers.Web/src/constants/actionTypes/serversTab.js
@@ -1,8 +1,8 @@
 const serversTab = {
-  LOAD_SERVERS: "LOAD_SERVERS",
-  LOADED_SERVERS: "LOADED_SERVERS",
-  ERROR_LOADING_SERVERS: "ERROR_LOADING_SERVERS",
-  ERROR_DELETING_SERVER: "ERROR_DELETING_SERVER",
+    LOAD_SERVERS: "LOAD_SERVERS",
+    LOADED_SERVERS: "LOADED_SERVERS",
+    ERROR_LOADING_SERVERS: "ERROR_LOADING_SERVERS",
+    ERROR_DELETING_SERVER: "ERROR_DELETING_SERVER",
 };
 
 export default serversTab;
diff --git a/Dnn.AdminExperience/ClientSide/Servers.Web/src/reducers/serversTabReducer.js b/Dnn.AdminExperience/ClientSide/Servers.Web/src/reducers/serversTabReducer.js
index f4946efc15b..0e116759931 100644
--- a/Dnn.AdminExperience/ClientSide/Servers.Web/src/reducers/serversTabReducer.js
+++ b/Dnn.AdminExperience/ClientSide/Servers.Web/src/reducers/serversTabReducer.js
@@ -1,29 +1,29 @@
 import { serversTab as ActionTypes } from "../constants/actionTypes";
 
 export default function serversTabReducer(
-  state = {
-    servers: [],
-    errorMessage: "",
-  },
-  action
-) {
-  switch (action.type) {
-    case ActionTypes.LOAD_SERVERS:
-      return { ...state, servers: [], errorMessage: "" };
-    case ActionTypes.LOADED_SERVERS:
-      return { ...state, servers: action.payload.servers, errorMessage: "" };
-    case ActionTypes.ERROR_LOADING_SERVERS:
-      return {
-        ...state,
+    state = {
         servers: [],
-        errorMessage: action.payload.errorMessage,
-      };
-    case ActionTypes.ERROR_DELETING_SERVER:
-      return {
-        ...state,
-        errorMessage: action.payload.errorMessage,
-      };
-    default:
-      return state;
-  }
+        errorMessage: "",
+    },
+    action
+) {
+    switch (action.type) {
+        case ActionTypes.LOAD_SERVERS:
+            return { ...state, servers: [], errorMessage: "" };
+        case ActionTypes.LOADED_SERVERS:
+            return { ...state, servers: action.payload.servers, errorMessage: "" };
+        case ActionTypes.ERROR_LOADING_SERVERS:
+            return {
+                ...state,
+                servers: [],
+                errorMessage: action.payload.errorMessage,
+            };
+        case ActionTypes.ERROR_DELETING_SERVER:
+            return {
+                ...state,
+                errorMessage: action.payload.errorMessage,
+            };
+        default:
+            return state;
+    }
 }
diff --git a/Dnn.AdminExperience/ClientSide/Servers.Web/src/reducers/smtpServerTabReducer.js b/Dnn.AdminExperience/ClientSide/Servers.Web/src/reducers/smtpServerTabReducer.js
index 7f1fb8006cd..661407cc057 100644
--- a/Dnn.AdminExperience/ClientSide/Servers.Web/src/reducers/smtpServerTabReducer.js
+++ b/Dnn.AdminExperience/ClientSide/Servers.Web/src/reducers/smtpServerTabReducer.js
@@ -130,7 +130,7 @@ export default function smtpServerTabReducer(state = {
             const providerChanged = action.payload.providerChanged;
             const smtpServerInfo = {...state.smtpServerInfo};
 
-            if(success === false){
+            if (success === false) {
                 return { ...state,
                     errorMessage: errors.join("<br />"),
                     infoMessage: ""
diff --git a/Dnn.AdminExperience/ClientSide/SiteGroups.Web/src/components/Editor.jsx b/Dnn.AdminExperience/ClientSide/SiteGroups.Web/src/components/Editor.jsx
index 73ce6351ee6..2c7a63a1430 100644
--- a/Dnn.AdminExperience/ClientSide/SiteGroups.Web/src/components/Editor.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteGroups.Web/src/components/Editor.jsx
@@ -95,13 +95,13 @@ export default class SiteGroupEditor extends React.Component {
                 <div className="buttons-box">
                     {!this.props.isNew && (
                         <Button
-                            type="secondary"
+                            type="danger"
                             onClick={() => this.props.onDeleteGroup(this.props.group)}
                         >
                             {Resx.get("Delete.Button")}
                         </Button>
                     )}
-                    <Button type="secondary" onClick={() => this.props.onCancel()}>
+                    <Button type="neutral" onClick={() => this.props.onCancel()}>
                         {Resx.get("Cancel.Button")}
                     </Button>
                     <Button type="primary" onClick={() => this.props.onSave()}>
diff --git a/Dnn.AdminExperience/ClientSide/SiteImportExport.Web/src/components/Dashboard/JobDetails/index.jsx b/Dnn.AdminExperience/ClientSide/SiteImportExport.Web/src/components/Dashboard/JobDetails/index.jsx
index bb51ee5a66b..d19e1ade6d4 100644
--- a/Dnn.AdminExperience/ClientSide/SiteImportExport.Web/src/components/Dashboard/JobDetails/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteImportExport.Web/src/components/Dashboard/JobDetails/index.jsx
@@ -306,12 +306,12 @@ class JobDetails extends Component {
                         </div>
                         <GridCell className="action-buttons">
                             {props.jobDetail.Status < 2 && !state.cancelled &&
-                                <Button type="secondary" onClick={this.cancel.bind(this, props.jobId)}>
+                                <Button type="neutral" onClick={this.cancel.bind(this, props.jobId)}>
                                     {props.jobDetail.JobType.indexOf("Export") >= 0 ? Localization.get("CancelExport") : Localization.get("CancelImport")}
                                 </Button>
                             }
                             {(props.jobDetail.Status > 1 || state.cancelled) &&
-                                <Button type="secondary" onClick={this.delete.bind(this, props.jobId)}>{Localization.get("Delete")}</Button>
+                                <Button type="danger" onClick={this.delete.bind(this, props.jobId)}>{Localization.get("Delete")}</Button>
                             }
                         </GridCell>
                     </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/SiteImportExport.Web/src/components/ExportModal/index.jsx b/Dnn.AdminExperience/ClientSide/SiteImportExport.Web/src/components/ExportModal/index.jsx
index 57d28c2423b..d388170157a 100644
--- a/Dnn.AdminExperience/ClientSide/SiteImportExport.Web/src/components/ExportModal/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteImportExport.Web/src/components/ExportModal/index.jsx
@@ -481,7 +481,7 @@ class ExportModal extends Component {
                         </div>
                     </GridSystem>
                     <GridCell className="action-buttons">
-                        <Button type="secondary" onClick={this.cancelExport.bind(this)}>{Localization.get("Cancel")}</Button>
+                        <Button type="neutral" onClick={this.cancelExport.bind(this)}>{Localization.get("Cancel")}</Button>
                         <Button type="primary"
                             disabled={state.requestSubmitting}
                             onClick={this.onExport.bind(this)}>
diff --git a/Dnn.AdminExperience/ClientSide/SiteImportExport.Web/src/components/ImportModal/index.jsx b/Dnn.AdminExperience/ClientSide/SiteImportExport.Web/src/components/ImportModal/index.jsx
index 9e9506685a2..743df83d49b 100644
--- a/Dnn.AdminExperience/ClientSide/SiteImportExport.Web/src/components/ImportModal/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteImportExport.Web/src/components/ImportModal/index.jsx
@@ -277,7 +277,7 @@ class ImportModal extends Component {
                     }
                 </div>
                 <GridCell className="action-buttons">
-                    <Button type="secondary" onClick={this.cancelImport.bind(this)}>{Localization.get("Cancel")}</Button>
+                    <Button type="neutral" onClick={this.cancelImport.bind(this)}>{Localization.get("Cancel")}</Button>
                     {props.wizardStep === 0 &&
                         <Button type="primary"
                             disabled={props.selectedPackage ? false : true}
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/basicSearchSettings/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/basicSearchSettings/index.jsx
index 379f1adf422..d8eab622569 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/basicSearchSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/basicSearchSettings/index.jsx
@@ -485,7 +485,7 @@ class BasicSearchSettingsPanelBody extends Component {
                         <div className="buttons-box">
                             <Button
                                 disabled={!this.props.basicSearchSettingsClientModified}
-                                type="secondary"
+                                type="neutral"
                                 onClick={this.onCancel.bind(this)}>
                                 {resx.get("Cancel")}
                             </Button>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/basicSettings/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/basicSettings/index.jsx
index cfc733350ac..dba9e949329 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/basicSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/basicSettings/index.jsx
@@ -357,7 +357,7 @@ class BasicSettingsPanelBody extends Component {
                     {canEdit && <div className="buttons-box">
                         <Button
                             disabled={!this.props.clientModified}
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this) }>
                             {resx.get("Cancel") }
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/defaultPagesSettings/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/defaultPagesSettings/index.jsx
index 9be81c40c8b..9c483fbdeff 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/defaultPagesSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/defaultPagesSettings/index.jsx
@@ -369,7 +369,7 @@ class DefaultPagesSettingsPanelBody extends Component {
                     <div className="buttons-box">
                         <Button
                             disabled={!this.props.defaultPagesSettingsClientModified}
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/editLanguagePanel/languageInfoView.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/editLanguagePanel/languageInfoView.jsx
index f7e120b138c..1243b1ead4f 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/editLanguagePanel/languageInfoView.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/editLanguagePanel/languageInfoView.jsx
@@ -53,7 +53,7 @@ class LanguageInfoView extends Component {
                             value={highlightPendingTranslations} onChange={onHighlightPendingTranslations} />
                     </GridCell>
                     <GridCell columnSize={50} className="translation-action-buttons">
-                        <Button type="secondary" onClick={onCancel}>
+                        <Button type="neutral" onClick={onCancel}>
                             <TextOverflowWrapper text={resx.get("Cancel") } maxWidth={100}/>
                         </Button>
                         <Button type="primary" onClick={onSaveTranslations} disabled={!resxBeingEdited}>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/editLanguagePanel/resourceEditor/fullEditor.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/editLanguagePanel/resourceEditor/fullEditor.jsx
index d1f84ae3ca5..84cf369cd46 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/editLanguagePanel/resourceEditor/fullEditor.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/editLanguagePanel/resourceEditor/fullEditor.jsx
@@ -86,7 +86,7 @@ class FullEditor extends Component {
 
     renderButtons() {
         return [
-            <Button type="secondary" onClick={this.onCancel.bind(this)} key="first">
+            <Button type="neutral" onClick={this.onCancel.bind(this)} key="first">
                 <TextOverflowWrapper text={resx.get("Cancel") } maxWidth={100} />
             </Button>,
             <Button type="primary" onClick={this.onSave.bind(this)} key="second">
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/ignoreWords/ignoreWordsEditor/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/ignoreWords/ignoreWordsEditor/index.jsx
index 694252e354e..c08d11c2d54 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/ignoreWords/ignoreWordsEditor/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/ignoreWords/ignoreWordsEditor/index.jsx
@@ -100,7 +100,7 @@ class IgnoreWordsEditor extends Component {
                     </InputGroup>
                     <div className="editor-buttons-box">
                         <Button
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>                        
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/index.jsx
index b472adde03d..d3296437417 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/index.jsx
@@ -326,7 +326,7 @@ class LanguageSettingsPanelBody extends Component {
                     <div className={this.isHost() ? "buttons-box-alter" : "buttons-box"}>
                         <Button
                             disabled={!this.props.languageSettingsClientModified}
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/languagePack/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/languagePack/index.jsx
index 4fc03e7e78c..41debdad1ba 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/languagePack/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/languagePack/index.jsx
@@ -255,7 +255,7 @@ class LanguagePackPanelBody extends Component {
                         }
                         <div className="buttons-box">
                             <Button
-                                type="secondary"
+                                type="neutral"
                                 onClick={props.closeLanguagePack.bind(this)}>
                                 {resx.get("Cancel")}
                             </Button>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/languages/languageEditor/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/languages/languageEditor/index.jsx
index eb6a6dec094..84a370bdd55 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/languages/languageEditor/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/languages/languageEditor/index.jsx
@@ -272,7 +272,7 @@ class LanguageEditor extends Component {
                 <GridSystem numberOfColumns={2}>{[columnOne, columnTwo]}</GridSystem>
                 <div className="editor-buttons-box">
                     <Button
-                        type="secondary"
+                        type="neutral"
                         onClick={this.onCancel.bind(this)}>
                         {resx.get("Cancel")}
                     </Button>
@@ -334,7 +334,7 @@ class LanguageEditor extends Component {
                 <GridSystem numberOfColumns={2}>{[columnOne, columnTwo]}</GridSystem>
                 <div className="editor-buttons-box">
                     <Button
-                        type="secondary"
+                        type="neutral"
                         onClick={this.onCancel.bind(this)}>
                         {resx.get("Cancel")}
                     </Button>
@@ -359,7 +359,7 @@ class LanguageEditor extends Component {
                 }
                 <div className="editor-buttons-box-roles">
                     <Button
-                        type="secondary"
+                        type="neutral"
                         onClick={this.onCancel.bind(this)}>
                         {resx.get("Cancel")}
                     </Button>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/localizedContent/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/localizedContent/index.jsx
index 348f58c3ac8..02d68775016 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/localizedContent/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/languageSettings/localizedContent/index.jsx
@@ -122,7 +122,7 @@ class LocalizedContent extends Component {
 
                     {!state.showProgressBars && <div className="buttons-box">
                         <Button
-                            type="secondary"
+                            type="neutral"
                             onClick={props.closePersonaBarPage.bind(this) }>
                             {resx.get("Cancel") }
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/messagingSettings/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/messagingSettings/index.jsx
index 0fb86144d0d..300aad2aba5 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/messagingSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/messagingSettings/index.jsx
@@ -236,7 +236,7 @@ class MessagingSettingsPanelBody extends Component {
                     <div className="buttons-box">
                         <Button
                             disabled={!this.props.messagingSettingsClientModified}
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/moreSettings/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/moreSettings/index.jsx
index 7f5a09f9760..784a1590d14 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/moreSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/moreSettings/index.jsx
@@ -505,7 +505,7 @@ class MoreSettingsPanelBody extends Component {
                     }
                     <div className="buttons-box">
                         <Button
-                            type="secondary"
+                            type="neutral"
                             disabled={!this.getOverallFormDirty()}
                             onClick={this.onCancel.bind(this)}
                         >
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/privacySettings/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/privacySettings/index.jsx
index bbe099de4f0..fcfb91358c7 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/privacySettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/privacySettings/index.jsx
@@ -382,7 +382,7 @@ class PrivacySettingsPanelBody extends Component {
                 <div className="buttons-box">
                     <Button
                         disabled={!props.privacySettingsClientModified}
-                        type="secondary"
+                        type="neutral"
                         onClick={this.onCancel.bind(this)}
                     >
                         {resx.get("Cancel")}
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/profileSettings/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/profileSettings/index.jsx
index fba8d46ae50..a2dd7ba2ee2 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/profileSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/profileSettings/index.jsx
@@ -165,7 +165,7 @@ class ProfileSettingsPanelBody extends Component {
                     <div className="buttons-box">
                         <Button
                             disabled={!this.props.profileSettingsClientModified}
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/profileSettings/profileProperties/profilePropertyEditor/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/profileSettings/profileProperties/profilePropertyEditor/index.jsx
index ef785db8c9a..b4af790e5f9 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/profileSettings/profileProperties/profilePropertyEditor/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/profileSettings/profileProperties/profilePropertyEditor/index.jsx
@@ -649,7 +649,7 @@ class ProfilePropertyEditor extends Component {
                         <GridSystem numberOfColumns={2}>{[columnOne, columnTwo]}</GridSystem>
                         <div className="editor-buttons-box">
                             <Button
-                                type="secondary"
+                                type="neutral"
                                 onClick={this.onCancel.bind(this)}>
                                 {resx.get("Cancel")}
                             </Button>
@@ -669,7 +669,7 @@ class ProfilePropertyEditor extends Component {
                             />
                             <div className="editor-buttons-box">
                                 <Button
-                                    type="secondary"
+                                    type="neutral"
                                     onClick={this.onCancel.bind(this)}>
                                     {resx.get("Cancel")}
                                 </Button>
@@ -697,7 +697,7 @@ class ProfilePropertyEditor extends Component {
                             <GridSystem numberOfColumns={2}>{[columnThree, columnFour]}</GridSystem>
                             <div className="editor-buttons-box">
                                 <Button
-                                    type="secondary"
+                                    type="neutral"
                                     onClick={this.onCancel.bind(this)}>
                                     {resx.get("Cancel")}
                                 </Button>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/profileSettings/profileProperties/profilePropertyEditor/listEntries/listEntryEditor/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/profileSettings/profileProperties/profilePropertyEditor/listEntries/listEntryEditor/index.jsx
index c061207d3da..beeb99d4d48 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/profileSettings/profileProperties/profilePropertyEditor/listEntries/listEntryEditor/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/profileSettings/profileProperties/profilePropertyEditor/listEntries/listEntryEditor/index.jsx
@@ -110,7 +110,7 @@ class ListEntryEditor extends Component {
                     <GridSystem numberOfColumns={2}>{[columnOne, columnTwo]}</GridSystem>
                     <div className="editor-buttons-box">
                         <Button
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/siteAliasSettings/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/siteAliasSettings/index.jsx
index c6de29d82d2..0a0781361fc 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/siteAliasSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/siteAliasSettings/index.jsx
@@ -138,7 +138,7 @@ class SiteAliasSettingsPanelBody extends Component {
                     <div className="buttons-box">
                         <Button
                             disabled={!this.props.urlMappingSettingsClientModified}
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/siteAliasSettings/siteAliases/siteAliasEditor/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/siteAliasSettings/siteAliases/siteAliasEditor/index.jsx
index 754373e1627..16751d39e63 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/siteAliasSettings/siteAliases/siteAliasEditor/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/siteAliasSettings/siteAliases/siteAliasEditor/index.jsx
@@ -215,7 +215,7 @@ class SiteAliasEditor extends Component {
                     <GridSystem numberOfColumns={2}>{[columnOne, columnTwo]}</GridSystem>
                     <div className="editor-buttons-box">
                         <Button
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/synonymsGroups/synonymsGroupEditor/index.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/synonymsGroups/synonymsGroupEditor/index.jsx
index b269b2e65d9..0d59a3d98be 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/synonymsGroups/synonymsGroupEditor/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/synonymsGroups/synonymsGroupEditor/index.jsx
@@ -100,7 +100,7 @@ class SynonymsGroupEditor extends Component {
                     </InputGroup>
                     <div className="editor-buttons-box">
                         <Button
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>                        
diff --git a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/translatePageContent/translatePageContent.jsx b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/translatePageContent/translatePageContent.jsx
index 15c4f477637..96c5a1941ee 100644
--- a/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/translatePageContent/translatePageContent.jsx
+++ b/Dnn.AdminExperience/ClientSide/SiteSettings.Web/src/components/translatePageContent/translatePageContent.jsx
@@ -245,7 +245,7 @@ class TranslatePageContent extends Component {
                         </Button>
                         <Button
                             disabled={!isEnabled || !localizablePages}
-                            type="secondary"
+                            type="danger"
                             onClick={this.onEraseAllLocalizedPages.bind(this) }>
                             <TextOverflowWrapper text={resx.get("EraseAllLocalizedPages") } maxWidth={150}/>
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Sites.Web/src/_exportables/src/Components/ExportPortal/index.jsx b/Dnn.AdminExperience/ClientSide/Sites.Web/src/_exportables/src/Components/ExportPortal/index.jsx
index c8b37b46534..47d11801a66 100644
--- a/Dnn.AdminExperience/ClientSide/Sites.Web/src/_exportables/src/Components/ExportPortal/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Sites.Web/src/_exportables/src/Components/ExportPortal/index.jsx
@@ -384,7 +384,7 @@ class ExportPortal extends Component {
                                 )}
                             </GridSystem>
                             <GridCell className="site-action-buttons">
-                                <Button type="secondary" onClick={props.onCancel.bind(this)}>
+                                <Button type="neutral" onClick={props.onCancel.bind(this)}>
                                     {Localization.get("cmdCancel")}
                                 </Button>
                                 <Button type="primary" onClick={this.onExportPortal.bind(this)}>
diff --git a/Dnn.AdminExperience/ClientSide/Sites.Web/src/components/CreatePortal/index.jsx b/Dnn.AdminExperience/ClientSide/Sites.Web/src/components/CreatePortal/index.jsx
index 3c8ad4f1944..a7bbc409f05 100644
--- a/Dnn.AdminExperience/ClientSide/Sites.Web/src/components/CreatePortal/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Sites.Web/src/components/CreatePortal/index.jsx
@@ -396,7 +396,7 @@ class CreatePortal extends Component {
                             </Collapse>
                         </GridCell>
                         <GridCell className="site-action-buttons">
-                            <Button type="secondary" onClick={this.onCancel.bind(this)}>{Localization.get("cmdCancel")}</Button>
+                            <Button type="neutral" onClick={this.onCancel.bind(this)}>{Localization.get("cmdCancel")}</Button>
                             <Button type="primary" disabled={this.state.creatingPortal} onClick={this.createPortal.bind(this)}>{Localization.get("cmdCreateSite")}</Button>
                         </GridCell>
                     </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/.editorconfig b/Dnn.AdminExperience/ClientSide/Styles.Web/.editorconfig
new file mode 100644
index 00000000000..f1cc3ad329c
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/.editorconfig
@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/.gitignore b/Dnn.AdminExperience/ClientSide/Styles.Web/.gitignore
new file mode 100644
index 00000000000..bc332ed44d7
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/.gitignore
@@ -0,0 +1,25 @@
+dist/
+www/
+loader/
+
+*~
+*.sw[mnpcod]
+*.log
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/.prettierrc.json b/Dnn.AdminExperience/ClientSide/Styles.Web/.prettierrc.json
new file mode 100644
index 00000000000..7ca3a28a9ce
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/.prettierrc.json
@@ -0,0 +1,13 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "consistent",
+  "printWidth": 180,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/clean-and-copy.js b/Dnn.AdminExperience/ClientSide/Styles.Web/clean-and-copy.js
new file mode 100644
index 00000000000..a5a981fe2c8
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/clean-and-copy.js
@@ -0,0 +1,18 @@
+const { emptyDirSync, copySync } = require('fs-extra');
+const path = require('path');
+
+// Paths
+const src = path.resolve(__dirname, 'dist');
+const dest = path.resolve(__dirname, '../../Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Styles/scripts/dist');
+
+try {
+  console.log(`Cleaning destination directory: ${dest}`);
+  emptyDirSync(dest); // Clean the destination directory
+
+  console.log(`Copying files from ${src} to ${dest}...`);
+  copySync(src, dest); // Copy the files
+  console.log('Clean and copy operation completed successfully!');
+} catch (error) {
+  console.error('Error during clean and copy operation:', error);
+  process.exit(1); // Exit with error code
+}
\ No newline at end of file
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/package.json b/Dnn.AdminExperience/ClientSide/Styles.Web/package.json
new file mode 100644
index 00000000000..181a85e2ff6
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "styles",
+  "version": "10.0.0",
+  "private": true,
+  "description": "Allows managing DNN css variables for styles",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.js",
+  "es2017": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/third-party-elements/third-party-elements.esm.js",
+  "files": [
+    "dist/",
+    "loader/"
+  ],
+  "license": "MIT",
+  "resolutions": {
+    "@timkendrick/monaco-editor": "external"
+  },
+  "scripts": {
+    "build": "stencil build --docs && node clean-and-copy.js",
+    "watch": "stencil build --config stencil.dnn.config.ts --watch",
+    "start": "stencil build --dev --watch --serve",
+    "generate": "stencil generate"
+  },
+  "dependencies": {
+    "@stencil/core": "^4.22.2"
+  },
+  "devDependencies": {
+    "@dnncommunity/dnn-elements": "^0.24.1",
+    "@stencil/sass": "^3.0.12",
+    "@types/node": "^22.9.0"
+  }
+}
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/src/clients/styles-client.ts b/Dnn.AdminExperience/ClientSide/Styles.Web/src/clients/styles-client.ts
new file mode 100644
index 00000000000..27e822ec18b
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/src/clients/styles-client.ts
@@ -0,0 +1,165 @@
+import { IInitStylesConfig, INotifyOptions } from "../window.dnn";
+
+export default class StylesClient {
+    private serviceRoot: string;
+    private headers: Headers;
+    private config: IInitStylesConfig;
+    private isHost: boolean = false;
+
+    constructor() {
+        const dnnStyles = window.dnn as unknown as IDnnWrapper;
+        this.config = dnnStyles.initStyles();
+        if (!this.config) {
+            throw new Error("dnn.initStyles() is not defined.");
+        }
+        if (!this.config.utility) {
+            throw new Error("dnn.initStyles().utility is not defined.");
+        }
+
+        const sf = this.config.utility.sf;
+        sf.moduleRoot = "PersonaBar";
+        this.serviceRoot = sf.getServiceRoot();
+        this.serviceRoot += "Styles/";
+
+        const headers = new Headers();
+        headers.append("RequestVerificationToken", sf.antiForgeryToken);
+        headers.append("Content-Type", "application/json");
+
+        this.headers = headers;
+
+        this.isHost = this.config?.params?.settings?.isHost ?? false;
+    }
+
+    public get isHostUser(): boolean {
+        return this.isHost;
+    }
+
+    getStyles(){
+        return new Promise<IPortalStyles>((resolve, reject) => {
+            fetch(`${this.serviceRoot}GetStyles`, {
+                method: "GET",
+            })
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error(response.statusText);
+                }
+                return response.json();
+            })
+            .then((response) => {
+                resolve(response);
+            })
+            .catch((error) => {
+                reject(error);
+            });
+        });
+    }
+
+    saveStyles(styles: IPortalStyles){
+        return new Promise<void>((resolve, reject) => {
+            fetch(`${this.serviceRoot}SaveStyles`, {
+                method: "POST",
+                headers: this.headers,
+                body: JSON.stringify(styles),
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(response.statusText);
+                }
+                resolve();
+            })
+            .catch((error) => {
+                reject(error);
+            });
+        });
+    }
+
+    restoreStyles(){
+        return new Promise<IPortalStyles>((resolve, reject) => {
+            fetch(`${this.serviceRoot}RestoreStyles`, {
+                method: "POST",
+                headers: this.headers,
+            })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(response.statusText);
+                }
+                return response.json();
+            })
+            .then((response) => {
+                resolve(response);
+            })
+            .catch((error) => {
+                reject(error);
+            });
+        });
+    }
+
+    notify(message: string, options?: INotifyOptions){
+        this.config.utility.notify(message, options);
+    }
+
+    notifyError(message: string, options?: INotifyOptions){
+        if (options == undefined) {
+            options = {
+                clickToClose: true,
+            };
+        }
+
+        if (options.clickToClose == undefined) {
+            options.clickToClose = true;
+        }
+
+        this.config.utility.notifyError(message, options);
+    }
+}
+export interface IPortalStyles {
+    AllowAdminEdits: boolean;
+    ColorPrimary: string;
+    ColorPrimaryLight: string;
+    ColorPrimaryDark: string;
+    ColorPrimaryContrast: string;
+    ColorSecondary: string;
+    ColorSecondaryLight: string;
+    ColorSecondaryDark: string;
+    ColorSecondaryContrast: string;
+    ColorTertiary: string;
+    ColorTertiaryLight: string;
+    ColorTertiaryDark: string;
+    ColorTertiaryContrast: string;
+    ColorNeutral: string;
+    ColorNeutralLight: string;
+    ColorNeutralDark: string;
+    ColorNeutralContrast: string;
+    ColorBackground: string;
+    ColorBackgroundLight: string;
+    ColorBackgroundDark: string;
+    ColorBackgroundContrast: string;
+    ColorForeground: string;
+    ColorForegroundLight: string;
+    ColorForegroundDark: string;
+    ColorForegroundContrast: string;
+    ColorSurface: string;
+    ColorSurfaceLight: string;
+    ColorSurfaceDark: string;
+    ColorSurfaceContrast: string;
+    ColorInfo: string;
+    ColorInfoLight: string;
+    ColorInfoDark: string;
+    ColorInfoContrast: string;
+    ColorSuccess: string;
+    ColorSuccessLight: string;
+    ColorSuccessDark: string;
+    ColorSuccessContrast: string;
+    ColorWarning: string;
+    ColorWarningLight: string;
+    ColorWarningDark: string;
+    ColorWarningContrast: string;
+    ColorDanger: string;
+    ColorDangerLight: string;
+    ColorDangerDark: string;
+    ColorDangerContrast: string;
+    ControlsRadius: number;
+    ControlsPadding: number;
+    BaseFontSize: number;
+    VariationOpacity: number;
+}
\ No newline at end of file
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/src/components.d.ts b/Dnn.AdminExperience/ClientSide/Styles.Web/src/components.d.ts
new file mode 100644
index 00000000000..c242843ae3c
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/src/components.d.ts
@@ -0,0 +1,37 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
+export namespace Components {
+    interface DnnStylesModule {
+    }
+}
+declare global {
+    interface HTMLDnnStylesModuleElement extends Components.DnnStylesModule, HTMLStencilElement {
+    }
+    var HTMLDnnStylesModuleElement: {
+        prototype: HTMLDnnStylesModuleElement;
+        new (): HTMLDnnStylesModuleElement;
+    };
+    interface HTMLElementTagNameMap {
+        "dnn-styles-module": HTMLDnnStylesModuleElement;
+    }
+}
+declare namespace LocalJSX {
+    interface DnnStylesModule {
+    }
+    interface IntrinsicElements {
+        "dnn-styles-module": DnnStylesModule;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "dnn-styles-module": LocalJSX.DnnStylesModule & JSXBase.HTMLAttributes<HTMLDnnStylesModuleElement>;
+        }
+    }
+}
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/color-names.ts b/Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/color-names.ts
new file mode 100644
index 00000000000..3dce656892f
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/color-names.ts
@@ -0,0 +1,14 @@
+type ColorNames =
+    "Background" |
+    "Foreground" |
+    "Neutral" |
+    "Surface" |
+    "Info" |
+    "Success" |
+    "Warning" |
+    "Danger" |
+    "Primary" |
+    "Secondary" |
+    "Tertiary";
+
+export default ColorNames;
\ No newline at end of file
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/dnn-styles-module.scss b/Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/dnn-styles-module.scss
new file mode 100644
index 00000000000..c3471a89c48
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/dnn-styles-module.scss
@@ -0,0 +1,47 @@
+:host {
+  display: block;
+  --columns: 1;
+}
+
+:host(.medium),
+:host(.large) {
+  --columns: 3;
+}
+
+p {
+  margin-top: 0;
+}
+
+h3 {
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  border-bottom: 2px solid #666;
+}
+
+.sections {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(var(--columns), 1fr);
+  .section {
+    display: flex;
+    flex-direction: column;
+    dnn-color-input{
+      height: 6rem;
+    }
+  }
+}
+
+.permissions-section{
+  label{
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}
+
+.controls {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1rem;
+}
\ No newline at end of file
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/dnn-styles-module.tsx b/Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/dnn-styles-module.tsx
new file mode 100644
index 00000000000..ca088a9adbb
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/dnn-styles-module.tsx
@@ -0,0 +1,344 @@
+import { Component, Host, h, State, Element } from '@stencil/core';
+import { IStylesResx } from '../../window.dnn';
+import StylesClient, { IPortalStyles } from '../../clients/styles-client';
+import { DnnColorInfo } from '@dnncommunity/dnn-elements/dist/types/components';
+import ColorNames from './color-names';
+@Component({
+  tag: 'dnn-styles-module',
+  styleUrl: 'dnn-styles-module.scss',
+  shadow: true,
+})
+export class DnnStylesModule {
+  @State() resx: IStylesResx;
+  @State() originalStyles: IPortalStyles;
+  @State() styles: IPortalStyles;
+  @State() isHost: boolean = false;
+
+  @Element() el!: HTMLDnnStylesModuleElement;
+
+  private stylesClient: StylesClient;
+  private resizeObserver: ResizeObserver;
+  private componentWidth: number;
+
+  constructor() {
+    this.stylesClient = new StylesClient();
+  }
+
+  connectedCallback() {
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        const newWidth = entry.contentRect.width;
+        if (this.componentWidth == newWidth) {
+          return;
+        }
+        this.componentWidth = newWidth;
+        this.el.classList.remove("small", "medium", "large");
+        if (newWidth < 576) {
+          this.el.classList.add("small");
+        } else if (newWidth < 992) {
+          this.el.classList.add("medium");
+        } else {
+          this.el.classList.add("large");
+        }
+      }
+    });
+    this.resizeObserver.observe(this.el);
+  }
+
+  disconnectedCallback() {
+    this.resizeObserver.unobserve(this.el);
+  }
+
+  componentWillLoad() {
+    var dnnStyles = window.dnn as unknown as IDnnWrapper;
+    this.resx = dnnStyles.initStyles().utility?.resx?.Styles as IStylesResx;
+    const header = document.querySelector("#dnnStylesHeader h3");
+    if (header) {
+      header.textContent = this.resx.nav_Styles;
+    }
+    this.stylesClient.getStyles()
+      .then(response => {
+        this.originalStyles = response;
+        this.styles = {...this.originalStyles};
+      })
+      .catch(error => {
+        alert(this.resx?.GetStylesError);
+        console.error(error);
+      });
+    this.isHost = this.stylesClient.isHostUser;
+  }
+
+  private handleColorChange(colorName: ColorNames, detail: DnnColorInfo): void {
+    this.styles = {
+      ...this.styles,
+      [`Color${colorName}`]: detail.color,
+      [`Color${colorName}Contrast`]: detail.contrastColor,
+      [`Color${colorName}Light`]: detail.lightColor,
+      [`Color${colorName}Dark`]: detail.darkColor,
+    }
+  }
+
+  private handleSave(): void {
+    this.stylesClient.saveStyles(this.styles)
+      .then(() => {
+        this.originalStyles = this.styles;
+        this.stylesClient.notify(this.resx?.SaveSuccess);
+      })
+      .catch(error => {
+        this.stylesClient.notifyError(this.resx?.SaveError);
+        console.error(error);
+      });
+  }
+
+  private handleRestoreDefault(): void {
+    this.stylesClient.restoreStyles()
+    .then(response => {
+      this.originalStyles = response;
+      this.styles = {...this.originalStyles};
+    })
+    .catch(error => {
+      this.stylesClient.notifyError(this.resx?.SaveError);
+      console.error(error);
+    });
+  }
+
+  render() {
+    return (
+      <Host>
+        <form>
+          <p>{this.resx?.ModuleDescription}</p>
+          {this.styles && this.resx &&
+            <div class="sections">
+              <div class="section">
+                <h3>{this.resx?.GeneralColors}</h3>
+                <dnn-color-input
+                  label={this.resx?.BackgroundColor}
+                  helpText={this.resx?.BackgroundColorHelp}
+                  color={this.styles?.ColorBackground}
+                  contrastColor={this.styles?.ColorBackgroundContrast}
+                  lightColor={this.styles?.ColorBackgroundLight}
+                  darkColor={this.styles?.ColorBackgroundDark}
+                  useContrastColor
+                  useLightColor
+                  useDarkColor
+                  onColorChange={e => this.handleColorChange("Background", e.detail)}
+                />
+                <dnn-color-input
+                  label={this.resx?.ForegroundColor}
+                  helpText={this.resx?.ForegroundColorHelp}
+                  color={this.styles?.ColorForeground}
+                  contrastColor={this.styles?.ColorForegroundContrast}
+                  lightColor={this.styles?.ColorForegroundLight}
+                  darkColor={this.styles?.ColorForegroundDark}
+                  useContrastColor
+                  useLightColor
+                  useDarkColor
+                  onColorChange={e => this.handleColorChange("Foreground", e.detail)}
+                />
+                <dnn-color-input
+                  label={this.resx?.NeutralColor}
+                  helpText={this.resx?.NeutralColorHelp}
+                  color={this.styles?.ColorNeutral}
+                  contrastColor={this.styles?.ColorNeutralContrast}
+                  lightColor={this.styles?.ColorNeutralLight}
+                  darkColor={this.styles?.ColorNeutralDark}
+                  useContrastColor
+                  useLightColor
+                  useDarkColor
+                  onColorChange={e => this.handleColorChange("Neutral", e.detail)}
+                />
+                <dnn-color-input
+                  label={this.resx?.SurfaceColor}
+                  helpText={this.resx.SurfaceColorHelp}
+                  color={this.styles?.ColorSurface}
+                  contrastColor={this.styles?.ColorSurfaceContrast}
+                  lightColor={this.styles?.ColorSurfaceLight}
+                  darkColor={this.styles?.ColorSurfaceDark}
+                  useContrastColor
+                  useLightColor
+                  useDarkColor
+                  onColorChange={e => this.handleColorChange("Surface", e.detail)}
+                />
+              </div>
+              <div class="section">
+                <h3>{this.resx?.ActionColors}</h3>
+                <dnn-color-input
+                  label={this.resx?.InformationColor}
+                  helpText={this.resx?.InformationColorHelp}
+                  color={this.styles?.ColorInfo}
+                  contrastColor={this.styles?.ColorInfoContrast}
+                  lightColor={this.styles?.ColorInfoLight}
+                  darkColor={this.styles?.ColorInfoDark}
+                  useContrastColor
+                  useLightColor
+                  useDarkColor
+                  onColorChange={e => this.handleColorChange("Info", e.detail)}
+                />
+                <dnn-color-input
+                  label={this.resx?.SuccessColor}
+                  helpText={this.resx?.SuccessColorHelp}
+                  color={this.styles?.ColorSuccess}
+                  contrastColor={this.styles?.ColorSuccessContrast}
+                  lightColor={this.styles?.ColorSuccessLight}
+                  darkColor={this.styles?.ColorSuccessDark}
+                  useContrastColor
+                  useLightColor
+                  useDarkColor
+                  onColorChange={e => this.handleColorChange("Success", e.detail)}
+                />
+                <dnn-color-input
+                  label={this.resx?.WarningColor}
+                  helpText={this.resx?.WarningColorHelp}
+                  color={this.styles?.ColorWarning}
+                  contrastColor={this.styles?.ColorWarningContrast}
+                  lightColor={this.styles?.ColorWarningLight}
+                  darkColor={this.styles?.ColorWarningDark}
+                  useContrastColor
+                  useLightColor
+                  useDarkColor
+                  onColorChange={e => this.handleColorChange("Warning", e.detail)}
+                />
+                <dnn-color-input
+                  label={this.resx?.DangerColor}
+                  helpText={this.resx?.DangerColorHelp}
+                  color={this.styles?.ColorDanger}
+                  contrastColor={this.styles?.ColorDangerContrast}
+                  lightColor={this.styles?.ColorDangerLight}
+                  darkColor={this.styles?.ColorDangerDark}
+                  useContrastColor
+                  useLightColor
+                  useDarkColor
+                  onColorChange={e => this.handleColorChange("Danger", e.detail)}
+                />
+              </div>
+              <div class="section">
+                <h3>{this.resx?.BrandColors}</h3>
+                <dnn-color-input
+                  label={this.resx?.PrimaryColor}
+                  helpText={this.resx?.PrimaryColorHelp}
+                  color={this.styles?.ColorPrimary}
+                  contrastColor={this.styles?.ColorPrimaryContrast}
+                  lightColor={this.styles?.ColorPrimaryLight}
+                  darkColor={this.styles?.ColorPrimaryDark}
+                  useContrastColor
+                  useLightColor
+                  useDarkColor
+                  onColorChange={e => this.handleColorChange("Primary", e.detail)}
+                />
+                <dnn-color-input
+                  label={this.resx?.SecondaryColor}
+                  helpText={this.resx?.PrimaryColorHelp}
+                  color={this.styles?.ColorSecondary}
+                  contrastColor={this.styles?.ColorSecondaryContrast}
+                  lightColor={this.styles?.ColorSecondaryLight}
+                  darkColor={this.styles?.ColorSecondaryDark}
+                  useContrastColor
+                  useLightColor
+                  useDarkColor
+                  onColorChange={e => this.handleColorChange("Secondary", e.detail)}
+                />
+                <dnn-color-input
+                  label={this.resx?.TertiaryColor}
+                  helpText={this.resx?.TertiaryColorHelp}
+                  color={this.styles?.ColorTertiary}
+                  contrastColor={this.styles?.ColorTertiaryContrast}
+                  lightColor={this.styles?.ColorTertiaryLight}
+                  darkColor={this.styles?.ColorTertiaryDark}
+                  useContrastColor
+                  useLightColor
+                  useDarkColor
+                  onColorChange={e => this.handleColorChange("Tertiary", e.detail)}
+                />
+              </div>
+              <div class="section">
+                <h3>{this.resx?.Controls}</h3>
+                <dnn-input
+                  type="number"
+                  min={0}
+                  required
+                  label={this.resx?.ControlsRadius}
+                  helpText={this.resx?.ControlsRadiusHelp}
+                  value={this.styles.ControlsRadius}
+                  onValueChange={e => this.styles={...this.styles, ControlsRadius: e.detail as number}}
+                />
+                <dnn-input
+                  type="number"
+                  min={0}
+                  required
+                  label={this.resx?.ControlsPadding}
+                  helpText={this.resx?.ControlsPaddingHelp}
+                  value={this.styles.ControlsPadding}
+                  onValueChange={e => this.styles={...this.styles, ControlsPadding: e.detail as number}}
+                />
+              </div>
+              <div class="section">
+                <h3>{this.resx?.Colors}</h3>
+                <dnn-input
+                  type="number"
+                  min={0}
+                  max={1}
+                  step={0.01}
+                  required
+                  label={this.resx?.ColorVariationOpacity}
+                  helpText={this.resx?.ColorVariationOpacityHelp}
+                  value={this.styles.VariationOpacity}
+                  onValueChange={e => this.styles={...this.styles, VariationOpacity: e.detail as number}}
+                />
+              </div>
+              <div class="section">
+                  <h3>{this.resx.Typography}</h3>
+                  <dnn-input
+                    type="number"
+                    min={0}
+                    required
+                    label={this.resx?.BaseFontSize}
+                    helpText={this.resx?.BaseFontSizeHelp}
+                    value={this.styles.BaseFontSize}
+                    onValueChange={e => this.styles={...this.styles, BaseFontSize: e.detail as number}}
+                  />
+              </div>
+            </div>
+          }
+          {this.isHost &&
+            <div class="permissions-section">
+              <h3>{this.resx?.Permissions}</h3>
+              <label>
+                <dnn-toggle
+                  checked={this.styles?.AllowAdminEdits}
+                  onCheckChanged={e => this.styles={...this.styles, AllowAdminEdits: e.detail.checked}}
+                />
+                {this.resx?.AllowAdminEdits}
+              </label>
+              <em>{this.resx.AllowAdminEditsHelp}</em>
+            </div>
+          }
+          <div class="controls">
+            <dnn-button
+              reversed
+              onClick={() => {
+                this.styles = this.originalStyles;
+              }}
+            >
+              {this.resx?.Reset}
+            </dnn-button>
+            <dnn-button
+              appearance="danger"
+              confirm
+              confirmMessage={this.resx?.RestoreDefaultMessage}
+              confirmNoText={this.resx?.No}
+              confirmYesText={this.resx?.Yes}
+              onConfirmed={() => this.handleRestoreDefault()}
+            >
+              {this.resx?.RestoreDefault}
+            </dnn-button>
+            <dnn-button
+              onClick={() => this.handleSave()}
+            >
+              {this.resx?.Save}
+            </dnn-button>
+          </div>
+        </form>
+      </Host>
+    );
+  }
+}
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/readme.md b/Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/readme.md
new file mode 100644
index 00000000000..21e56b7e56d
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/src/components/dnn-styles-module/readme.md
@@ -0,0 +1,38 @@
+# dnn-styles-module
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Dependencies
+
+### Depends on
+
+- dnn-color-input
+- dnn-input
+- dnn-toggle
+- dnn-button
+
+### Graph
+```mermaid
+graph TD;
+  dnn-styles-module --> dnn-color-input
+  dnn-styles-module --> dnn-input
+  dnn-styles-module --> dnn-toggle
+  dnn-styles-module --> dnn-button
+  dnn-color-input --> dnn-fieldset
+  dnn-color-input --> dnn-modal
+  dnn-color-input --> dnn-tabs
+  dnn-color-input --> dnn-tab
+  dnn-color-input --> dnn-color-picker
+  dnn-color-input --> dnn-button
+  dnn-button --> dnn-modal
+  dnn-button --> dnn-button
+  dnn-input --> dnn-fieldset
+  style dnn-styles-module fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/src/index.ts b/Dnn.AdminExperience/ClientSide/Styles.Web/src/index.ts
new file mode 100644
index 00000000000..fa3408caa56
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/src/index.ts
@@ -0,0 +1,2 @@
+import '@dnncommunity/dnn-elements';
+export * from './components';
\ No newline at end of file
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/src/window.dnn.d.ts b/Dnn.AdminExperience/ClientSide/Styles.Web/src/window.dnn.d.ts
new file mode 100644
index 00000000000..733c00929fc
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/src/window.dnn.d.ts
@@ -0,0 +1,109 @@
+declare global {
+    interface IDnnWrapper {
+        initStyles: () => IInitStylesConfig;
+    }
+}
+
+export interface IInitStylesConfig {
+    moduleName: string;
+    params: IParams;
+    utility: IUtility;
+}
+
+interface IParams {
+    folderName?: string;
+    identifier?: string;
+    moduleName?: string;
+    path?: string;
+    query?: string;
+    settings?: ISettings;
+}
+
+interface ISettings {
+    isAdmin?: boolean;
+    isHost?: boolean;
+    permissions?: IPermissionsDictionary;
+}
+
+interface IPermissionsDictionary{
+    [key: string]: string;
+}
+
+interface IUtility {
+    resx: IResx;
+    sf: IServicesFramework;
+    notify: (message: string, options?: INotifyOptions) => void;
+    notifyError: (message: string, options?: INotifyOptions) => void;
+}
+
+interface IResx {
+    Styles: IStylesResx;
+}
+
+interface IStylesResx {
+    ActionColors: string;
+    AllowAdminEdits: any;
+    AllowAdminEditsHelp: any;
+    BackgroundColor: string;
+    BackgroundColorHelp: string;
+    BaseFontSize: string;
+    BaseFontSizeHelp: string;
+    BrandColors: string;
+    Colors: string;
+    ColorVariationOpacity: string;
+    ColorVariationOpacityHelp: string;
+    Contrast: string;
+    Controls: string;
+    ControlsPadding: string;
+    ControlsPaddingHelp: string;
+    ControlsRadius: string;
+    ControlsRadiusHelp: string;
+    DangerColor: string;
+    DangerColorHelp: string;
+    ForegroundColor: string;
+    ForegroundColorHelp: string;
+    GeneralColors: string;
+    GetStylesError: string;
+    InformationColor: string;
+    InformationColorHelp: string;
+    ModuleDescription: string;
+    nav_Styles: string;
+    NeutralColor: string;
+    NeutralColorHelp: string;
+    No: string;
+    Permissions: any;
+    PrimaryColor: string;
+    PrimaryColorHelp: string;
+    Reset: any;
+    RestoreDefault: string;
+    RestoreDefaultMessage: string;
+    Save: string;
+    SaveError: any;
+    SaveSuccess: any;
+    SecondaryColor: string;
+    SecondaryColorHelp: string;
+    SuccessColor: string;
+    SuccessColorHelp: string;
+    SurfaceColor: string;
+    SurfaceColorHelp: string;
+    TertiaryColor: string;
+    TertiaryColorHelp: string;
+    Typography: string;
+    WarningColor: string;
+    WarningColorHelp: string;
+    Yes: string;
+}
+
+interface IServicesFramework {
+    antiForgeryToken: string;
+    getServiceRoot(): string;
+    moduleRoot: string;
+    controller: string;
+}
+
+interface INotifyOptions {
+    timeout?: number;
+    clickToClose?: boolean;
+    closeButtonText?: string;
+    type?: "notify" | "error";
+}
\ No newline at end of file
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/stencil.config.ts b/Dnn.AdminExperience/ClientSide/Styles.Web/stencil.config.ts
new file mode 100644
index 00000000000..dd687f4c99b
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/stencil.config.ts
@@ -0,0 +1,24 @@
+import { Config } from '@stencil/core';
+
+export const config: Config = {
+  namespace: 'dnn-styles',
+  outputTargets: [
+    {
+      type: 'dist',
+      esmLoaderPath: '../loader',
+    },
+    {
+      type: 'dist-custom-elements',
+    },
+    {
+      type: 'docs-readme',
+    },
+    {
+      type: 'www',
+      serviceWorker: null, // disable service workers
+    },
+  ],
+  testing: {
+    browserHeadless: "new",
+  },
+};
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/stencil.dnn.config.ts b/Dnn.AdminExperience/ClientSide/Styles.Web/stencil.dnn.config.ts
new file mode 100644
index 00000000000..da3f20d487d
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/stencil.dnn.config.ts
@@ -0,0 +1,19 @@
+import { config as originalConfig } from './stencil.config';
+import dnnConfig from '../../../settings.local.json';
+import { Config } from '@stencil/core';
+
+if (!dnnConfig || !dnnConfig.WebsitePath){
+  console.error("WebsitePath is not defined in settings.local.json");
+}
+const outPath = `${dnnConfig.WebsitePath}\\DesktopModules\\Admin\\Dnn.PersonaBar\\Modules\\Dnn.Styles\\scripts\\dist`;
+
+export const config: Config = {
+  ...originalConfig,
+  outputTargets: [
+    {
+      type: 'dist',
+      esmLoaderPath: '../loader',
+      dir: dnnConfig?.WebsitePath ? outPath : '../dist',
+    }
+  ],
+};
diff --git a/Dnn.AdminExperience/ClientSide/Styles.Web/tsconfig.json b/Dnn.AdminExperience/ClientSide/Styles.Web/tsconfig.json
new file mode 100644
index 00000000000..8992a882d8c
--- /dev/null
+++ b/Dnn.AdminExperience/ClientSide/Styles.Web/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "allowUnreachableCode": false,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": [
+      "dom",
+      "es2017"
+    ],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "target": "es2017",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "jsx": "react",
+    "jsxFactory": "h",
+    "strict": true,
+    "strictPropertyInitialization": false,
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/Dnn.AdminExperience/ClientSide/TaskScheduler.Web/src/components/scheduler/schedulerEditor/index.jsx b/Dnn.AdminExperience/ClientSide/TaskScheduler.Web/src/components/scheduler/schedulerEditor/index.jsx
index e0a3266cb5d..14e5f9f977c 100644
--- a/Dnn.AdminExperience/ClientSide/TaskScheduler.Web/src/components/scheduler/schedulerEditor/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/TaskScheduler.Web/src/components/scheduler/schedulerEditor/index.jsx
@@ -421,9 +421,9 @@ class SchedulerEditor extends Component {
                         </div>
                     </div>
                     <div className="buttons-box">
-                        {props.scheduleId !== undefined && <Button type="secondary" onClick={props.onDelete.bind(this, props.scheduleId)}>{resx.get("cmdDelete")}</Button>}
+                        {props.scheduleId !== undefined && <Button type="danger" onClick={props.onDelete.bind(this, props.scheduleId)}>{resx.get("cmdDelete")}</Button>}
                         <Button
-                            type="secondary"
+                            type="neutral"
                             onClick={this.onCancel.bind(this)}>
                             {resx.get("Cancel")}
                         </Button>
diff --git a/Dnn.AdminExperience/ClientSide/Themes.Web/src/components/Body/SiteTheme/ThemeSettings/EditThemeAttributes/index.jsx b/Dnn.AdminExperience/ClientSide/Themes.Web/src/components/Body/SiteTheme/ThemeSettings/EditThemeAttributes/index.jsx
index 36f63e07fb1..b87f72c644b 100644
--- a/Dnn.AdminExperience/ClientSide/Themes.Web/src/components/Body/SiteTheme/ThemeSettings/EditThemeAttributes/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Themes.Web/src/components/Body/SiteTheme/ThemeSettings/EditThemeAttributes/index.jsx
@@ -259,7 +259,7 @@ class EditThemeAttributes extends Component {
                                 {this.renderValueField()}
                             </GridCell>
                             <GridCell columnSize={100} className="actions-cell">
-                                <Button onClick={this.cancelEdit.bind(this)}>{Localization.get("Cancel")}</Button>
+                                <Button type="neutral" onClick={this.cancelEdit.bind(this)}>{Localization.get("Cancel")}</Button>
                                 <Button type="primary" onClick={this.Save.bind(this)}>{Localization.get("Apply")}</Button>
                             </GridCell>
                         </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/CreateUserBox/index.jsx b/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/CreateUserBox/index.jsx
index 4662a2a00b4..42a601a8e12 100644
--- a/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/CreateUserBox/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/CreateUserBox/index.jsx
@@ -280,7 +280,7 @@ class CreateUserBox extends Component {
                             onChange={this.onChange.bind(this, "notify") }  tabIndex={9}/>
                     </GridCell>
                     <GridCell columnSize={100} className="modal-footer">
-                        <Button id="cancelbtn"  type="secondary" onClick={this.cancel.bind(this) }  tabIndex={10}>{Localization.get("btnCancel") }</Button>
+                        <Button id="cancelbtn"  type="neutral" onClick={this.cancel.bind(this) }  tabIndex={10}>{Localization.get("btnCancel") }</Button>
                         <Button id="confirmbtn" type="primary" onClick={this.save.bind(this) } tabIndex={11}>{Localization.get("btnSave") }</Button>
                     </GridCell>
                 </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/ChangePassword/index.jsx b/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/ChangePassword/index.jsx
index 7e5f2586325..2844116e071 100644
--- a/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/ChangePassword/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/ChangePassword/index.jsx
@@ -141,7 +141,7 @@ class ChangePassword extends Component {
                         value={state.confirmPassword}/>
                 </GridCell>
                 <GridSystem>
-                    <Button className="right do-not-close" id="cancelbtn"  type="secondary" onClick={this.cancel.bind(this) }>{Localization.get("btnCancel") }</Button>
+                    <Button className="right do-not-close" id="cancelbtn"  type="neutral" onClick={this.cancel.bind(this) }>{Localization.get("btnCancel") }</Button>
                     <Button id="confirmbtn do-not-close" type="primary" onClick={this.save.bind(this) }>{Localization.get("btnApply") }</Button>
                 </GridSystem>
             </GridCell>
diff --git a/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/UserSettings/index.jsx b/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/UserSettings/index.jsx
index 7ec2f2f4b24..16ed505f5b4 100644
--- a/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/UserSettings/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/UserSettings/index.jsx
@@ -367,7 +367,7 @@ class UserSettings extends Component {
             {canEditSettings(this.props.appSettings.applicationSettings.settings) &&
                 <GridCell className="buttons">
                     <GridCell columnSize={50} className="leftBtn">
-                        <Button id="cancelbtn"  type="secondary" onClick={this.props.collapse.bind(this) }>{Localization.get("btnCancel") }</Button>
+                        <Button id="cancelbtn"  type="neutral" onClick={this.props.collapse.bind(this) }>{Localization.get("btnCancel") }</Button>
                     </GridCell>
                     <GridCell columnSize={50} className="rightBtn">
                         <Button id="confirmbtn" disabled={this.state.loading} type="primary" onClick={this.save.bind(this) }>{Localization.get("btnSave") }</Button>
diff --git a/Dnn.AdminExperience/ClientSide/Users.Web/src/components/Body/index.jsx b/Dnn.AdminExperience/ClientSide/Users.Web/src/components/Body/index.jsx
index 58216d30183..1484ebc0ff2 100644
--- a/Dnn.AdminExperience/ClientSide/Users.Web/src/components/Body/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Users.Web/src/components/Body/index.jsx
@@ -113,7 +113,7 @@ class Body extends Component {
                     }
                     {
                         appSettings.applicationSettings.settings.isAdmin &&  
-                    <Button type="secondary" size="large" onClick={() => {this.onRemoveDeletedUsers();}} title={Localization.get("RemoveDeleted.Btn")}>
+                    <Button type="danger" size="large" onClick={() => {this.onRemoveDeletedUsers();}} title={Localization.get("RemoveDeleted.Btn")}>
                         {Localization.get("RemoveDeleted.Btn") }
                     </Button>
                     }
diff --git a/Dnn.AdminExperience/ClientSide/Vocabularies.Web/src/components/VocabularyList/RightPane/AddTermBox/index.jsx b/Dnn.AdminExperience/ClientSide/Vocabularies.Web/src/components/VocabularyList/RightPane/AddTermBox/index.jsx
index 49b00e17992..bade95ba7cf 100644
--- a/Dnn.AdminExperience/ClientSide/Vocabularies.Web/src/components/VocabularyList/RightPane/AddTermBox/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Vocabularies.Web/src/components/VocabularyList/RightPane/AddTermBox/index.jsx
@@ -74,8 +74,8 @@ const AddTermBox = ({
                 </InputGroup>
             }
             <div className="add-term-footer">
-                {editMode && <Button type="secondary" onClick={deleteTerm}>{LocalizedResources.get("DeleteTerm") }</Button>}
-                <Button type="secondary" onClick={closeAddTerm}>{LocalizedResources.get("cancelCreate") }</Button>
+                {editMode && <Button type="danger" onClick={deleteTerm}>{LocalizedResources.get("DeleteTerm") }</Button>}
+                <Button type="neutral" onClick={closeAddTerm}>{LocalizedResources.get("cancelCreate") }</Button>
                 <Button type="primary" onClick={onUpdateTerm}>{LocalizedResources.get("SaveTerm") }</Button>
             </div>
         </div>
diff --git a/Dnn.AdminExperience/ClientSide/Vocabularies.Web/src/components/VocabularyList/TermHeader/index.jsx b/Dnn.AdminExperience/ClientSide/Vocabularies.Web/src/components/VocabularyList/TermHeader/index.jsx
index 4813700336d..0234f535671 100644
--- a/Dnn.AdminExperience/ClientSide/Vocabularies.Web/src/components/VocabularyList/TermHeader/index.jsx
+++ b/Dnn.AdminExperience/ClientSide/Vocabularies.Web/src/components/VocabularyList/TermHeader/index.jsx
@@ -101,7 +101,7 @@ class TermHeader extends Component {
                     isOpened={!this.state.collapsed}>
                     {!state.collapsed && props.children}
                     {!state.collapsed && <GridCell className="vocab-footer">
-                        {!props.term.IsSystem && util.canEdit() && <Button type="secondary" onClick={this.onDelete.bind(this)}>{LocalizedResources.get("DeleteTerm")}</Button>}
+                        {!props.term.IsSystem && util.canEdit() && <Button type="danger" onClick={this.onDelete.bind(this)}>{LocalizedResources.get("DeleteTerm")}</Button>}
                         <Button type="secondary" onClick={this.collapse.bind(this)}>{LocalizedResources.get("Close")}</Button>
                     </GridCell>}
                 </Collapse>
diff --git a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Components/Styles/Constants.cs b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Components/Styles/Constants.cs
new file mode 100644
index 00000000000..ef5bdf53565
--- /dev/null
+++ b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Components/Styles/Constants.cs
@@ -0,0 +1,22 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information
+
+namespace Dnn.PersonaBar.Styles.Components
+{
+    /// <summary>
+    /// Constants used for the Themes module.
+    /// </summary>
+    public class Constants
+    {
+        /// <summary>
+        /// The menu name.
+        /// </summary>
+        public const string MenuName = "Dnn.Styles";
+
+        /// <summary>
+        /// The edit permission key.
+        /// </summary>
+        public const string Edit = "EDIT";
+    }
+}
diff --git a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Components/Themes/ThemesController.cs b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Components/Themes/ThemesController.cs
index 6de1ab9a040..9b5b31cd2a9 100644
--- a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Components/Themes/ThemesController.cs
+++ b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Components/Themes/ThemesController.cs
@@ -373,7 +373,7 @@ internal static string CreateThumbnail(string strImage)
             var imageFileName = Path.GetFileName(strImage);
             if (string.IsNullOrEmpty(imageFileName) || imageFileName.StartsWith("thumbnail_"))
             {
-                strImage = Globals.ApplicationPath + "/" + strImage.Substring(strImage.IndexOf("portals\\"));
+                strImage = strImage.Substring(Globals.ApplicationMapPath.Length);
                 strImage = strImage.Replace("\\", "/");
                 return strImage;
             }
@@ -439,7 +439,7 @@ internal static string CreateThumbnail(string strImage)
                 }
             }
 
-            strThumbnail = Globals.ApplicationPath + "/" + strThumbnail.Substring(strThumbnail.IndexOf("portals\\"));
+            strThumbnail = strThumbnail.Substring(Globals.ApplicationMapPath.Length);
             strThumbnail = strThumbnail.Replace("\\", "/");
 
             // return thumbnail filename
diff --git a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Dnn.PersonaBar.Extensions.csproj b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Dnn.PersonaBar.Extensions.csproj
index 24895ae9008..654e0f7e038 100644
--- a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Dnn.PersonaBar.Extensions.csproj
+++ b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Dnn.PersonaBar.Extensions.csproj
@@ -278,6 +278,7 @@
     <Compile Include="Components\SqlConsole\ISqlQueryController.cs" />
     <Compile Include="Components\SqlConsole\SqlConsoleQuery.cs" />
     <Compile Include="Components\SqlConsole\SqlQueryController.cs" />
+    <Compile Include="Components\Styles\Constants.cs" />
     <Compile Include="Components\TaskScheduler\Constants.cs" />
     <Compile Include="Components\TaskScheduler\Prompt\Commands\GetTask.cs" />
     <Compile Include="Components\TaskScheduler\Prompt\Commands\ListTasks.cs" />
@@ -356,6 +357,7 @@
     <Compile Include="MenuControllers\SiteSettingsMenuController.cs" />
     <Compile Include="MenuControllers\SitesMenuController.cs" />
     <Compile Include="MenuControllers\SqlConsoleMenuController.cs" />
+    <Compile Include="MenuControllers\StylesMenuController.cs" />
     <Compile Include="MenuControllers\TaskSchedulerMenuController.cs" />
     <Compile Include="MenuControllers\ThemeMenuController.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
@@ -473,6 +475,7 @@
     <Compile Include="Services\SitesController.cs" />
     <Compile Include="Services\SiteSettingsController.cs" />
     <Compile Include="Services\SqlConsoleController.cs" />
+    <Compile Include="Services\StylesController.cs" />
     <Compile Include="Services\SystemInfoApplicationAdminController.cs" />
     <Compile Include="Services\SystemInfoApplicationHostController.cs" />
     <Compile Include="Services\SystemInfoDatabaseController.cs" />
@@ -570,6 +573,9 @@
     <Content Include="admin\personaBar\Dnn.SqlConsole\scripts\sort.js" />
     <Content Include="admin\personaBar\Dnn.SqlConsole\scripts\SqlConsole.js" />
     <Content Include="admin\personaBar\Dnn.SqlConsole\SqlConsole.html" />
+    <Content Include="admin\personaBar\Dnn.Styles\.gitignore" />
+    <Content Include="admin\personaBar\Dnn.Styles\scripts\Styles.js" />
+    <Content Include="admin\personaBar\Dnn.Styles\Styles.html" />
     <Content Include="admin\personaBar\Dnn.TaskScheduler\css\TaskScheduler.css" />
     <Content Include="admin\personaBar\Dnn.TaskScheduler\images\active.png" />
     <Content Include="admin\personaBar\Dnn.TaskScheduler\images\btn-edit.png" />
@@ -677,6 +683,7 @@
     <Content Include="admin\personaBar\Dnn.Vocabularies\App_LocalResources\Vocabularies.resx" />
     <Content Include="admin\personaBar\Dnn.SiteGroups\App_LocalResources\SiteGroups.resx" />
     <Content Include="admin\personaBar\Dnn.Prompt\App_LocalResources\Prompt.resx" />
+    <Content Include="admin\personaBar\Dnn.Styles\App_LocalResources\Styles.resx" />
     <EmbeddedResource Include="Components\Security\Resources\CheckFileExists.resources" />
     <EmbeddedResource Include="Components\Security\Resources\ExecuteCommand.resources" />
     <EmbeddedResource Include="Components\Security\Resources\GetFolderTree.resources" />
diff --git a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Dnn.PersonaBar.Extensions.dnn b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Dnn.PersonaBar.Extensions.dnn
index 6871d657c59..36bb1b2b3e4 100644
--- a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Dnn.PersonaBar.Extensions.dnn
+++ b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Dnn.PersonaBar.Extensions.dnn
@@ -400,6 +400,18 @@
             <defaultPermissions>Administrators</defaultPermissions>
           </menu>
         </component>
+        <component type="PersonaBarMenu">
+            <menu>
+                <identifier>Dnn.Styles</identifier>
+                <moduleName>Styles</moduleName>
+                <controller>Dnn.PersonaBar.Styles.MenuControllers.StylesMenuController, Dnn.PersonaBar.Extensions</controller>
+                <resourceKey>nav_Styles</resourceKey>
+                <path>Styles</path>
+                <parent>Manage</parent>
+                <order>31</order>
+                <defaultPermissions>Administrators</defaultPermissions>
+            </menu>
+        </component>
         <component type="PersonaBarMenu">
           <menu>
             <identifier>Dnn.Users</identifier>
diff --git a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Dnn.PersonaBar.Extensions.sln b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Dnn.PersonaBar.Extensions.sln
new file mode 100644
index 00000000000..94280203f0a
--- /dev/null
+++ b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Dnn.PersonaBar.Extensions.sln
@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.5.002.0
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Dnn.PersonaBar.Extensions", "Dnn.PersonaBar.Extensions.csproj", "{55B3EF30-0B87-4060-A4C4-C60DFA724C4D}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{55B3EF30-0B87-4060-A4C4-C60DFA724C4D}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{55B3EF30-0B87-4060-A4C4-C60DFA724C4D}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{55B3EF30-0B87-4060-A4C4-C60DFA724C4D}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{55B3EF30-0B87-4060-A4C4-C60DFA724C4D}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {BB8D90AD-476B-4B9D-8AE2-073A423C2DCC}
+	EndGlobalSection
+EndGlobal
diff --git a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/MenuControllers/StylesMenuController.cs b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/MenuControllers/StylesMenuController.cs
new file mode 100644
index 00000000000..1789dcc1bef
--- /dev/null
+++ b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/MenuControllers/StylesMenuController.cs
@@ -0,0 +1,77 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information
+
+namespace Dnn.PersonaBar.Styles.MenuControllers
+{
+    using System.Collections.Generic;
+
+    using Dnn.PersonaBar.Library.Controllers;
+    using Dnn.PersonaBar.Library.Model;
+    using DotNetNuke.Entities.Portals;
+    using DotNetNuke.Entities.Portals.Extensions;
+    using DotNetNuke.Entities.Users;
+
+    /// <summary>
+    /// Controls the Styles menu.
+    /// </summary>
+    public class StylesMenuController : IMenuItemController
+    {
+        private readonly IPortalController portalController;
+        private readonly IUserController userController;
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="StylesMenuController"/> class.
+        /// </summary>
+        /// <param name="portalController">Provides access to portals information.</param>
+        public StylesMenuController(IPortalController portalController)
+            : this(portalController, UserController.Instance)
+        {
+        }
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="StylesMenuController"/> class.
+        /// </summary>
+        /// <param name="portalController">Provides information about portals.</param>
+        /// <param name="userController">Provides information about users.</param>
+        public StylesMenuController(IPortalController portalController, IUserController userController)
+        {
+            this.portalController = portalController;
+            this.userController = userController;
+        }
+
+        /// <inheritdoc/>
+        public IDictionary<string, object> GetSettings(MenuItem menuItem)
+        {
+           return new Dictionary<string, object>();
+        }
+
+        /// <inheritdoc/>
+        public void UpdateParameters(MenuItem menuItem)
+        {
+            menuItem.AllowHost = true;
+        }
+
+        /// <inheritdoc/>
+        public bool Visible(MenuItem menuItem)
+        {
+            var allowAdminEdits = this.portalController
+                .GetCurrentSettings()
+                .GetStyles()
+                .AllowAdminEdits;
+            var user = this.userController.GetCurrentUserInfo();
+
+            if (user.IsSuperUser)
+            {
+                return true;
+            }
+
+            if (user.IsAdmin && allowAdminEdits)
+            {
+                return true;
+            }
+
+            return false;
+        }
+    }
+}
diff --git a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Services/StylesController.cs b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Services/StylesController.cs
new file mode 100644
index 00000000000..28397714713
--- /dev/null
+++ b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/Services/StylesController.cs
@@ -0,0 +1,105 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information
+
+namespace Dnn.PersonaBar.Styles.Services
+{
+    using System.IO;
+    using System.Web.Http;
+
+    using Dnn.PersonaBar.Library;
+    using Dnn.PersonaBar.Library.Attributes;
+    using DotNetNuke.Common.Utilities;
+    using DotNetNuke.Entities.Portals;
+    using DotNetNuke.Entities.Portals.Extensions;
+    using DotNetNuke.Web.Api;
+
+    /// <summary>
+    /// REST API Controller for the Styles module.
+    /// </summary>
+    [MenuPermission(MenuName = Components.Constants.MenuName, Scope = ServiceScope.Admin)]
+    public class StylesController : PersonaBarApiController
+    {
+        /// <summary>
+        /// Gets the styles.
+        /// </summary>
+        /// <returns>The current portal style settings.</returns>
+        [HttpGet]
+        public IHttpActionResult GetStyles()
+        {
+            if (!this.CanEdit())
+            {
+                return this.Unauthorized();
+            }
+
+            var repo = new PortalStylesRepository();
+            var settings = repo.GetSettings(this.PortalId);
+            return this.Ok(settings);
+        }
+
+        /// <summary>
+        /// Saves the styles.
+        /// </summary>
+        /// <param name="settings">The settings.</param>
+        /// <returns>OK.</returns>
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public IHttpActionResult SaveStyles(PortalStyles settings)
+        {
+            if (!this.CanEdit())
+            {
+                return this.Unauthorized();
+            }
+
+            // Save to database
+            var repo = new PortalStylesRepository();
+            repo.SaveSettings(this.PortalId, settings);
+
+            // Clear cache
+            var cacheKey = string.Format(DataCache.PortalStylesCacheKey, this.PortalId);
+            DataCache.RemoveCache(cacheKey);
+
+            // Overwrite the file
+            var path = $"{this.PortalSettings.HomeSystemDirectoryMapPath}{settings.FileName}";
+            var styles = settings.ToString();
+            File.WriteAllText(path, styles);
+
+            return this.Ok();
+        }
+
+        /// <summary>
+        /// Restores the styles to their out-of-box defaults.
+        /// </summary>
+        /// <returns><see cref="PortalStyles"/>.</returns>
+        [HttpPost]
+        [ValidateAntiForgeryToken]
+        public IHttpActionResult RestoreStyles()
+        {
+            if (!this.CanEdit())
+            {
+                return this.Unauthorized();
+            }
+
+            var repo = new PortalStylesRepository();
+            var styles = new PortalStyles();
+            repo.SaveSettings(this.PortalId, styles);
+            return this.Ok(styles);
+        }
+
+        private bool CanEdit()
+        {
+            if (this.UserInfo.IsSuperUser)
+            {
+                return true;
+            }
+
+            var allowAdminEdits = PortalController.Instance.GetCurrentSettings().GetStyles().AllowAdminEdits;
+            if (this.UserInfo.IsAdmin && allowAdminEdits)
+            {
+                return true;
+            }
+
+            return false;
+        }
+    }
+}
diff --git a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Styles/.gitignore b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Styles/.gitignore
new file mode 100644
index 00000000000..970f6f88b43
--- /dev/null
+++ b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Styles/.gitignore
@@ -0,0 +1 @@
+scripts/dist
\ No newline at end of file
diff --git a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Styles/App_LocalResources/Styles.resx b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Styles/App_LocalResources/Styles.resx
new file mode 100644
index 00000000000..426a33fe296
--- /dev/null
+++ b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Styles/App_LocalResources/Styles.resx
@@ -0,0 +1,273 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!-- 
+    Microsoft ResX Schema 
+    
+    Version 2.0
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
+    associated with the data types.
+    
+    Example:
+    
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+                
+    There are any number of "resheader" rows that contain simple 
+    name/value pairs.
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
+    mimetype set.
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
+    extensible. For a given mimetype the value must be set accordingly:
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
+    read any of the formats listed below.
+    
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+    
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array 
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" />
+              </xsd:sequence>
+              <xsd:attribute name="name" use="required" type="xsd:string" />
+              <xsd:attribute name="type" type="xsd:string" />
+              <xsd:attribute name="mimetype" type="xsd:string" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string" />
+              <xsd:attribute name="name" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" />
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="nav_Styles.Text" xml:space="preserve">
+    <value>Styles</value>
+  </data>
+  <data name="ModuleDescription" xml:space="preserve">
+    <value>DNN Provides css-varialbes (custom properties) to designers and developers to allow them to style their solutions to the site branding preferences. These style preferences may or may not be implemented by a theme or extension.</value>
+  </data>
+  <data name="BrandColors" xml:space="preserve">
+    <value>Brand Colors</value>
+  </data>
+  <data name="ActionColors" xml:space="preserve">
+    <value>Action Colors</value>
+  </data>
+  <data name="GeneralColors" xml:space="preserve">
+    <value>General Colors</value>
+  </data>
+  <data name="Colors" xml:space="preserve">
+    <value>Colors</value>
+  </data>
+  <data name="Controls" xml:space="preserve">
+    <value>Controls</value>
+  </data>
+  <data name="Typography" xml:space="preserve">
+    <value>Typography</value>
+  </data>
+  <data name="PrimaryColor" xml:space="preserve">
+    <value>Primary Color</value>
+  </data>
+  <data name="PrimaryColorHelp" xml:space="preserve">
+    <value>Used to style most primary controls (like Submit buttons)</value>
+  </data>
+  <data name="Contrast" xml:space="preserve">
+    <value>Contrast</value>
+  </data>
+  <data name="SecondaryColorHelp" xml:space="preserve">
+    <value>Used for most secondary actions like Copy, Merge</value>
+  </data>
+  <data name="SecondaryColor" xml:space="preserve">
+    <value>SecondaryColor</value>
+  </data>
+  <data name="TertiaryColor" xml:space="preserve">
+    <value>Tertiary Color</value>
+  </data>
+  <data name="TertiaryColorHelp" xml:space="preserve">
+    <value>An additional less used color</value>
+  </data>
+  <data name="NeutralColorHelp" xml:space="preserve">
+    <value>A muted neutral color often used for disabled controls</value>
+  </data>
+  <data name="NeutralColor" xml:space="preserve">
+    <value>Neutral Color</value>
+  </data>
+  <data name="BackgroundColor" xml:space="preserve">
+    <value>Background Color</value>
+  </data>
+  <data name="BackgroundColorHelp" xml:space="preserve">
+    <value>Used for the main background of the site</value>
+  </data>
+  <data name="SurfaceColorHelp" xml:space="preserve">
+    <value>Should have a slight contrast over the background, mainly used for separating sections like menus</value>
+  </data>
+  <data name="SurfaceColor" xml:space="preserve">
+    <value>Surface Color</value>
+  </data>
+  <data name="ForegroundColor" xml:space="preserve">
+    <value>Foreground Color</value>
+  </data>
+  <data name="ForegroundColorHelp" xml:space="preserve">
+    <value>The main text and other elements colors that should have higher contrast over the background</value>
+  </data>
+  <data name="InformationColor" xml:space="preserve">
+    <value>Information Color</value>
+  </data>
+  <data name="InformationColorHelp" xml:space="preserve">
+    <value>Used to display informational messages</value>
+  </data>
+  <data name="SuccessColorHelp" xml:space="preserve">
+    <value>A color that represents success</value>
+  </data>
+  <data name="SuccessColor" xml:space="preserve">
+    <value>Success Color</value>
+  </data>
+  <data name="WarningColor" xml:space="preserve">
+    <value>Warning Color</value>
+  </data>
+  <data name="WarningColorHelp" xml:space="preserve">
+    <value>Used to show a warning</value>
+  </data>
+  <data name="DangerColor" xml:space="preserve">
+    <value>Danger Color</value>
+  </data>
+  <data name="DangerColorHelp" xml:space="preserve">
+    <value>Use to identify dangerous actions such as a Delete button or Errors</value>
+  </data>
+  <data name="ControlsRadiusHelp" xml:space="preserve">
+    <value>Defines how rounded controls are</value>
+  </data>
+  <data name="ControlsRadius" xml:space="preserve">
+    <value>Controls Radius</value>
+  </data>
+  <data name="ControlsPaddingHelp" xml:space="preserve">
+    <value>Defines how spaced apart elements should be</value>
+  </data>
+  <data name="ControlsPadding" xml:space="preserve">
+    <value>Controls Padding</value>
+  </data>
+  <data name="BaseFontSize" xml:space="preserve">
+    <value>Base Font Size</value>
+  </data>
+  <data name="BaseFontSizeHelp" xml:space="preserve">
+    <value>Defines the font size in pixels of the main text</value>
+  </data>
+  <data name="ColorVariationOpacity" xml:space="preserve">
+    <value>Color Variation Opacity</value>
+  </data>
+  <data name="ColorVariationOpacityHelp" xml:space="preserve">
+    <value>The percentage of opacity when something should be transparent over the background color</value>
+  </data>
+  <data name="RestoreDefault" xml:space="preserve">
+    <value>Restore Default</value>
+  </data>
+  <data name="RestoreDefaultMessage" xml:space="preserve">
+    <value>Are you sure you want to restore the styles to their original defaults?\nYour current settings will be lost.</value>
+  </data>
+  <data name="Save" xml:space="preserve">
+    <value>Save</value>
+  </data>
+  <data name="GetStylesError" xml:space="preserve">
+    <value>There was an issue getting the current styles.</value>
+  </data>
+  <data name="Reset" xml:space="preserve">
+    <value>Reset</value>
+  </data>
+  <data name="SaveSuccess" xml:space="preserve">
+    <value>Styles saved successfully.</value>
+  </data>
+  <data name="SaveError" xml:space="preserve">
+    <value>There was an error trying to save the styles.</value>
+  </data>
+  <data name="Yes" xml:space="preserve">
+    <value>Yes</value>
+  </data>
+  <data name="No" xml:space="preserve">
+    <value>No</value>
+  </data>
+  <data name="Permissions" xml:space="preserve">
+    <value>Permissions</value>
+  </data>
+  <data name="AllowAdminEdits" xml:space="preserve">
+    <value>Allow Admin Edits</value>
+  </data>
+  <data name="AllowAdminEditsHelp" xml:space="preserve">
+    <value>If enabled, administrators of the site will be able to edit the styles for their site.</value>
+  </data>
+</root>
\ No newline at end of file
diff --git a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Styles/Styles.html b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Styles/Styles.html
new file mode 100644
index 00000000000..b7c47c6d434
--- /dev/null
+++ b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Styles/Styles.html
@@ -0,0 +1,9 @@
+<script type="module" src="Modules/Dnn.Styles/scripts/dist/dnn-styles/dnn-styles.esm.js"></script>
+<script nomodule src="Modules/Dnn.Styles/scripts/dist/dnn-styles/dnn-styles.js"></script>
+
+<div class="dnn-persona-bar-page-header" id="dnnStylesHeader">
+    <h3 class="title-small"></h3>
+</div>
+<div class="dnn-persona-bar-page-body">
+    <dnn-styles-module></dnn-styles-module>
+</div>
\ No newline at end of file
diff --git a/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Styles/scripts/Styles.js b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Styles/scripts/Styles.js
new file mode 100644
index 00000000000..9003e0a80d7
--- /dev/null
+++ b/Dnn.AdminExperience/Dnn.PersonaBar.Extensions/admin/personaBar/Dnn.Styles/scripts/Styles.js
@@ -0,0 +1,32 @@
+define(['main/config'], function (cf) {
+    'use strict';
+    var identifier;
+    var config = cf.init();
+
+    var init = function (wrapper, util, params, callback) {
+        identifier = params.identifier;
+
+        window.dnn.initStyles = function () {
+            return {
+                utility: util,
+                params: params,
+                moduleName: "Styles"
+            };
+        };
+
+        if (typeof callback === 'function') {
+            callback();
+        }
+    };
+
+    var load = function (params, callback) {
+        if (typeof callback === 'function') {
+            callback();
+        }
+    };
+
+    return {
+        init: init,
+        load: load
+    };
+});
diff --git a/Dnn.AdminExperience/Library/Dnn.PersonaBar.Library/Containers/PersonaBarContainer.cs b/Dnn.AdminExperience/Library/Dnn.PersonaBar.Library/Containers/PersonaBarContainer.cs
index 59db458e57c..5749cc88d1b 100644
--- a/Dnn.AdminExperience/Library/Dnn.PersonaBar.Library/Containers/PersonaBarContainer.cs
+++ b/Dnn.AdminExperience/Library/Dnn.PersonaBar.Library/Containers/PersonaBarContainer.cs
@@ -23,6 +23,7 @@ namespace Dnn.PersonaBar.Library.Containers
     using DotNetNuke.Common.Extensions;
     using DotNetNuke.Entities.Host;
     using DotNetNuke.Entities.Portals;
+    using DotNetNuke.Entities.Portals.Extensions;
     using DotNetNuke.Services.Personalization;
 
     using Microsoft.Extensions.DependencyInjection;
@@ -144,6 +145,9 @@ private IDictionary<string, object> GetConfiguration(PortalSettings portalSettin
 
             settings.Add("disableEditBar", Host.DisableEditBar);
 
+            var cssVariablesPath = $"{portalSettings.HomeSystemDirectory}{portalSettings.GetStyles().FileName}";
+            settings.Add("cssVariablesPath", cssVariablesPath);
+
             var customPersonaBarThemePath = HostingEnvironment.MapPath("~/Portals/_default/PersonaBarTheme.css");
             var customPersonaBarThemeExists = File.Exists(customPersonaBarThemePath);
             settings.Add("personaBarTheme", customPersonaBarThemeExists);
diff --git a/Dnn.AdminExperience/Library/Dnn.PersonaBar.Library/Startup.cs b/Dnn.AdminExperience/Library/Dnn.PersonaBar.Library/Startup.cs
index 59ee1d6b84d..4cb5fab45fb 100644
--- a/Dnn.AdminExperience/Library/Dnn.PersonaBar.Library/Startup.cs
+++ b/Dnn.AdminExperience/Library/Dnn.PersonaBar.Library/Startup.cs
@@ -7,7 +7,7 @@ namespace Dnn.PersonaBar.Library
     using Dnn.PersonaBar.Library.Controllers;
 
     using DotNetNuke.DependencyInjection;
-
+    using DotNetNuke.Entities.Users;
     using Microsoft.Extensions.DependencyInjection;
 
     /// <summary>Register services used by the Persona Bar library.</summary>
diff --git a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/main.css b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/main.css
index 1671be9f4b1..d397fe41acc 100644
--- a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/main.css
+++ b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/main.css
@@ -1,20 +1,20 @@
 @font-face {
-    font-family: 'pb_regular';
-    src: url('open-sans.semibold.ttf') format('truetype');
+    font-family: "pb_regular";
+    src: url("open-sans.semibold.ttf") format("truetype");
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'pb_semibold';
-    src: url('open-sans.semibold.ttf') format('truetype');
+    font-family: "pb_semibold";
+    src: url("open-sans.semibold.ttf") format("truetype");
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
-    font-family: 'roboto';
-    src: url('Roboto-Regular.ttf') format('truetype');
+    font-family: "roboto";
+    src: url("Roboto-Regular.ttf") format("truetype");
     font-weight: normal;
     font-style: normal;
 }
@@ -48,18 +48,17 @@ body {
     visibility: hidden;
 }
 
-/* remove iPad select style */
-
-.mac select, .touch select, .safari select {
+.mac select,
+.touch select,
+.safari select {
     -webkit-appearance: none;
+    appearance: none;
 }
 
 select {
-    border-radius: 2px;
+    border-radius: var(--dnn-controls-radius, 2px);
 }
 
-/* buttons */
-
 a.primarybtn {
     display: inline-block;
     -webkit-box-sizing: border-box;
@@ -69,28 +68,29 @@ a.primarybtn {
     line-height: 34px;
     padding: 0 22px;
     font-size: 10pt;
-    background: #fff;
-    border-radius: 3px;
+    background: var(--dnn-color-background, #fff);
+    border-radius: var(--dnn-controls-radius, 3px);
     cursor: pointer;
     font-family: inherit;
-    background: #1e88c3;
-    border: none;
-    color: #fff;
+    background: var(--dnn-color-primary, #1e88c3);
+    border: 0;
+    color: var(--dnn-color-primary-contrast, #fff);
     text-align: center;
     text-decoration: none;
 }
 
 a.primarybtn:hover {
-    background: #21a3da;
+    background: var(--dnn-color-primary-light, #21a3da);
 }
 
 a.primarybtn:active {
-    background: #226f9b;
+    background: var(--dnn-color-primary-light, #226f9b);
 }
 
-a.primarybtn.disabledbtn, a.primarybtn.disabled {
-    color: #959695;
-    background: #e5e7e6;
+a.primarybtn.disabledbtn,
+a.primarybtn.disabled {
+    color: var(--dnn-color-neutral-dark, #959695);
+    background: var(--dnn-color-light, #e5e7e6);
     cursor: not-allowed;
 }
 
@@ -99,14 +99,14 @@ a.secondarybtn {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    border: 1px solid #1e88c3;
+    border: 1px solid var(--dnn-color-primary, #1e88c3);
     height: 34px;
     line-height: 34px;
     padding: 0 22px;
     font-size: 10pt;
-    color: #1e88c3;
-    background: #fff;
-    border-radius: 3px;
+    color: var(--dnn-color-primary, #1e88c3);
+    background: var(--dnn-color-primary-contrast, #fff);
+    border-radius: var(--dnn-controls-radius, 3px);
     cursor: pointer;
     font-family: inherit;
     text-align: center;
@@ -114,24 +114,37 @@ a.secondarybtn {
 }
 
 a.secondarybtn:hover {
-    color: #21a3da;
-    border-color: #21a3da;
+    color: var(--dnn-color-primary-light, #21a3da);
+    border-color: var(--dnn-color-primary-light, #21a3da);
+    background-color: rgba(
+        var(--dnn-color-primary-light-r, 33),
+        var(--dnn-color-primary-light-g, 163),
+        var(--dnn-color-primary-b, 218),
+        0.05
+    );
 }
 
 a.secondarybtn:active {
-    color: #226f9b;
-    border-color: #226f9b;
-}
-
-a.secondarybtn.disabledbtn, a.secondarybtn.disabled {
-    color: #c8c8c8;
-    border-color: #c8c8c8;
+    color: var(--dnn-color-primary-light, #21a3da);
+    border-color: var(--dnn-color-primary-light, #21a3da);
+    background-color: rgba(
+        var(--dnn-color-primary-light-r, 33),
+        var(--dnn-color-primary-light-g, 163),
+        var(--dnn-color-primary-b, 218),
+        0.05
+    );
+}
+
+a.secondarybtn.disabledbtn,
+a.secondarybtn.disabled {
+    color: var(--dnn-color-neutral, #c8c8c8);
+    border-color: var(--dnn-color-neutral, #c8c8c8);
     cursor: not-allowed;
 }
 
 a.plainbtn {
-    background: #fff;
-    color: #666 !important;
+    background: var(--dnn-color-neutral, #fff);
+    color: var(--dnn-color-neutral-contrast, #666) !important;
     display: inline-block;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -139,23 +152,21 @@ a.plainbtn {
     padding: 8px;
     cursor: pointer;
     min-width: 93px;
-    border-radius: 3px;
+    border-radius: var(--dnn-controls-radius, 3px);
     text-decoration: none;
     text-align: center;
     font-size: 13px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--dnn-color-neutral-dark, #ddd);
 }
 
 a.plainbtn:hover {
-    background: #d9eeff;
+    background: var(--dnn-color-neutral-light, #d9eeff);
 }
 
 a.plainbtn:active {
-    background: #d9eeff;
+    background: var(--dnn-color-neutral-light, #d9eeff);
 }
 
-/* mask */
-
 #mask {
     position: absolute;
     background: transparent;
@@ -167,26 +178,24 @@ a.plainbtn:active {
     display: none;
 }
 
-/* notification dialog */
-
 #notification-dialog {
     display: none;
     position: fixed;
-    background-color: #092836;
-    opacity: .9;
+    background-color: var(--dnn-color-tertiary, #092836);
+    opacity: 0.9;
     width: 385px;
     padding: 50px;
     top: 30%;
     left: 315px;
-    opacity: .9;
+    opacity: 0.9;
     z-index: 99999;
-    color: #fff;
+    color: var(--dnn-color-tertiary-contrast, #fff);
     word-wrap: break-word;
     text-align: center;
     box-sizing: border-box;
 }
 
-#notification-dialog>div.buttonpanel {
+#notification-dialog > div.buttonpanel {
     width: 200px;
     margin: 20px auto 0 auto;
 }
@@ -204,7 +213,7 @@ a.plainbtn:active {
 }
 
 #notification-message {
-    color: white;
+    color: var(--dnn-color-tertiary-contrast, white);
     font-size: 15px;
     line-height: 22px;
 }
@@ -213,29 +222,29 @@ a.plainbtn:active {
     display: none;
 }
 
-#notification-dialog>img {
+#notification-dialog > img {
     width: 35px;
     height: 30px;
     margin-bottom: 10px;
 }
 
-#notification-dialog.errorMessage>.notify-check {
+#notification-dialog.errorMessage > .notify-check {
     display: none;
 }
 
-#notification-dialog.errorMessage>.notify-error {
+#notification-dialog.errorMessage > .notify-error {
     display: block;
     margin: 0 auto 10px;
     width: 22px;
     height: 30px;
 }
 
-#notification-dialog>.notify-error {
+#notification-dialog > .notify-error {
     display: none;
 }
 
 .confirmation-dialog-full-width-center {
-    left: 400px!important;
+    left: 400px !important;
 }
 
 #confirmation-dialog {
@@ -243,11 +252,11 @@ a.plainbtn:active {
     box-sizing: border-box;
     width: 485px;
     padding: 50px;
-    background-color: #002e47;
-    opacity: .9;
+    background-color: var(--dnn-color-tertiary, #002e47);
+    opacity: 0.9;
     z-index: 99999;
-    border-radius: 3px;
-    color: #fff;
+    border-radius: var(--dnn-controls-radius, 3px);
+    color: var(--dnn-color-tertiary-contrast, #fff);
     display: none;
     position: fixed;
     top: 30%;
@@ -256,142 +265,62 @@ a.plainbtn:active {
     display: none;
 }
 
-#confirmation-dialog>img {
+#confirmation-dialog > img {
     width: 30px;
     height: 30px;
     margin-bottom: 10px;
 }
 
-#confirmation-dialog>p {
-    color: white;
+#confirmation-dialog > p {
+    color: var(--dnn-color-tertiary-contrast, white);
     font-size: 15px;
     line-height: 22px;
 }
 
-#confirmation-dialog>div.buttonpanel {
+#confirmation-dialog > div.buttonpanel {
     width: 200px;
     margin: 20px auto 0 auto;
 }
 
-#confirmation-dialog>div.buttonpanel>a {
-    background-color: #fafafa;
-    color: #333;
+#confirmation-dialog > div.buttonpanel > a {
+    background-color: var(--dnn-color-neutral, #fafafa);
+    color: var(--dnn-color-neutral-contrast, #333);
     display: inline-block;
     padding: 7px 7px;
     cursor: pointer;
     width: 75px;
-    border-radius: 3px;
+    border-radius: var(--dnn-controls-radius, 3px);
     text-decoration: none;
     text-align: center;
     font-size: 12px;
-    border: 1px solid #ddd;
-    margin-left: 14px
+    border: 1px solid var(--dnn-color-neutral-dark, #ddd);
+    margin-left: 14px;
 }
 
-#confirmation-dialog>div.buttonpanel #cancelbtn {
-    margin-left: 4px
+#confirmation-dialog > div.buttonpanel #cancelbtn {
+    margin-left: 4px;
 }
 
-#confirmation-dialog>div.buttonpanel>a:hover {
-    background: #d9ecfa
+#confirmation-dialog > div.buttonpanel > a:hover {
+    background: var(--dnn-color-neutral-light, #d9ecfa);
 }
 
-#confirmation-dialog>div.buttonpanel>#confirmbtn {
-    background-color: #0281c6;
-    border: solid 1px #0281c6;
-    color: #FFF;
-    margin-left: 4px
+#confirmation-dialog > div.buttonpanel > #confirmbtn {
+    background-color: var(--dnn-color-primary, #0281c6);
+    border: solid 1px var(--dnn-color-primary, #0281c6);
+    color: var(--dnnc-color-primary-contrast, #fff);
+    margin-left: 4px;
 }
 
-#confirmation-dialog>div.buttonpanel #confirmbtn:hover {
-    background-color: #028ed9
+#confirmation-dialog > div.buttonpanel #confirmbtn:hover {
+    background-color: var(--dnn-color-primary-light, #028ed9);
 }
 
-#confirmation-dialog.full-width-mode, #notification-dialog.full-width-mode {
+#confirmation-dialog.full-width-mode,
+#notification-dialog.full-width-mode {
     left: 415px;
 }
 
-/* basic layout */
-
-.two-columns {
-    display: block;
-    width: 400px;
-    float: left;
-}
-
-.two-columns>h3 {
-    font-size: 20px;
-    margin: 3px 0 20px 0;
-    letter-spacing: .5px;
-    font-weight: normal;
-}
-
-.two-columns>ul.right.pager {
-    margin-right: 30px;
-}
-
-.two-columns>ul.right.pager>li>a {
-    margin-right: -3px;
-}
-
-.two-columns>ul.right.pager>li>a.prev {
-    border-right: none;
-}
-
-.three-columns {
-    display: block;
-    width: 266px;
-    float: left;
-    margin-bottom: 25px;
-}
-
-.four-columns {
-    display: block;
-    width: 199px;
-    float: left;
-}
-
-.four-columns>h4 {
-    display: block;
-    margin: 15px;
-}
-
-.four-columns>select {
-    margin: 0 10px 0 10px;
-    padding: 4px;
-    border: 1px solid #ddd;
-    width: 170px;
-}
-
-.four-columns>ul {
-    list-style-type: none;
-    margin: 15px;
-    padding: 5px 0 10px 0;
-    border: 1px solid #ddd;
-    border-radius: 2px;
-}
-
-.four-columns>ul>li {
-    list-style-type: none;
-    display: block;
-    padding: 8px 10px 0 10px;
-}
-
-.four-columns>ul>li>input[type="checkbox"] {
-    display: inline-block;
-    vertical-align: top;
-    margin-right: 5px;
-}
-
-.four-columns>ul>li>label {
-    display: inline-block;
-    vertical-align: top;
-    overflow: hidden;
-    max-width: 150px;
-}
-
-/* pager buttons */
-
 ul.pager {
     display: block;
     list-style-type: none;
@@ -399,41 +328,47 @@ ul.pager {
     padding: 0;
 }
 
-ul.pager>li {
+ul.pager > li {
     display: inline-block;
     list-style-type: none;
 }
 
-a.prev, a.next {
-    background-image: url('../images/left.png');
+a.prev,
+a.next {
+    background-image: url("../images/left.png");
     background-position: center center;
     background-repeat: no-repeat;
-    border: 1px solid #ddd;
+    border: 1px solid var(--dnn-color-surface, #ddd);
     width: 25px;
     height: 25px;
     display: block;
     cursor: pointer;
     border-radius: 2px;
-    background-color: #fff;
+    background-color: var(--dnn-color-background, #fff);
 }
 
 a.next {
-    background-image: url('../images/right.png');
+    background-image: url("../images/right.png");
 }
 
-a.prev.disabled, a.next.disabled {
-    opacity: 0.50;
+a.prev.disabled,
+a.next.disabled {
+    opacity: 0.5;
     cursor: default;
 }
 
-/* hover tooltip */
-
 .tag-menu {
-    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.75);
-    border-radius: 3px;
+    background: none repeat scroll 0 0
+        rgba(
+            var(--dnn-color-foreground-r, 255),
+            var(--dnn-color-foreground-g, 255),
+            var(--dnn-color-foreground-b, 255),
+            0.75
+        );
+    border-radius: var(--dnn-controls-radius, 3px);
     bottom: 100%;
     left: 10px;
-    color: #ddd;
+    color: var(--dnn-color-background, #ddd);
     display: none;
     font-size: 11px;
     padding: 10px 10px 10px 15px;
@@ -443,12 +378,12 @@ a.prev.disabled, a.next.disabled {
     z-index: 1000;
 }
 
-.tag-menu>p {
+.tag-menu > p {
     font-size: 11px;
     line-height: 1.5em;
 }
 
-.tag-menu>p>span {
+.tag-menu > p > span {
     display: block;
     float: right;
     font-size: 11px;
@@ -458,7 +393,7 @@ a.prev.disabled, a.next.disabled {
 .tag-menu:after {
     border-left: 7px solid rgba(0, 0, 0, 0);
     border-right: 7px solid rgba(0, 0, 0, 0);
-    border-top: 7px solid #000000;
+    border-top: 7px solid var(--dnn-color-foreground, #000);
     bottom: -7px;
     content: "";
     height: 0;
@@ -468,8 +403,6 @@ a.prev.disabled, a.next.disabled {
     width: 0;
 }
 
-/* error tooltip */
-
 span.dnnFormError {
     display: block;
     position: absolute !important;
@@ -480,9 +413,14 @@ span.dnnFormError {
     padding: 10px !important;
     border: none !important;
     border-radius: 3px !important;
-    background: rgba(255, 0, 0, 0.75) !important;
+    background: rgba(
+        var(--dnn-color-danger-r, 255),
+        var(--dnn-color-danger-g, 0),
+        var(--dnn-color-danger-b, 0),
+        0.75
+    ) !important;
     font-size: 12px;
-    color: #fff !important;
+    color: var(--dnn-color-danger-contrast, #fff) !important;
     font-weight: normal !important;
     text-align: left;
 }
@@ -497,234 +435,9 @@ span.dnnFormError:after {
     opacity: 0.75;
     border-left: 7px solid transparent;
     border-right: 7px solid transparent;
-    border-top: 7px solid red;
-}
-
-/* select */
-
-/* FLAT style */
-
-.flat, .flat div, .flat li, .flat div::after, .flat .carat, .flat .carat:after, .flat .selected::after, .flat:after {
-    -webkit-transition: all 150ms ease-in-out;
-    -moz-transition: all 150ms ease-in-out;
-    -ms-transition: all 150ms ease-in-out;
-    transition: all 150ms ease-in-out;
-}
-
-.flat .selected::after, .flat.scrollable div::after {
-    -webkit-pointer-events: none;
-    -moz-pointer-events: none;
-    -ms-pointer-events: none;
-    pointer-events: none;
-}
-
-/* WRAPPER */
-
-.flat {
-    position: relative;
-    width: 120px;
-    cursor: pointer;
-    background: #1c465e;
-    padding: 2px 0px 2px;
-    border-radius: 3px;
-    color: #000;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    border: 1px solid #5f899c;
-}
-
-.flat.open {
-    z-index: 2;
-}
-
-.flat:hover, .flat.focus {
-    background: #1c465e;
-}
-
-/* CARAT */
-
-.flat .carat, .flat .carat:after {
-    position: absolute;
-    right: 14px;
-    top: 50%;
-    margin-top: -3px;
-    border: 6px solid transparent;
-    border-top: 6px solid #FFF;
-    z-index: 1;
-    -webkit-transform-origin: 50% 20%;
-    -moz-transform-origin: 50% 20%;
-    -ms-transform-origin: 50% 20%;
-    transform-origin: 50% 20%;
-}
-
-.flat:hover .carat:after {
-    border-top-color: #f4f4f4;
-}
-
-.flat.focus .carat {
-    border-top-color: #f8f8f8;
-}
-
-.flat.focus .carat:after {
-    border-top-color: #0180d1;
-}
-
-.flat.open .carat {
-    -webkit-transform: rotate(180deg);
-    -moz-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    transform: rotate(180deg);
-}
-
-/* OLD SELECT (HIDDEN) */
-
-.flat .old {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 0;
-    width: 0;
-    overflow: hidden;
-}
-
-.flat select {
-    position: absolute;
-    left: 0px;
-    top: 0px;
-}
-
-.flat.touch select {
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-}
-
-/* SELECTED FEEDBACK ITEM */
-
-.flat .selected {
-    color: #f4f4f4;
-}
-
-.flat .selected, .flat li {
-    display: block;
-    font-size: 12px;
-    line-height: 1;
-    padding: 8px 12px;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.flat .selected::after {
-    content: '';
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 20px;
-    border-radius: 0 3px 3px 0;
-    box-shadow: inset -55px 0 25px -20px #1c465e;
-}
-
-.flat:hover .selected::after, .flat.focus .selected::after {
-    box-shadow: inset -55px 0 25px -20px #1c465e;
-}
-
-/* DROP DOWN WRAPPER */
-
-.flat div {
-    position: absolute;
-    height: 0;
-    left: 0;
-    right: 0;
-    top: 100%;
-    margin-top: 1px;
-    background: #1c465e;
-    overflow: hidden;
-    opacity: 0;
-    color: #aaa;
-    border-radius: 3px;
-}
-
-.flat:hover div {
-    background: #1c465e;
-    border-radius: 3px;
+    border-top: 7px solid var(--dnn-color-danger, red);
 }
 
-/* Height is adjusted by JS on open */
-
-.flat.open div {
-    opacity: 1;
-    z-index: 2;
-}
-
-/* FADE OVERLAY FOR SCROLLING LISTS */
-
-.flat.scrollable div::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 50px;
-    box-shadow: inset 0 -50px 30px -35px #00c384;
-}
-
-.flat.scrollable:hover div::after {
-    box-shadow: inset 0 -50px 30px -35px #00c384;
-}
-
-.flat.scrollable.bottom div::after {
-    opacity: 0;
-}
-
-/* DROP DOWN LIST */
-
-.flat ul {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    list-style: none;
-    overflow: hidden;
-    border-radius: 5px;
-}
-
-.flat.scrollable.open ul {
-    overflow-y: auto;
-}
-
-/* DROP DOWN LIST ITEMS */
-
-.flat li {
-    list-style: none;
-    padding: 8px 8px;
-    border-bottom: 1px solid #5f899c;
-}
-
-.flat li:last-child {
-    border-bottom: 0;
-}
-
-/* .focus class is also added on hover */
-
-.flat li.focus {
-    background: #1c465e;
-    position: relative;
-    z-index: 3;
-    color: #fff;
-}
-
-.flat li.active {
-    background: #1c465e;
-    color: #fff;
-}
-
-/* persona bar Menu*/
-
 .personabar {
     width: 80px;
     background-color: var(--dnn-color-pb-menu-background);
@@ -740,7 +453,6 @@ span.dnnFormError:after {
     width: 80px;
     height: 103px;
     background: var(--dnn-pb-menu-brand-background);
-    -ms-background-size: var(--dnn-pb-menu-brand-background-size);
     background-size: var(--dnn-pb-menu-brand-background-size);
     position: relative;
     border-bottom: 1px solid var(--dnn-color-pb-menu-divider);
@@ -766,24 +478,24 @@ span.dnnFormError:after {
     position: absolute;
     bottom: 8px;
     width: 50px;
-    background-color: #21a3da;
-    border-radius: 3px;
-    color: #fff;
+    background-color: var(--dnn-color-tertiary-light, #21a3da);
+    border-radius: var(--dnn-controls-radius, 3px);
+    color: var(--dnn-color-tertiary-contrast, #fff);
     display: block;
     padding: 2px;
 }
 
 .personabar .personabarLogo a.update.critical {
-    background-color: #D63333;
+    background-color: var(--dnn-color-danger, #d63333);
 }
 
 .personabar .personabarLogo a.update.normal-update {
-    color: #21A3DA;
+    color: var(--dnn-color-tertiary-light, #21a3da);
     display: block;
 }
 
 .personabar .personabarLogo a.update.critical-update {
-    color: #D63333;
+    color: var(--dnn-color-danger, #d63333);
     display: block;
 }
 
@@ -792,7 +504,7 @@ span.dnnFormError:after {
     padding: 0;
 }
 
-.personabarnav>li {
+.personabarnav > li {
     list-style-type: none;
     margin: 0;
     padding: 17px 16px;
@@ -800,21 +512,23 @@ span.dnnFormError:after {
     text-align: center;
     background-repeat: repeat-x;
     background-position: -8px 10px;
-    color: #737171;
+    color: var(--dnn-color-tertiary-light, #737171);
     font-weight: 600;
     position: relative;
     height: 80px;
-    transition: background-color 200ms linear, color 200ms linear;
+    transition:
+        background-color 200ms linear,
+        color 200ms linear;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 
-.personabarnav>li>span {
+.personabarnav > li > span {
     display: none;
 }
 
-.personabarnav>li>span.icon-loader {
+.personabarnav > li > span.icon-loader {
     display: inline-block;
     width: 38px;
     height: 38px;
@@ -823,71 +537,76 @@ span.dnnFormError:after {
     vertical-align: top;
 }
 
-.personabarnav>li>span.icon-loader img {
+.personabarnav > li > span.icon-loader img {
     width: 100%;
     height: 100%;
     vertical-align: top;
 }
 
-.personabarnav>li>span.icon-loader svg {
-    fill: #868484;
+.personabarnav > li > span.icon-loader svg {
+    fill: var(--dnn-color-neutral, #868484);
 }
 
-.personabarnav>li>span.icon-loader svg .back {
+.personabarnav > li > span.icon-loader svg .back {
     fill: var(--dnn-color-pb-menu-icon-background);
 }
 
-.personabarnav>li>span.icon-loader svg .main {
+.personabarnav > li > span.icon-loader svg .main {
     fill: var(--dnn-color-pb-menu-icon);
 }
 
-.personabarnav>li:hover>span.icon-loader svg, .personabarnav>li.active>span.icon-loader svg, .personabarnav>li.selected>span.icon-loader svg,
-.personabarnav>li:hover>span.icon-loader svg .main, .personabarnav>li.active>span.icon-loader svg .main, .personabarnav>li.selected>span.icon-loader svg .main {
-    fill: #FFFFFF;
+.personabarnav > li:hover > span.icon-loader svg,
+.personabarnav > li.active > span.icon-loader svg,
+.personabarnav > li.selected > span.icon-loader svg,
+.personabarnav > li:hover > span.icon-loader svg .main,
+.personabarnav > li.active > span.icon-loader svg .main,
+.personabarnav > li.selected > span.icon-loader svg .main {
+    fill: var(--dnn-color-background, #fff);
 }
 
-.personabarnav>li.pending>span.icon-loader svg {
-    fill: #9FDBF0;
+.personabarnav > li.pending > span.icon-loader svg {
+    fill: var(--dnn-color-tertiary-light, #9fdbf0);
 }
 
-.personabarnav>li.btn_panel.disabled {
+.personabarnav > li.btn_panel.disabled {
     cursor: default;
 }
 
-.personabarnav>li.btn_panel.disabled:hover {
+.personabarnav > li.btn_panel.disabled:hover {
     background-position: -8px 10px;
-    color: #6a6d6d;
+    color: var(--dnn-color-neutral, #6a6d6d);
 }
 
-.personabarnav>li:hover, .personabarnav>li.active {
-    color: #fff;
+.personabarnav > li:hover,
+.personabarnav > li.active {
+    color: var(--dnn-color-tertiary-contrast, #fff);
     background-color: var(--dnn-color-pb-menu-background-hover);
     border-right: none !important;
 }
 
-.personabarnav>li.pending {
-    border-right: 3px solid #9FDBF0;
+.personabarnav > li.pending {
+    border-right: var(--dnn-controls-radius, 3px) solid
+        var(--dnn-color-tertiary-light, #9fdbf0);
 }
 
-.personabarnav>li#Edit {
+.personabarnav > li#Edit {
     border-top: 1px solid var(--dnn-color-pb-menu-divider);
 }
 
-.personabarnav>li#Edit.selected {
-    color: #737171;
+.personabarnav > li#Edit.selected {
+    color: var(--dnn-color-neutral, #737171);
     background-color: transparent;
 }
 
-.personabarnav>li#Edit .editmode-tooltip {
+.personabarnav > li#Edit .editmode-tooltip {
     position: absolute;
     top: 20px;
     left: 64px;
     width: 256px;
     min-height: 80px;
-    border: 1px solid #ccc;
-    border: 1px solid rgba(64, 64, 64, 0.7);
-    background-color: #fff;
-    color: #000;
+    border: 1px solid var(--dnn-color-surface-dark, #ccc);
+    background-color: var(--dnn-color-surface, #fff);
+    color: var(--dnn-color-surface-contrast, #000);
     padding: 10px;
     box-sizing: border-box;
     display: none;
@@ -895,7 +614,7 @@ span.dnnFormError:after {
     cursor: default;
 }
 
-.personabarnav>li#Edit:hover .editmode-tooltip {
+.personabarnav > li#Edit:hover .editmode-tooltip {
     display: block;
     animation: tooltip 1000ms forwards;
 }
@@ -905,10 +624,12 @@ span.dnnFormError:after {
         display: none;
         opacity: 0;
     }
+
     1% {
         display: block;
         opacity: 0;
     }
+
     100% {
         display: block;
         opacity: 1;
@@ -916,71 +637,73 @@ span.dnnFormError:after {
     }
 }
 
-.personabarnav>li#Edit .editmode-tooltip>span {
+.personabarnav > li#Edit .editmode-tooltip > span {
     display: block;
     text-align: left;
     font-size: 12px;
 }
 
-.personabarnav>li#Edit .editmode-tooltip .tooltip-title {
-    color: #0a85c3;
+.personabarnav > li#Edit .editmode-tooltip .tooltip-title {
+    color: var(--dnn-color-tertiary-light, #0a85c3);
 }
 
-.personabarnav>li#Edit.locked {
+.personabarnav > li#Edit.locked {
     background-color: transparent;
 }
 
-.personabarnav>li#Edit.locked svg {
-    fill: #79bfdb;
+.personabarnav > li#Edit.locked svg {
+    fill: var(--dnn-color-tertiary-light, #79bfdb);
 }
 
-.personabarnav>li#Edit.locked svg .back {
-    fill: #0a85c3;
+.personabarnav > li#Edit.locked svg .back {
+    fill: var(--dnn-color-tertiary, #0a85c3);
 }
 
-.personabarnav>li#Edit.locked svg .main {
-    fill: #fff
+.personabarnav > li#Edit.locked svg .main {
+    fill: var(--dnn-color-tertiary-contrast, #fff);
 }
 
-.personabarnav>li#Edit.disabled svg {
+.personabarnav > li#Edit.disabled svg {
     visibility: hidden;
 }
 
-.personabarnav>li#showsite {
-    background: url('../images/close_thin.svg') no-repeat center center;
+.personabarnav > li#showsite {
+    background: url("../images/close_thin.svg") no-repeat center center;
     position: absolute;
     padding: 0;
     width: 12px;
     height: 12px;
     left: 921px;
     top: 9px;
-    border: none;
+    border: 0;
     display: none;
 }
 
-.personabarnav>li#showsite:hover {
-    background-image: url('../images/close_thin-hover.svg')
+.personabarnav > li#showsite:hover {
+    background-image: url("../images/close_thin-hover.svg");
 }
 
-.personabarnav>li#showsite.full-width-mode {
+.personabarnav > li#showsite.full-width-mode {
     left: 1221px;
 }
 
-.personabarnav>li#Logout, .personabarnav>li#Edit {
+.personabarnav > li#Logout,
+.personabarnav > li#Edit {
     width: 100%;
 }
 
-.personabarnav>li#Logout {
+.personabarnav > li#Logout {
     display: none;
 }
 
 @media all and (min-height: 680px) {
-    .personabarnav>li#Logout {
+    .personabarnav > li#Logout {
         bottom: 80px;
         position: absolute;
     }
-    .personabarnav>li#Edit {
-        bottom: 0px;
+
+    .personabarnav > li#Edit {
+        bottom: 0;
         position: absolute;
     }
 }
@@ -988,73 +711,85 @@ span.dnnFormError:after {
 .hovermenu {
     position: absolute;
     left: 80px;
-    padding: 0 0px 42px 37px;
+    padding: 0 0 42px 37px;
     background-color: var(--dnn-color-pb-menu-background-hover);
     display: none;
-    /* display: none; IE not apply list-style-type: none; with this active
-       it will be applied in js
-     */
     top: -1px;
     width: 200px;
     box-sizing: border-box;
 }
 
-.hovermenu>label {
+.hovermenu > label {
     height: 80px;
     line-height: 80px;
     display: block;
     text-align: left;
     text-transform: uppercase;
-    color: #FFF;
+    color: var(--dnn-color-tertiary-contrast, #fff);
 }
 
-.hovermenu>ul {
+.hovermenu > ul {
     margin: 0;
     padding: 0;
 }
 
-.hovermenu>ul>li {
+.hovermenu > ul > li {
     cursor: pointer;
     font-family: pb_semibold, arial;
     font-size: 14px;
     font-weight: 600;
     margin-top: 12px;
     text-align: left;
-    color: #868484;
+    color: rgba(
+        var(--dnn-color-tertiary-contrast-r, 255),
+        var(--dnn-color-tertiary-contrast-g, 255),
+        var(--dnn-color-tertiary-contrast-b, 255),
+        0.5
+    );
 }
 
-.hovermenu>ul>li:first-child {
+.hovermenu > ul > li:first-child {
     margin-top: 0;
 }
 
-.hovermenu>ul>li.disabled {
+.hovermenu > ul > li.disabled {
     cursor: default;
 }
 
-.hovermenu>ul>li.disabled:hover {
-    color: #c8c8c8;
+.hovermenu > ul > li.disabled:hover {
+    color: var(--dnn-color-neutral, #c8c8c8);
 }
 
-.hovermenu>ul>li:hover {
-    color: #fff;
+.hovermenu > ul > li:hover {
+    color: var(--dnn-color-tertiary-contrast, #fff);
 }
 
-.hovermenu>ul>li.selected {
-    color: white;
+.hovermenu > ul > li.selected {
+    color: var(--dnn-color-tertiary-contrast, white);
     cursor: default;
 }
 
-.hovermenu>ul>li.pending {
-    color: #9FDBF0;
+.hovermenu > ul > li.pending {
+    color: rgba(
+        var(--dnn-color-tertiary-contrast-r, 255),
+        var(--dnn-color-tertiary-contrast-g, 255),
+        var(--dnn-color-tertiary-contrast-b, 255),
+        0.3
+    );
 }
 
-.hovermenu>ul>li:first-child {
+.hovermenu > ul > li:first-child {
     margin-top: 0;
 }
 
-.hovermenu>ul>li.highligthedItem {
-    background-color: #01161E;
-    color: #787878;
+.hovermenu > ul > li.highligthedItem {
+    background-color: var(--dnn-color-tertiary-dark, #01161e);
+    color: rgba(
+        var(--dnn-color-tertiary-contrast-r, 255),
+        var(--dnn-color-tertiary-contrast-g, 255),
+        var(--dnn-color-tertiary-contrast-b, 255),
+        0.4
+    );
     margin-left: -18px;
     padding-left: 18px;
     margin-top: 0;
@@ -1062,25 +797,30 @@ span.dnnFormError:after {
     margin-right: -24px;
 }
 
-.hovermenu>ul>li.highligthedItem:last-child {
+.hovermenu > ul > li.highligthedItem:last-child {
     margin-bottom: -25px;
     padding-bottom: 25px;
     border-radius: 3px;
 }
 
-.hovermenu>ul>li.highligthedItem:hover {
-    color: #ffffff;
+.hovermenu > ul > li.highligthedItem:hover {
+    color: var(--dnn-color-tertiary-contrast, #fff);
 }
 
-.hovermenu>ul>li.highligthedItem.nonActive {
+.hovermenu > ul > li.highligthedItem.nonActive {
     cursor: default;
 }
 
-.hovermenu>ul>li.highligthedItem.nonActive:hover {
-    color: #787878;
+.hovermenu > ul > li.highligthedItem.nonActive:hover {
+    color: rgba(
+        var(--dnn-color-tertiary-contrast-r, 255),
+        var(--dnn-color-tertiary-contrast-g, 255),
+        var(--dnn-color-tertiary-contrast-b, 255),
+        0.4
+    );
 }
 
-.hovermenu>ul>li.itemsSeparator {
+.hovermenu > ul > li.itemsSeparator {
     margin-top: 20px;
     padding-top: 20px;
 }
@@ -1093,37 +833,39 @@ span.dnnFormError:after {
     width: 491px;
 }
 
-.btn_panel.two-columns-menu .hovermenu>ul, .btn_panel.three-columns-menu .hovermenu>ul {
+.btn_panel.two-columns-menu .hovermenu > ul,
+.btn_panel.three-columns-menu .hovermenu > ul {
     width: 163px;
     float: left;
 }
 
-.btn_panel.two-columns-menu .hovermenu>ul:first-of-type, .btn_panel.three-columns-menu .hovermenu>ul:first-of-type {
+.btn_panel.two-columns-menu .hovermenu > ul:first-of-type,
+.btn_panel.three-columns-menu .hovermenu > ul:first-of-type {
     width: 163px;
 }
 
 .socialpanel {
-    background-color: #fafafa;
+    background-color: var(--dnn-color-surface-light, #fafafa);
     min-height: 100%;
     width: 860px;
     left: -860px;
-    top: 0px;
+    top: 0;
     position: absolute;
     z-index: 999;
-    border-right: 1px solid #eee;
+    border-right: 1px solid var(--dnn-color-surface, #eee);
     display: none;
 }
 
 .socialpanel-placeholder {
-    background-color: #fafafa;
+    background-color: var(--dnn-color-surface-light, #fafafa);
     width: 861px;
     left: 80px;
-    top: 0px;
-    bottom: 0px;
+    top: 0;
+    bottom: 0;
     position: fixed;
     display: none;
     z-index: 999;
-    border-right: 1px solid #eee;
+    border-right: 1px solid var(--dnn-color-surface, #eee);
 }
 
 #personaBar-loadingbar {
@@ -1134,11 +876,11 @@ span.dnnFormError:after {
     width: 860px;
     height: 4px;
     display: none;
-    background-color: #fafafa;
+    background-color: var(--dnn-color-surface-light, #fafafa);
 }
 
-#personaBar-loadingbar>div {
-    background-color: #21A3Da;
+#personaBar-loadingbar > div {
+    background-color: var(--dnn-color-tertiary-light, #21a3da);
     position: absolute;
     top: 0;
     left: 0;
@@ -1146,17 +888,17 @@ span.dnnFormError:after {
     box-sizing: border-box;
 }
 
-#personaBar-loadingbar>span {
+#personaBar-loadingbar > span {
     position: absolute;
     top: 3px;
     left: 10px;
     font-size: 13px;
-    color: white;
+    color: var(--dnn-color-tertiary-contrast, white);
     z-index: 2;
     line-height: 16px;
 }
 
-#personaBar-loadingbar>#close-load-error {
+#personaBar-loadingbar > #close-load-error {
     cursor: pointer;
     position: absolute;
     width: 13px;
@@ -1166,24 +908,22 @@ span.dnnFormError:after {
     display: none;
 }
 
-#personaBar-loadingbar>div.load-error {
-    background-color: #EA2134;
+#personaBar-loadingbar > div.load-error {
+    background-color: var(--dnn-color-danger, #ea2134);
 }
 
 .socialmask {
-    background-color: #000;
+    background-color: var(--dnn-color-foregroud, #000);
     width: 100%;
     height: 100%;
     position: fixed;
-    top: 0px;
-    left: 0px;
+    top: 0;
+    left: 0;
     z-index: 99;
     display: none;
     opacity: 0;
 }
 
-/* PANEL HEADER */
-
 .ie .socialpanelheader {
     position: relative;
 }
@@ -1193,27 +933,28 @@ span.dnnFormError:after {
     position: absolute;
     width: 860px;
     z-index: 1001;
-    background-color: #FFF;
+    background-color: var(--dnn-color-background, #fff);
     min-height: 103px;
     -webkit-box-sizing: border-box !important;
     -moz-box-sizing: border-box !important;
     box-sizing: border-box !important;
-    box-shadow: 0 1px 2px -1px rgba(0, 0, 0, .2);
+    box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2);
 }
 
-.socialpanelheader>span {
-    color: #b2aeae;
+.socialpanelheader > span {
+    color: var(--dnn-color-neutral, #b2aeae);
     text-transform: uppercase;
     display: block;
     font-family: pb_semibold;
     letter-spacing: 2px;
 }
 
-.socialpanelheader>.qaTooltip {
+.socialpanelheader > .qaTooltip {
     float: left;
 }
 
-.socialpanelheader>.qaTooltip>h3.title, .socialpanelheader>h3 {
+.socialpanelheader > .qaTooltip > h3.title,
+.socialpanelheader > h3 {
     overflow: hidden;
     max-width: 495px;
     text-overflow: ellipsis;
@@ -1227,7 +968,7 @@ span.dnnFormError:after {
     font-weight: normal;
 }
 
-.socialpanelheader>.qaTooltip>.tag-menu {
+.socialpanelheader > .qaTooltip > .tag-menu {
     position: fixed;
     top: 75px;
     left: 116px;
@@ -1237,69 +978,79 @@ span.dnnFormError:after {
     word-wrap: break-word;
 }
 
-.socialpanelheader>.qaTooltip>.tag-menu:after {
-    border-bottom: 7px solid #000000;
-    border-top: none;
+.socialpanelheader > .qaTooltip > .tag-menu:after {
+    border-bottom: 7px solid var(--dnn-color-foreground, #000);
+    border-top: 0;
     left: 10%;
     bottom: auto;
     top: -7px;
 }
 
-@media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (min-width: 768px) and (max-width: 1024px) {
-    .socialpanelheader>h3.title-small {
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px),
+    only screen and (min-width: 768px) and (max-width: 1024px) {
+    .socialpanelheader > h3.title-small {
         font-size: 20px !important;
     }
-    .socialpanelheader>div.xtra-margin-top {
+
+    .socialpanelheader > div.xtra-margin-top {
         margin-top: 23px !important;
     }
-    #dashboard .socialpanelheader, #dashboard-header.socialpanelheader {
+
+    #dashboard .socialpanelheader,
+    #dashboard-header.socialpanelheader {
         padding: 24px 30px 4px 30px;
         height: 72px;
     }
-    #dashboard .socialpanelheader h3, #dashboard-header.socialpanelheader h3 {
+
+    #dashboard .socialpanelheader h3,
+    #dashboard-header.socialpanelheader h3 {
         font-size: 25px;
     }
-    #dashboard .socialpanelheader .dashboard-period, #dashboard-header.socialpanelheader .dashboard-period {
+
+    #dashboard .socialpanelheader .dashboard-period,
+    #dashboard-header.socialpanelheader .dashboard-period {
         margin-top: 8px;
     }
 }
 
 .socialpanelheader .personaBar-input.search {
-    background-image: url('../images/search.png');
+    background-image: url("../images/search.png");
     background-repeat: no-repeat;
     background-position: 95% center;
 }
 
 .socialpanelheader .personaBar-input.primary {
-    background-color: #0087c6;
-    border: none;
+    background-color: var(--dnn-color-primary, #0087c6);
+    border: 0;
     padding: 9px 16px;
-    color: #f4f4f4;
+    color: var(--dnn-color-primary-contrast, #f4f4f4);
     text-decoration: none;
 }
 
 .socialpanelheader .personaBar-input.primary:hover {
-    background-color: #2fa6eb;
+    background-color: var(--dnn-color-primary-light, #2fa6eb);
 }
 
 .socialpanelheader .personaBar-input.secondarybtn {
-    color: #0e181c !important;
+    color: var(--dnn-color-foreground, #0e181c) !important;
     background-color: #e4e4e4;
-    border: none;
+    border: 0;
     padding: 9px 16px;
-    color: #f4f4f4;
+    color: var(--dnn-color-background, #f4f4f4);
     text-decoration: none;
 }
 
 .socialpanelheader .personaBar-input.secondarybtn:hover {
-    background-color: #d9ecfa;
+    background-color: var(--dnn-color-background-dark, #d9ecfa);
 }
 
-.socialpanelheader .personaBar-input, input, select {
-    border: 1px solid #ddd;
+.socialpanelheader .personaBar-input,
+input,
+select {
+    border: 1px solid var(--dnn-color-backgorund-dark, #ddd);
     padding: 8px 16px;
     border-radius: 0;
-    background-color: #fff;
+    background-color: var(--dnn-color-background, #fff);
 }
 
 .socialpanelheader .personaBar-input {
@@ -1310,7 +1061,7 @@ span.dnnFormError:after {
     cursor: pointer;
 }
 
-.socialpanelheader>div.right-container {
+.socialpanelheader > div.right-container {
     float: right;
     margin-top: 5px;
     position: absolute;
@@ -1325,39 +1076,37 @@ span.dnnFormError:after {
     transform: translateY(-50%);
 }
 
-/* END - PANEL HEADER */
-
 .socialpanelbody {
     z-index: 1000;
     margin-top: 103px;
 }
 
-.socialpanelbody>div {
+.socialpanelbody > div {
     padding: 20px 30px 30px 30px;
 }
 
-.socialpanelbody>div h3 {
+.socialpanelbody > div h3 {
     font-size: 20px;
     margin-bottom: 20px;
     font-weight: normal;
-    letter-spacing: .5px;
+    letter-spacing: 0.5px;
 }
 
-.notification-from>.useravatar {
+.notification-from > .useravatar {
     margin-left: 0;
 }
 
-.notification-from>.username {
+.notification-from > .username {
     margin: 0 0 0 50px;
 }
 
-.notification-from>.username>label {
+.notification-from > .username > label {
     font-size: 14px;
     padding-top: 5px;
-    color: #000;
+    color: var(--dnn-color-foreground, #000);
 }
 
-.notification-from>.username>span {
+.notification-from > .username > span {
     margin-top: 5px;
     text-transform: uppercase;
 }
@@ -1367,16 +1116,16 @@ span.dnnFormError:after {
     margin: 15px 0 20px 0;
 }
 
-.notification-body>div {
+.notification-body > div {
     margin-top: 15px;
 }
 
-.notification-body>div:first-child {
+.notification-body > div:first-child {
     margin-top: 0;
 }
 
-.notification-body>div:last-child>a {
-    color: #0087c6;
+.notification-body > div:last-child > a {
+    color: var(--dnn-color-primary, #0087c6);
     text-decoration: none;
     display: inline-block;
     background-image: url(../images/icon-arrow-read-more.png);
@@ -1385,8 +1134,8 @@ span.dnnFormError:after {
     padding: 2px 14px 0 0;
 }
 
-.notification-body>div:last-child>a:hover {
-    color: #2fa6eb;
+.notification-body > div:last-child > a:hover {
+    color: var(--dnn-color-primary-light, #0087c6);
     text-decoration: underline;
 }
 
@@ -1405,73 +1154,76 @@ span.dnnFormError:after {
 
 .notification-footer {
     margin: 15px -15px -15px -15px;
-    background-color: rgba(0, 0, 0, 0.04);
+    background-color: rgba(
+        var(--dnn-color-foreground-r, 0),
+        var(--dnn-color-foreground-g, 0),
+        var(--dnn-color-foreground-b, 0),
+        0.04
+    );
     padding: 15px;
 }
 
-.notification-footer>span {
+.notification-footer > span {
     display: block;
     margin-right: 90px;
     font-family: pb_semibold;
     text-transform: uppercase;
 }
 
-.notification-footer>div.right {
+.notification-footer > div.right {
     width: 90px;
     margin: -15px;
 }
 
-.notification-footer>div.right>a {
+.notification-footer > div.right > a {
     width: 42px;
     height: 42px;
-    border: none;
+    border: 0;
     display: inline-block;
-    background-color: #fafafa;
+    background-color: var(--dnn-color-surface, #fafafa);
     margin-right: -2px;
 }
 
-.notification-footer>div.right>a.prev {
-    border-right: 2px solid #ccc;
+.notification-footer > div.right > a.prev {
+    border-right: 2px solid var(--dnn-color-surface-dark, #ccc);
 }
 
-/* tab inside social panel */
-
 ul.tabControl {
     list-style-type: none;
     margin: 0;
     padding: 0;
-    border: 1px solid #ddd;
-    border-bottom: none;
+    border: 1px solid var(--dnn-color-surface, #ddd);
+    border-bottom: 0;
     background-color: #eee;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
 }
 
-ul.tabControl>li {
+ul.tabControl > li {
     display: inline-block;
     padding: 8px 15px 8px 15px;
     cursor: pointer;
 }
 
-ul.tabControl>li.selected {
-    background-color: #fff;
-    color: #0996d8;
+ul.tabControl > li.selected {
+    background-color: var(--dnn-color-primary-contrast, #fff);
+    color: var(--dnn-color-primary, #0996d8);
 }
 
-ul.tabControl>li:first-child {
+ul.tabControl > li:first-child {
     border-top-left-radius: 5px;
 }
 
 .tabPanel {
-    border: 1px solid #ddd;
-    border-top: none;
+    border: 1px solid var(--dnn-color-backgorund-dark, #ddd);
+    border-top: 0;
     display: none;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
-    background-color: #fff;
+    background-color: var(--dnn-color-background, #fff);
 }
 
-.tabPanel>h4 {
+.tabPanel > h4 {
     display: block;
     padding: 20px 0 20px 14px;
     font-size: 20px;
@@ -1481,26 +1233,26 @@ ul.tabControl>li:first-child {
 
 .tabPanel .searchpanel {
     padding: 0 15px 15px 15px;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--dnn-color-backgorund-dark, #ddd);
 }
 
 .normalPanel {
-    border: 1px solid #ddd;
+    border: 1px solid var(--dnn-color-backgorund-dark, #ddd);
     border-radius: 5px;
-    background-color: #fff;
+    background-color: var(--dnn-color-background, #fff);
 }
 
 .normalPanel .searchpanel {
     padding: 15px;
-    border-bottom: 1px solid #ddd;
-    background: #fff;
+    border-bottom: 1px solid var(--dnn-color-backgorund-dark, #ddd);
+    background: var(--dnn-color-background, #fff);
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
 }
 
-.searchpanel>.searchbox {
+.searchpanel > .searchbox {
     padding: 8px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--dnn-color-backgorund-dark, #ddd);
     width: 250px;
     border-radius: 3px;
     display: inline-block;
@@ -1509,105 +1261,107 @@ ul.tabControl>li:first-child {
     background-position: 240px 8px;
 }
 
-.searchpanel>.filterbox {
+.searchpanel > .filterbox {
     padding: 8px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--dnn-color-backgorund-dark, #ddd);
     width: 250px;
     border-radius: 3px;
     display: inline-block;
     margin-left: 15px;
 }
 
-/* View iPad  - landscape */
-
-#personabar-panels.view-ipad.landscape>.socialpanel {
+#personabar-panels.view-ipad.landscape > .socialpanel {
     width: 700px;
 }
 
-#personabar-panels.view-ipad.landscape>.socialpanel .socialpanelheader {
+#personabar-panels.view-ipad.landscape > .socialpanel .socialpanelheader {
     width: 700px;
 }
 
-#personabar.view-ipad.landscape .personabarnav>li#showsite:not(.full-width-mode) {
+#personabar.view-ipad.landscape
+    .personabarnav
+    > li#showsite:not(.full-width-mode) {
     left: 761px;
 }
 
-/* View iPad  - Portrait */
-
-#personabar-panels.view-ipad.portrait>.socialpanel {
+#personabar-panels.view-ipad.portrait > .socialpanel {
     width: 500px;
 }
 
-#personabar-panels.view-ipad.portrait>.socialpanel .socialpanelheader {
+#personabar-panels.view-ipad.portrait > .socialpanel .socialpanelheader {
     width: 500px;
 }
 
-#personabar.view-ipad.portrait .personabarnav>li#showsite:not(.full-width-mode) {
+#personabar.view-ipad.portrait
+    .personabarnav
+    > li#showsite:not(.full-width-mode) {
     left: 561px;
 }
 
-/* customised modal dialog style */
-
 .ui-widget-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.65);
+    background: rgba(
+        var(--dnn-color-foreground-r, 0),
+        var(--dnn-color-foreground-g, 0),
+        var(--dnn-color-foreground-b, 0),
+        0.65
+    );
     z-index: 9999;
 }
 
 .dnnFormPopup {
     position: absolute;
     padding: 18px;
-    background: #fff;
+    background: var(--dnn-color-background, #fff);
     -webkit-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.75);
     box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.75);
     border-radius: 7px;
-    outline: none;
+    outline: 0;
     z-index: 100000;
 }
 
-/* Popup header */
-
 .dnnFormPopup .ui-dialog-titlebar {
     position: relative;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--dnn-color-background-dark, #ddd);
     font-size: 18px;
     margin: -18px -18px 0 -18px;
     padding: 22px 0 18px 22px;
-    background-color: #092836;
-    color: #ffffff;
-    border: none;
+    background-color: var(--dnn-color-tertiary, #092836);
+    color: var(--dnn-color-tertiary-contrast, #fff);
+    border: 0;
     cursor: move;
     font-weight: normal;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
 }
 
-div.ui-dialog-titlebar>.ui-dialog-titlebar-close {
+div.ui-dialog-titlebar > .ui-dialog-titlebar-close {
     display: block;
     position: absolute;
-    margin: 0px;
+    margin: 0;
     overflow: hidden;
     -webkit-border-radius: 12px;
     border-radius: 12px;
     background-position: 4px 4px;
-    border: 3px solid #fff;
+    border: 3px solid var(--dnn-color-tertiary-contrast, #fff);
     text-indent: -9999em;
     min-width: 0 !important;
     top: 20px;
     right: 22px;
-    background: #092836 url('../images/icon-close-dialog.png') no-repeat;
-    border: none;
+    background: var(--dnn-color-tertiary, #092836)
+        url("../images/icon-close-dialog.png") no-repeat;
+    border: 0;
     width: 20px;
     height: 20px;
-    outline: none;
+    outline: 0;
 }
 
-div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
-    background-color: #092836;
+div.ui-dialog-titlebar > .ui-dialog-titlebar-close:hover {
+    background-color: var(--dnn-color-tertiary, #092836);
     cursor: pointer;
 }
 
@@ -1618,9 +1372,9 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 .dnnFormPopup .ui-dialog-content {
     position: relative;
     border: 0;
-    padding: 0px;
+    padding: 0;
     overflow: auto;
-    background: #fff;
+    background: var(--dnn-color-tertiary-contrast, #fff);
     zoom: 1;
     margin: 0 -18px -18px -18px;
     border-bottom-left-radius: 5px;
@@ -1628,21 +1382,27 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 }
 
 .dnnFormPopup .ui-dialog-buttonpane {
-    margin: .5em 0 0 0;
-    padding: .3em 1em 0em 0em;
+    margin: 0.5em 0 0 0;
+    padding: 0.3em 1em 0 0;
     overflow: hidden;
     border-width: 1px 0 0 0;
     background-image: none;
     text-align: left;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid
+        rgba(
+            var(--dnn-color-tertiary-contrast-r, 255),
+            var(--dnn-color-tertiary-contrast-g, 255),
+            var(--dnn-color-tertiary-contrast-b, 255),
+            0.9
+        );
 }
 
 .dnnFormPopup .ui-dialog-buttonpane button {
-    margin: 0.5em 0.4em 0.5em 0em;
+    margin: 0.5em 0.4em 0.5em 0;
     padding: 0.5em 1em;
     cursor: pointer;
-    border: none;
-    outline: none;
+    border: 0;
+    outline: 0;
 }
 
 .dnnFormPopup .dnnDialog {
@@ -1650,7 +1410,8 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 }
 
 .dnnLoading {
-    background: #fff url(../../images/loading.gif) no-repeat center center;
+    background: var(--dnn-color-background, #fff) url(../../images/loading.gif)
+        no-repeat center center;
     position: absolute;
     z-index: 9999;
 }
@@ -1662,8 +1423,8 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     -webkit-border-radius: 11px;
     -moz-border-radius: 11px;
     border-radius: 11px;
-    background-color: #C8C8C8;
-    border: 1px solid #959695;
+    background-color: var(--dnn-color-neutral-light, #c8c8c8);
+    border: 1px solid var(--dnn-color-neutral, #959695);
     margin: 0;
     cursor: pointer;
     -webkit-transition: background 100ms linear;
@@ -1685,7 +1446,7 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     content: "Off";
     display: block;
     position: absolute;
-    color: #4B4E4F;
+    color: var(--dnn-color-neutral-dark, #4b4e4f);
     top: 3px;
     left: -30px;
     line-height: 15px;
@@ -1698,8 +1459,8 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     -webkit-border-radius: 11px;
     -moz-border-radius: 11px;
     border-radius: 11px;
-    background-color: #fff;
-    border: 1px solid #959695;
+    background-color: var(--dnn-color-foreground, #fff);
+    border: 1px solid var(--dnn-color-neutral, #959695);
     position: relative;
     top: -1px;
     left: -1px;
@@ -1713,8 +1474,8 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 }
 
 .dnnCheckbox.dnnCheckbox-checked {
-    background-color: #21A3DA;
-    border-color: #226f9b;
+    background-color: var(--dnn-color-primary, #21a3da);
+    border-color: var(--dnn-color-primary-dark, #226f9b);
 }
 
 .dnnCheckbox.dnnCheckbox-checked:after {
@@ -1723,53 +1484,80 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 
 .dnnCheckbox.dnnCheckbox-checked .mark {
     left: 24px;
-    border-color: #226f9b;
+    border-color: var(--dnn-color-primary-dark, #226f9b);
 }
 
 .dnnCheckbox .mark img {
     display: none;
 }
 
-/* MESSAGE STYLES */
-
 .dnnFormMessage {
     display: block;
     padding: 17px 18px;
     margin-bottom: 18px;
-    border: 1px solid rgba(2, 139, 255, 0.2);
-    /* blue */
-    background: rgba(2, 139, 255, 0.15);
-    /* blue */
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
+    background: rgba(
+        var(--dnn-color-info-r, 2),
+        var(--dnn-color-info-g, 139),
+        var(--dnn-color-info-b, 255),
+        0.15
+    );
+    border: 1px solid
+        rgba(
+            var(--dnn-color-info-r, 2),
+            var(--dnn-color-info-g, 139),
+            var(--dnn-color-info-b, 255),
+            0.5
+        );
+    border-radius: var(--dnn-controls-radius, 3px);
     max-width: 980px;
 }
 
-.dnnFormMessage.dnnFormError, .dnnFormMessage.dnnFormValidationSummary {
-    background-color: rgba(255, 0, 0, 0.15);
-    /* red */
-    border-color: rgba(255, 0, 0, 0.2);
-    /* red */
+.dnnFormMessage.dnnFormError,
+.dnnFormMessage.dnnFormValidationSummary {
+    background-color: rgba(
+        var(--dnn-color-danger-r, 255),
+        var(--dnn-color-danger-g, 0),
+        var(--dnn-color-danger-b, 0),
+        0.15
+    );
+    border-color: rgba(
+        var(--dnn-color-danger-r, 255),
+        var(--dnn-color-danger-g, 0),
+        var(--dnn-color-danger-b, 0),
+        0.5
+    );
 }
 
 .dnnFormMessage.dnnFormWarning {
-    background-color: rgba(255, 255, 0, 0.15);
-    /* yellow */
-    border-color: #CDB21F;
-    /* yellow */
+    background-color: rgba(
+        var(--dnn-color-warning-r, 255),
+        var(--dnn-color-warning-g, 0),
+        var(--dnn-color-warning-b, 0),
+        0.15
+    );
+    border-color: rgba(
+        var(--dnn-color-warning-r, 255),
+        var(--dnn-color-warning-g, 0),
+        var(--dnn-color-warning-b, 0),
+        0.5
+    );
 }
 
 .dnnFormMessage.dnnFormSuccess {
-    background-color: rgba(0, 255, 0, 0.15);
-    /* green */
-    border-color: rgba(0, 255, 0, 0.5);
-    /* green */
+    background-color: rgba(
+        var(--dnn-color-success-r, 255),
+        var(--dnn-color-success-g, 0),
+        var(--dnn-color-success-b, 0),
+        0.15
+    );
+    border-color: rgba(
+        var(--dnn-color-success-r, 255),
+        var(--dnn-color-success-g, 0),
+        var(--dnn-color-success-b, 0),
+        0.5
+    );
 }
 
-/* MESSAGE STYLES END */
-
-/* BREADCRUMB STYLES */
-
 .breadcrumbs-container {
     font-size: 0;
     line-height: 0;
@@ -1785,11 +1573,11 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     text-decoration: none;
     font-size: 14px;
     max-width: 20%;
-    color: #4B4E4F;
+    color: rgba(var(--dnn-color-foreground-r), var(--dnn-color-foreground-g), var(--dnn-color-foreground-b), 0.7);
 }
 
 .breadcrumbs-container div:hover {
-    color: #959695;
+    color: var(--dnn-color-foreground, black);
 }
 
 .breadcrumbs-container .more {
@@ -1805,20 +1593,20 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     background-image: url(../images/more_hover.svg);
 }
 
-.breadcrumbs-container>div:first-child:last-child {
+.breadcrumbs-container > div:first-child:last-child {
     width: 150px;
     margin-left: 0;
 }
 
-.breadcrumbs-container>div:first-child:not(:last-child) {
+.breadcrumbs-container > div:first-child:not(:last-child) {
     padding-right: 10px;
     position: relative;
     display: inline-block;
     cursor: default;
 }
 
-.breadcrumbs-container>div:not(:last-child)::after {
-    content: '';
+.breadcrumbs-container > div:not(:last-child)::after {
+    content: "";
     position: absolute;
     right: -15px;
     top: 0;
@@ -1829,7 +1617,7 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     background-position: center;
 }
 
-.breadcrumbs-container>div:not(:first-child):not(:last-child) {
+.breadcrumbs-container > div:not(:first-child):not(:last-child) {
     padding-right: 10px;
     position: relative;
     margin-left: 18px;
@@ -1837,8 +1625,8 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     cursor: default;
 }
 
-.breadcrumbs-container>div:last-child {
-    color: #1E88C3;
+.breadcrumbs-container > div:last-child {
+    color: var(--dnn-color-primary, #1e88c3);
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     text-decoration: none;
     font-size: 14px;
@@ -1847,45 +1635,42 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     margin-left: 18px;
 }
 
-.breadcrumbs-container div>span {
+.breadcrumbs-container div > span {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-/* BREADCRUMB STYLES END*/
-
-/* PREVIEW PAGE - Thumbnail */
-
 .pages-preview {
     display: none;
     position: fixed;
-    background-color: #fff;
+    background-color: var(--dnn-color-background, #fff);
     z-index: 1005;
     padding: 4px;
-    -webkit-box-shadow: 0px 0px 3px 1px rgba(192, 192, 192, 1);
-    -moz-box-shadow: 0px 0px 3px 1px rgba(192, 192, 192, 1);
-    box-shadow: 0px 0px 3px 1px rgba(192, 192, 192, 1);
+    box-shadow: 0 0 3px 1px var(--dnn-color-neutral, #c0c0c0);
 }
 
-.pages-preview:before, .pages-preview:after {
+.pages-preview:before,
+.pages-preview:after {
     content: "";
     display: block;
     position: absolute;
     left: -10px;
     top: 50%;
-    width: 0px;
-    height: 0px;
+    width: 0;
+    height: 0;
     border-style: solid;
     border-width: 9px 10px 9px 0;
-    border-color: transparent #fff transparent transparent;
+    border-color: transparent var(--dnn-color-foreground, #fff) transparent
+        transparent;
     transform: translate(0, -50%);
 }
 
 .pages-preview:before {
     left: -11px;
-    border-color: transparent #ccc transparent transparent;
+    border-color: transparent var(--dnn-color-foreground-dark, #ccc) transparent
+        transparent;
 }
 
 .pages-preview.top:before {
@@ -1906,7 +1691,7 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 }
 
 .CodeMirror {
-    border: 1px solid #e6e6e6;
+    border: 1px solid var(--dnn-color-surface, #e6e6e6);
 }
 
 .CodeMirror-gutters {
@@ -1915,12 +1700,11 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 
 .CodeMirror-simplescroll-vertical {
     background: none !important;
-    margin: 0px 5px 0px 0 !important;
+    margin: 0 5px 0 0 !important;
 }
 
 .CodeMirror-simplescroll-vertical div {
-    background-color: #808587 !important;
-    -ms-border-radius: 5px !important;
+    background-color: var(--dnn-color-surface-dark, #808587) !important;
     border-radius: 5px !important;
 }
 
@@ -1936,12 +1720,16 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(255, 255, 255, 0.7) url('../images/loading.gif') no-repeat center center;
+    background: rgba(
+            var(--dnn-color-background-r, 255),
+            var(--dnn-color-background-g, 255),
+            var(--dnn-color-background-b, 255),
+            0.7
+        )
+        url("../images/loading.gif") no-repeat center center;
     z-index: 99999;
 }
 
-/* SCROLL BAR Style */
-
 .jspContainer .jspPane {
     width: 100% !important;
     -webkit-box-sizing: border-box;
@@ -1949,7 +1737,8 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     box-sizing: border-box;
 }
 
-.jspVerticalBar, .jspHorizontalBar {
+.jspVerticalBar,
+.jspHorizontalBar {
     background: none !important;
 }
 
@@ -1961,7 +1750,8 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     height: 7px !important;
 }
 
-.jspVerticalBar .jspTrack .jspDrag, .jspHorizontalBar .jspTrack .jspDrag {
+.jspVerticalBar .jspTrack .jspDrag,
+.jspHorizontalBar .jspTrack .jspDrag {
     filter: alpha(opacity=50) !important;
     opacity: 0.5 !important;
 }
@@ -1981,7 +1771,7 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     right: 0;
     width: 11px;
     height: 100%;
-    background: #ccc;
+    background: var(--dnn-color-neutral, #ccc);
 }
 
 .jspHorizontalBar {
@@ -1993,7 +1783,8 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     background: #ccc;
 }
 
-.jspVerticalBar *, .jspHorizontalBar * {
+.jspVerticalBar *,
+.jspHorizontalBar * {
     margin: 0;
     padding: 0;
 }
@@ -2038,21 +1829,17 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     top: 0;
     left: 0;
     border-radius: 3px 3px 3px 3px;
-    -webkit-border-radius: 3px 3px 3px 3px;
-    opacity: .75;
-    background: #000;
+    opacity: 0.75;
+    background: var(--dnn-color-foreground, #000);
     cursor: pointer;
 }
 
-.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
+.jspHorizontalBar .jspTrack,
+.jspHorizontalBar .jspDrag {
     float: left;
     height: 5px;
 }
 
-/* SCROLL BAR Style END */
-
-/* Popup Style Start */
-
 .hoverSummaryMenu {
     position: absolute;
     width: 200px;
@@ -2082,6 +1869,7 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
         opacity: 0;
         visibility: hidden;
     }
+
     100% {
         opacity: 1;
         visibility: visible;
@@ -2097,7 +1885,7 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 .hoverSummaryMenu ul li {
     font-family: roboto, Arial;
     font-size: 11px;
-    color: #fff;
+    color: var(--dnn-color-tertiary-contrast, #fff);
     margin-top: 18px;
     cursor: default;
     padding-bottom: 6px;
@@ -2108,14 +1896,15 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     padding-left: 0.5em;
 }
 
-.hoverSummaryMenu ul li span, .hoverSummaryMenu ul li label {
+.hoverSummaryMenu ul li span,
+.hoverSummaryMenu ul li label {
     display: block;
     line-height: 13px;
     word-break: break-all;
 }
 
 .hoverSummaryMenu ul li a {
-    color: #fff;
+    color: var(--dnn-color-tertiary-contrast, #fff);
     text-decoration: none;
 }
 
@@ -2124,13 +1913,11 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     color: var(--dnn-color-pb-menu-text-highlight);
     padding: 2px 0 5px 0;
     text-transform: uppercase;
-    -moz-word-break: break-all;
-    -o-word-break: break-all;
     word-break: break-all;
 }
 
 .hoverSummaryMenu ul li:last-child label {
-    border-bottom: none;
+    border-bottom: 0;
     padding-bottom: 0;
 }
 
@@ -2159,15 +1946,23 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     margin-top: 36px;
 }
 
-.server-summary li.doc-center a, .server-summary li.logout {
+.server-summary li.doc-center a,
+.server-summary li.logout {
     font-size: 14px;
-    color: #6F7273;
+    color: rgba(
+        var(--dnn-color-tertiary-contrast-r, 111),
+        var(--dnn-color-tertiary-contrast-g, 114),
+        var(--dnn-color-tertiary-contrast-b, 115),
+        0.9
+    );
     text-decoration: none;
     cursor: pointer;
 }
 
-.server-summary li.update a:hover, .server-summary li.doc-center a:hover, .server-summary li.logout:hover {
-    color: #FFF;
+.server-summary li.update a:hover,
+.server-summary li.doc-center a:hover,
+.server-summary li.logout:hover {
+    color: var(--dnn-color-tertiary-contrast, #fff);
 }
 
 .server-summary li.logout {
@@ -2175,43 +1970,38 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 }
 
 .server-summary li.new-version-info.border.critical {
-    border-color: #D63333;
+    border-color: var(--dnn-color-danger, #d63333);
 }
 
 .server-summary li.new-version-info.critical label {
-    color: #D63333;
+    color: var(--dnn-color-danger, #d63333);
 }
 
 .server-summary li.new-version-info span.update-critical {
     font-size: 10px;
-    background-color: #D63333;
-    color: white;
+    background-color: var(--dnn-color-danger, #d63333);
+    color: var(--dnn-color-danger-contrast, white);
     text-transform: uppercase;
-    border-radius: 4px;
+    border-radius: var(--dnn-controls-radius, 4px);
     padding: 2px 4px;
     float: right;
 }
 
-/* Popup Style END */
-
-/* Dropdown Style */
-
 .socialpanelbody select.pb-dropdown {
-    border: 1px solid #959695 !important;
+    border: 1px solid var(--dnn-color-neutral, #959695) !important;
     border-radius: 0 !important;
 }
 
-.socialpanelbody select.pb-dropdown[disabled], .pb-dropdown.disabled {
-    border: 1px solid #e5e7e6 !important;
-    background: #e5e7e6;
-    color: #959695;
+.socialpanelbody select.pb-dropdown[disabled],
+.pb-dropdown.disabled {
+    border: 1px solid var(--dnn-color-neutral-light, #e5e7e6) !important;
+    background: var(--dnn-color-neutral-light, #e5e7e6);
+    color: var(--dnn-color-neutral, #959695);
     cursor: not-allowed;
 }
 
-.pb-dropdown .selected::after, .pb-dropdown.scrollable div::after {
-    -webkit-pointer-events: none;
-    -moz-pointer-events: none;
-    -ms-pointer-events: none;
+.pb-dropdown .selected::after,
+.pb-dropdown.scrollable div::after {
     pointer-events: none;
 }
 
@@ -2219,16 +2009,16 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     position: relative;
     display: inline-block;
     cursor: pointer;
-    border: 1px solid #959695;
+    border: 1px solid var(--dnn-color-neutral, #959695);
     box-sizing: border-box;
 }
 
 .pb-dropdown.open {
-    border: 1px solid #1e88c3;
+    border: 1px solid var(--dnn-color-primary, #1e88c3);
 }
 
 .pb-dropdown:after {
-    content: '';
+    content: "";
     position: absolute;
     right: 3px;
     bottom: 3px;
@@ -2238,13 +2028,13 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 }
 
 .pb-dropdown .carat {
-    content: '';
+    content: "";
     position: absolute;
     right: 10px;
     top: 14px;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 5px solid #6f7273;
+    border-top: 5px solid var(--dnn-color-neutral-dark, #6f7273);
     -webkit-transform-origin: 50% 20%;
     -moz-transform-origin: 50% 20%;
     -ms-transform-origin: 50% 20%;
@@ -2252,7 +2042,7 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 }
 
 .pb-dropdown.open .carat {
-    border-top-color: #1E88C3;
+    border-top-color: var(--dnn-color-primary, #1e88c3);
 }
 
 .pb-dropdown .old {
@@ -2266,8 +2056,8 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 
 .pb-dropdown select {
     position: absolute;
-    left: 0px;
-    top: 0px;
+    left: 0;
+    top: 0;
 }
 
 .pb-dropdown.touch .old {
@@ -2281,7 +2071,8 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     opacity: 0;
 }
 
-.pb-dropdown .selected, .pb-dropdown li {
+.pb-dropdown .selected,
+.pb-dropdown li {
     display: block;
     line-height: 1;
     padding: 9px 12px;
@@ -2291,11 +2082,11 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 }
 
 .pb-dropdown li.active {
-    color: #1E88C3;
+    color: var(--dnn-color-primary, #1e88c3);
 }
 
 .pb-dropdown li {
-    color: #6F7273;
+    color: var(--dnn-color-foreground, #6f7273);
     font-weight: normal;
     list-style: none;
     padding: 0 12px;
@@ -2303,7 +2094,7 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     line-height: 28px;
 }
 
-.pb-dropdown>div {
+.pb-dropdown > div {
     position: absolute;
     width: 100%;
     height: 0;
@@ -2312,9 +2103,9 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
     margin-top: -1px;
     overflow: hidden;
     opacity: 0;
-    background: #fff;
-    border: 1px solid #C8C8C8;
-    border-top: none;
+    background: var(--dnn-color-background, #fff);
+    border: 1px solid var(--dnn-color-background-dark, #c8c8c8);
+    border-top: 0;
     top: 33px;
     z-index: 3;
 }
@@ -2324,7 +2115,7 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 }
 
 .pb-dropdown.scrollable div::after {
-    content: '';
+    content: "";
     position: absolute;
     left: 0;
     right: 0;
@@ -2356,64 +2147,60 @@ div.ui-dialog-titlebar>.ui-dialog-titlebar-close:hover {
 }
 
 .pb-dropdown li.focus {
-    background: #EFF0F0;
+    background: #eff0f0;
     position: relative;
-    color: #1E88C3;
+    color: var(--dnn-color-primary, #1e88c3);
 }
 
-/* Dropdown Style END */
-
 .monaco-editor .view-lines * {
     font-family: inherit;
 }
 
-
-
-/* IE10+ specific personabar styles go here */
-@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+@media screen and (-ms-high-contrast: active),
+    screen and (-ms-high-contrast: none) {
     .personabar {
-        background-color: #0e2936;
+        background-color: var(--dnn-color-tertiary, #0e2936);
     }
 
-        .personabar .personabarLogo {
-            background: url("../images/Logo.svg") no-repeat center center;
-            border-bottom: 1px solid #1e485e;
-        }
+    .personabar .personabarLogo {
+        background: url("../images/Logo.svg") no-repeat center center;
+        border-bottom: 1px solid var(--dnn-color-tertiary-light, #1e485e);
+    }
 
-            .personabar .personabarLogo:hover {
-                background-color: #0b1c24;
-            }
+    .personabar .personabarLogo:hover {
+        background-color: var(--dnn-color-tertiary-dark, #0b1c24);
+    }
 
     .personabarnav > li > span.icon-loader svg .back {
-        fill: #0b1c24;
+        fill: var(--dnn-color-tertiary-dark, #0b1c24);
     }
 
     .personabarnav > li > span.icon-loader svg .main {
-        fill: #3c7a9a;
+        fill: var(--dnn-color-tertiary-light, #3c7a9a);
     }
 
     .personabarnav > li:hover,
     .personabarnav > li.active {
-        background-color: #0b1c24;
+        background-color: var(--dnn-color-tertiary-dark, #0b1c24);
     }
 
     .personabarnav > li#Edit {
-        border-top: 1px solid #1e485e;
+        border-top: 1px solid var(--dnn-color-tertiary-light, #1e485e);
     }
 
     .hovermenu {
-        background-color: #0b1c24;
+        background-color: var(--dnn-color-tertiary-dark, #0b1c24);
     }
 
     .hoverSummaryMenu {
-        background-color: #0b1c24;
+        background-color: var(--dnn-color-tertiary-dark, #0b1c24);
     }
 
-        .hoverSummaryMenu ul li.border {
-            border-left: 1px solid #3c7a9a;
-        }
+    .hoverSummaryMenu ul li.border {
+        border-left: 1px solid var(--dnn-color-tertiary-light, #3c7a9a);
+    }
 
-        .hoverSummaryMenu ul li label {
-            color: #3c7a9a;
-        }
+    .hoverSummaryMenu ul li label {
+        color: var(--dnn-color-tertiary-light, #3c7a9a);
+    }
 }
diff --git a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/theme.css b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/theme.css
index 35403ac641c..5f045d3828e 100644
--- a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/theme.css
+++ b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/theme.css
@@ -4,14 +4,13 @@ containing a copy of the below, called "PersonaBarTheme.css" and placing it in
 the "Portals/_default" directory. If the custom CSS file exists, it will be loaded 
 instead of this one.
 ---------------------------------------------------------------------------------*/
-:root{
-    --dnn-color-pb-menu-background: #0e2936;
-    --dnn-color-pb-menu-background-hover: #0b1c24;
-    --dnn-color-pb-menu-icon: #3c7a9a;
-    --dnn-color-pb-menu-icon-background: #0b1c24;
-    --dnn-color-pb-menu-divider: #1e485e;
-    --dnn-color-pb-menu-text-highlight: #3c7a9a;
-    
+:root {
+    --dnn-color-pb-menu-background: var(--dnn-color-tertiary,#0e2936);
+    --dnn-color-pb-menu-background-hover: var(--dnn-color-tertiary-dark, #0b1c24);
+    --dnn-color-pb-menu-icon: var(--dnn-color-tertiary-light,#3c7a9a);
+    --dnn-color-pb-menu-icon-background: var(--dnn-color-tertiary-dark, #0b1c24);
+    --dnn-color-pb-menu-divider: var(--dnn-color-tertiary-light, #1e485e);
+    --dnn-color-pb-menu-text-highlight: var(--dnn-color-tertiary-light, #3c7a9a);
     --dnn-pb-menu-brand-background: url('../images/Logo.svg') no-repeat center center;
     --dnn-pb-menu-brand-background-size: 32px auto;
-}
\ No newline at end of file
+}
diff --git a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/bootstrap.js b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/bootstrap.js
index 73bfc669bf7..49680986123 100644
--- a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/bootstrap.js
+++ b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/bootstrap.js
@@ -22,10 +22,15 @@
     var debugMode = personaBarSettings['debugMode'] === true;
     var cdv = personaBarSettings['buildNumber'];
     var version = (cdv ? '?cdv=' + cdv : '') + (debugMode ? '&t=' + Math.random(): '');
-    var styles = [];
+    var styles = [];
+    var cssVariables = personaBarSettings['cssVariablesPath'];
     var mainJs = 'scripts/main.js';
     var themeCss = 'css/theme.css';
     var mainCss = 'css/main.css';
+
+    if (cssVariables) {
+        styles.push(cssVariables);
+    }
 
     var hasCustomPersonaBarTheme = personaBarSettings['personaBarTheme'];
     if (hasCustomPersonaBarTheme){
diff --git a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/serversummary.js b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/serversummary.js
index e0fbd1bbb54..879c2e509e3 100644
--- a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/serversummary.js
+++ b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/serversummary.js
@@ -16,7 +16,7 @@ define(['jquery', 'knockout', 'jquery.hoverIntent.min'], function ($, ko) {
         '<li class="border framework" data-bind="visible: FrameworkVersion.length > 0"><label data-bind="html: resx.Framework"></label><span data-bind="html: FrameworkVersion"></span></li>' +
         '<li class="border server-name" data-bind="visible: ServerName.length > 0"><label data-bind="html: resx.ServerName"></label><span data-bind="html: ServerName"></span></li>' +
         '<li class="separator"></li>' +
-        '<li class="doc-center"><a href="https://dnndocs.com/" data-bind="html: resx.Documentation, visible: visibleCheck(\'DocCenterVisible\')" target="_blank"></a></li>' +
+        '<li class="doc-center"><a href="https://docs.dnncommunity.org/" data-bind="html: resx.Documentation, visible: visibleCheck(\'DocCenterVisible\')" target="_blank"></a></li>' +
         '<li id="Logout" class="logout" data-bind="html: resx.nav_Logout"></li>' +
         '</ul>' +
         '</div>');
diff --git a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.ConfigConsole.Tests/Dnn.PersonaBar.ConfigConsole.Tests.csproj b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.ConfigConsole.Tests/Dnn.PersonaBar.ConfigConsole.Tests.csproj
index 2ba2ea25a5b..4052713c82b 100644
--- a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.ConfigConsole.Tests/Dnn.PersonaBar.ConfigConsole.Tests.csproj
+++ b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.ConfigConsole.Tests/Dnn.PersonaBar.ConfigConsole.Tests.csproj
@@ -132,7 +132,7 @@
     <None Include="packages.config" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.ConfigConsole.Tests/packages.config b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.ConfigConsole.Tests/packages.config
index 615145ce965..b8aa1aa2791 100644
--- a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.ConfigConsole.Tests/packages.config
+++ b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.ConfigConsole.Tests/packages.config
@@ -6,7 +6,7 @@
   <package id="Microsoft.Extensions.DependencyInjection.Abstractions" version="8.0.0" targetFramework="net48" />
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />
diff --git a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Pages.Tests/Dnn.PersonaBar.Pages.Tests.csproj b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Pages.Tests/Dnn.PersonaBar.Pages.Tests.csproj
index 74581edcba9..f3f76fb5a04 100644
--- a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Pages.Tests/Dnn.PersonaBar.Pages.Tests.csproj
+++ b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Pages.Tests/Dnn.PersonaBar.Pages.Tests.csproj
@@ -143,7 +143,7 @@
     <None Include="packages.config" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Pages.Tests/packages.config b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Pages.Tests/packages.config
index 615145ce965..b8aa1aa2791 100644
--- a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Pages.Tests/packages.config
+++ b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Pages.Tests/packages.config
@@ -6,7 +6,7 @@
   <package id="Microsoft.Extensions.DependencyInjection.Abstractions" version="8.0.0" targetFramework="net48" />
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />
diff --git a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Security.Tests/Dnn.PersonaBar.Security.Tests.csproj b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Security.Tests/Dnn.PersonaBar.Security.Tests.csproj
index 15354e8178b..44c1f1a7c81 100644
--- a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Security.Tests/Dnn.PersonaBar.Security.Tests.csproj
+++ b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Security.Tests/Dnn.PersonaBar.Security.Tests.csproj
@@ -159,7 +159,7 @@
     <None Include="packages.config" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Security.Tests/packages.config b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Security.Tests/packages.config
index 7d2023ed1ff..da517fc2463 100644
--- a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Security.Tests/packages.config
+++ b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Security.Tests/packages.config
@@ -9,7 +9,7 @@
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="Newtonsoft.Json" version="13.0.3" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />
diff --git a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Users.Tests/Dnn.PersonaBar.Users.Tests.csproj b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Users.Tests/Dnn.PersonaBar.Users.Tests.csproj
index 98efb5d5b5d..53d07da9072 100644
--- a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Users.Tests/Dnn.PersonaBar.Users.Tests.csproj
+++ b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Users.Tests/Dnn.PersonaBar.Users.Tests.csproj
@@ -151,7 +151,7 @@
     <None Include="packages.config" />
   </ItemGroup>
   <ItemGroup>
-    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.3.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
+    <Analyzer Include="..\..\..\packages\NUnit.Analyzers.4.4.0\analyzers\dotnet\cs\nunit.analyzers.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.CodeFixes.dll" />
     <Analyzer Include="..\..\..\packages\StyleCop.Analyzers.1.1.118\analyzers\dotnet\cs\StyleCop.Analyzers.dll" />
   </ItemGroup>
diff --git a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Users.Tests/packages.config b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Users.Tests/packages.config
index 615145ce965..b8aa1aa2791 100644
--- a/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Users.Tests/packages.config
+++ b/Dnn.AdminExperience/Tests/Dnn.PersonaBar.Users.Tests/packages.config
@@ -6,7 +6,7 @@
   <package id="Microsoft.Extensions.DependencyInjection.Abstractions" version="8.0.0" targetFramework="net48" />
   <package id="Moq" version="4.20.72" targetFramework="net48" />
   <package id="NUnit" version="4.2.2" targetFramework="net48" />
-  <package id="NUnit.Analyzers" version="4.3.0" targetFramework="net48" developmentDependency="true" />
+  <package id="NUnit.Analyzers" version="4.4.0" targetFramework="net48" developmentDependency="true" />
   <package id="NUnit3TestAdapter" version="4.6.0" targetFramework="net48" />
   <package id="StyleCop.Analyzers" version="1.1.118" targetFramework="net48" developmentDependency="true" />
   <package id="System.Buffers" version="4.5.1" targetFramework="net48" />
diff --git a/DotNetNuke.Internal.SourceGenerators/DotNetNuke.Internal.SourceGenerators.csproj b/DotNetNuke.Internal.SourceGenerators/DotNetNuke.Internal.SourceGenerators.csproj
index a30d1cd8c97..163057b5dfe 100644
--- a/DotNetNuke.Internal.SourceGenerators/DotNetNuke.Internal.SourceGenerators.csproj
+++ b/DotNetNuke.Internal.SourceGenerators/DotNetNuke.Internal.SourceGenerators.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <TargetFramework>netstandard2.0</TargetFramework>
@@ -14,8 +14,8 @@
 
   <ItemGroup>
     <PackageReference Include="Microsoft.Bcl.AsyncInterfaces" Version="9.0.0" />
-    <PackageReference Include="Microsoft.CodeAnalysis.CSharp.Workspaces" Version="4.11.0" PrivateAssets="all" />
-    <PackageReference Include="Microsoft.CodeAnalysis.Analyzers" Version="3.3.4" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.CodeAnalysis.Analyzers" Version="3.11.0" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.CodeAnalysis.CSharp" Version="4.12.0" PrivateAssets="all" />
     <PackageReference Include="Microsoft.SourceLink.GitHub" Version="8.0.0">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
diff --git a/README.md b/README.md
index 5fd2ac2ae6a..8fd42601de2 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ In addition to robust content management, the free, open source DNN Platform inc
 * [Pull Request Procedures](.github/PULL_REQUEST_PROCESS.md)
 * [Versioning Policy](.github/VERSIONING_POLICY.md)
 * [Release Schedule](.github/RELEASE_SCHEDULE.md)
-* [DNN Docs](https://dnndocs.com)
+* [DNN Docs](https://docs.dnncommunity.org)
 * [Community Website](https://dnncommunity.org)
 * [Community Forums](https://dnncommunity.org/forums)
 * [Community Blogs](https://dnncommunity.org/blogs)
diff --git a/global.json b/global.json
index 7699ded9c8c..2418b41271c 100644
--- a/global.json
+++ b/global.json
@@ -1,6 +1,6 @@
 {
   "sdk": {
-    "version": "9.0.101",
+    "version": "9.0.102",
     "allowPrerelease": false,
     "rollForward": "latestMinor"
   }
diff --git a/package.json b/package.json
index 0e7aa836015..5190f2e502d 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "Dnn.AdminExperience/ClientSide/Users.Web",
     "Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables",
     "Dnn.AdminExperience/ClientSide/Vocabularies.Web",
+    "Dnn.AdminExperience/ClientSide/Styles.Web",
     "DNN Platform/Modules/ResourceManager/ResourceManager.Web",
     "DNN Platform/Skins/Aperture"
   ],
@@ -42,5 +43,5 @@
   "resolutions": {
     "@types/ws": "8.5.4"
   },
-  "packageManager": "yarn@4.5.0"
+  "packageManager": "yarn@4.5.3"
 }
diff --git a/yarn.lock b/yarn.lock
index 1f8334088b6..276a0871aae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1512,6 +1512,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@dnncommunity/dnn-elements@npm:^0.25.0":
+  version: 0.25.0
+  resolution: "@dnncommunity/dnn-elements@npm:0.25.0"
+  dependencies:
+    jodit: "npm:^4.2.27"
+  checksum: 10/6305c00c6e4988440fac94d34505699abe506e30067ee679e20a4eb80ec9106a1b7681bbb698995641af65805509a497c1a00d775b45293a51c58e6411c3c492
+  languageName: node
+  linkType: hard
+
 "@dnnsoftware/dnn-react-common@npm:10.0.0, @dnnsoftware/dnn-react-common@workspace:Dnn.AdminExperience/ClientSide/Dnn.React.Common":
   version: 0.0.0-use.local
   resolution: "@dnnsoftware/dnn-react-common@workspace:Dnn.AdminExperience/ClientSide/Dnn.React.Common"
@@ -9738,7 +9747,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "dnn-resource-manager@workspace:DNN Platform/Modules/ResourceManager/ResourceManager.Web"
   dependencies:
-    "@dnncommunity/dnn-elements": "npm:^0.24.1"
+    "@dnncommunity/dnn-elements": "npm:^0.25.0"
     "@stencil/core": "npm:^4.22.2"
     "@stencil/sass": "npm:^3.0.12"
     "@stencil/store": "npm:^2.0.16"
@@ -22662,6 +22671,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"styles@workspace:Dnn.AdminExperience/ClientSide/Styles.Web":
+  version: 0.0.0-use.local
+  resolution: "styles@workspace:Dnn.AdminExperience/ClientSide/Styles.Web"
+  dependencies:
+    "@dnncommunity/dnn-elements": "npm:^0.24.1"
+    "@stencil/core": "npm:^4.22.2"
+    "@stencil/sass": "npm:^3.0.12"
+    "@types/node": "npm:^22.9.0"
+  languageName: unknown
+  linkType: soft
+
 "supports-color@npm:^2.0.0":
   version: 2.0.0
   resolution: "supports-color@npm:2.0.0"