diff --git a/src/components/ConfigurationPage/widgetsettings/DonatersTopListWidgetSettings.tsx b/src/components/ConfigurationPage/widgetsettings/DonatersTopListWidgetSettings.tsx
index 9123d97..5f7c818 100644
--- a/src/components/ConfigurationPage/widgetsettings/DonatersTopListWidgetSettings.tsx
+++ b/src/components/ConfigurationPage/widgetsettings/DonatersTopListWidgetSettings.tsx
@@ -1,3 +1,4 @@
+import { AnimatedFontProperty } from "../widgetproperties/AnimatedFontProperty";
 import { ColorProperty } from "../widgetproperties/ColorProperty";
 import { DonatersTopListLayoutProperty } from "../widgetproperties/DonatersTopListLayoutProperty";
 import { FontProperty } from "../widgetproperties/FontProperty";
@@ -52,46 +53,16 @@ export class DonatersTopListWidgetSettings extends AbstractWidgetSettings {
           "widget-donaterslist-title",
           "header",
         ),
-        new FontProperty(
-          widgetId,
-          "titleFont",
-          "fontselect",
-          "Roboto",
-          "widget-donaterslist-title-font-family",
-          "header",
-        ),
-        new FontProperty(
-          widgetId,
-          "font",
-          "fontselect",
-          "Roboto",
-          "widget-donaterslist-list-font-family",
-          "list",
-        ),
-        new NumberProperty(
-          widgetId,
-          "titleFontSize",
-          "number",
-          "24",
-          "widget-donaterslist-title-font-size",
-          "header",
-        ),
-        new NumberProperty(
-          widgetId,
-          "fontSize",
-          "number",
-          "24",
-          "widget-donaterslist-list-font-size",
-          "list",
-        ),
-        new ColorProperty(
-          widgetId,
-          "titleColor",
-          "color",
-          "#ffffff",
-          "widget-donaterslist-title-color",
-          "header",
-        ),
+        new AnimatedFontProperty({
+          widgetId: widgetId,
+          name: "headerFont",
+          tab: "header"
+        }),
+        new AnimatedFontProperty({
+          widgetId: widgetId,
+          name: "messageFont",
+          tab: "list"
+        }),
         new ColorProperty(
           widgetId,
           "titleBackgroundColor",
@@ -100,14 +71,6 @@ export class DonatersTopListWidgetSettings extends AbstractWidgetSettings {
           "widget-donaterslist-title-background-color",
           "header",
         ),
-        new ColorProperty(
-          widgetId,
-          "color",
-          "color",
-          "#ffffff",
-          "widget-donaterslist-list-color",
-          "list",
-        ),
         new ColorProperty(
           widgetId,
           "backgroundColor",
@@ -116,22 +79,6 @@ export class DonatersTopListWidgetSettings extends AbstractWidgetSettings {
           "widget-donaterslist-list-background-color",
           "list",
         ),
-        new NumberProperty(
-          widgetId,
-          "titleAlphaChannel",
-          "number",
-          "1.0",
-          "widget-donaterslist-title-transparency",
-          "header",
-        ),
-        new NumberProperty(
-          widgetId,
-          "alphaChannel",
-          "number",
-          "1.0",
-          "widget-donaterslist-list-transparency",
-          "list",
-        ),
         new DonatersTopListLayoutProperty(widgetId, "vertical"),
       ],
       tabs,
diff --git a/src/components/DonatersTopList/DonatersTopList.tsx b/src/components/DonatersTopList/DonatersTopList.tsx
index 5b21cbf..6d06776 100644
--- a/src/components/DonatersTopList/DonatersTopList.tsx
+++ b/src/components/DonatersTopList/DonatersTopList.tsx
@@ -4,8 +4,14 @@ import axios from "axios";
 import "./DonatersTopList.css";
 import { useLoaderData, useNavigate } from "react-router";
 import { findSetting } from "../utils";
-import { cleanupCommandListener, setupCommandListener, subscribe, unsubscribe } from "../../socket";
+import {
+  cleanupCommandListener,
+  setupCommandListener,
+  subscribe,
+  unsubscribe,
+} from "../../socket";
 import FontImport from "../FontImport/FontImport";
+import { AnimatedFontProperty } from "../ConfigurationPage/widgetproperties/AnimatedFontProperty";
 
 const overflowHiddenForRootElement = (
   <style
@@ -23,15 +29,6 @@ const fullHeight = (
   />
 );
 
-function hexToRgb(hex: string) {
-  var bigint = parseInt(hex.substring(1), 16);
-  var r = (bigint >> 16) & 255;
-  var g = (bigint >> 8) & 255;
-  var b = bigint & 255;
-
-  return { r, g, b };
-}
-
 export default function DonatersTopList({}: {}) {
   const [donaters, setDonaters] = useState(new Map());
   const { recipientId, settings, conf, widgetId } = useLoaderData();
@@ -82,59 +79,54 @@ export default function DonatersTopList({}: {}) {
   const type = findSetting(settings, "type", "All");
 
   const title = findSetting(settings, "title", "Донатеры");
-  const titleColor = findSetting(settings, "titleColor", "black");
-  const titleBackgroundColor = hexToRgb(
-    findSetting(settings, "titleBackgroundColor", "white"),
-  );
-  const titleAlphaChannel = findSetting(settings, "titleAlphaChannel", "1.0");
-  const titleFont = findSetting(settings, "titleFont", "Roboto");
-  const titleFontSize = findSetting(settings, "titleFontSize", "24px");
-
-  const color = findSetting(settings, "color", "black");
-  const backgroundColor = hexToRgb(
-    findSetting(settings, "backgroundColor", "white"),
+  const titleBackgroundColor = findSetting(
+    settings,
+    "titleBackgroundColor",
+    "white",
   );
-  const alphaChannel = findSetting(settings, "alphaChannel", "1.0");
-  const font = findSetting(settings, "font", "Roboto");
-  const fontSize = findSetting(settings, "fontSize", "24px");
-
-  console.log(`color: ${JSON.stringify(backgroundColor)}`);
-  console.log(`title color: ${JSON.stringify(titleBackgroundColor)}`);
-
-  // todo rename to listStyle - it's not only text style
-  const textStyle = {
-    fontSize: fontSize ? fontSize + "px" : "unset",
-    lineHeight: fontSize ? fontSize + "px" : "unset",
-    fontFamily: font ? font : "unset",
-    color: color,
-  };
+  const backgroundColor = findSetting(settings, "backgroundColor", "white");
+  const headerFont = new AnimatedFontProperty({
+    widgetId: widgetId,
+    name: "headerFont",
+    value: findSetting(settings, "headerFont", null),
+  });
+  const messageFont = new AnimatedFontProperty({
+    widgetId: widgetId,
+    name: "messageFont",
+    value: findSetting(settings, "messageFont", null),
+  });
+
+  const textStyle = messageFont.calcStyle();
   textStyle.display = layout === "vertical" ? "block" : "inline";
   textStyle.marginLeft = layout === "vertical" ? "0px" : "20px";
 
-  const donatersTopStyle = layout === "vertical" ? {} : { display: "inline" };
-  donatersTopStyle.fontSize = titleFontSize + "px";
-  donatersTopStyle.fontFamily = titleFont;
-  donatersTopStyle.color = titleColor;
-  donatersTopStyle.backgroundColor = `rgba(${titleBackgroundColor.r}, ${titleBackgroundColor.g}, ${titleBackgroundColor.b}, ${titleAlphaChannel})`;
+  const donatersTopStyle = headerFont.calcStyle();
+  if (layout === "vertical") {
+    donatersTopStyle.display = "inline";
+  }
+  donatersTopStyle.backgroundColor = titleBackgroundColor;
 
   return (
     <>
-      <FontImport font={font} />
-      <FontImport font={titleFont} />
+      {headerFont.createFontImport()}
+      {messageFont.createFontImport()}
       {overflowHiddenForRootElement}
       {fullHeight}
       <style
         dangerouslySetInnerHTML={{
-          __html: `#root { background-color: rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${alphaChannel}); }`,
+          __html: `#root { background-color: ${backgroundColor}; }`,
         }}
       />
-
       {"All" === type && (
-        <div className="donaters-list" style={textStyle}>
+        <div className={`donaters-list`} style={textStyle}>
           {donaters &&
             donaters.size > 0 &&
             Array.from(donaters.keys()).map((donater) => (
-              <span key={donater} style={textStyle} className="donater">
+              <span
+                key={donater}
+                style={textStyle}
+                className={`donater ${messageFont.calcClassName()}`}
+              >
                 {donater} - {donaters.get(donater).major}{" "}
                 {donaters.get(donater).currency}{" "}
               </span>
@@ -143,7 +135,10 @@ export default function DonatersTopList({}: {}) {
       )}
       {"Top" === type && (
         <>
-          <div style={donatersTopStyle} className="donaters-title">
+          <div
+            style={donatersTopStyle}
+            className={`donaters-title ${headerFont.calcClassName()}`}
+          >
             {title}
           </div>
           <div className="donaters-top">
@@ -152,7 +147,11 @@ export default function DonatersTopList({}: {}) {
               Array.from(donaters.keys())
                 .slice(0, topsize)
                 .map((donater) => (
-                  <div key={donater} style={textStyle} className="donater">
+                  <div
+                    key={donater}
+                    style={textStyle}
+                    className={`donater ${messageFont.calcClassName()}`}
+                  >
                     {donater} - {donaters.get(donater).major}{" "}
                     {donaters.get(donater).currency}{" "}
                   </div>
@@ -162,7 +161,10 @@ export default function DonatersTopList({}: {}) {
       )}
       {"Last" === type && (
         <>
-          <div style={donatersTopStyle} className="donaters-title">
+          <div
+            style={donatersTopStyle}
+            className={`donaters-title ${headerFont.calcClassName()}`}
+          >
             {title}
           </div>
           <div className="donaters-top">
@@ -171,7 +173,11 @@ export default function DonatersTopList({}: {}) {
               Array.from(donaters.keys())
                 .slice(0, topsize)
                 .map((donater) => (
-                  <div key={donater} style={textStyle} className="donater">
+                  <div
+                    key={donater}
+                    style={textStyle}
+                    className={`donater ${messageFont.calcClassName()}`}
+                  >
                     {donater} - {donaters.get(donater).major}{" "}
                     {donaters.get(donater).currency}{" "}
                   </div>