diff --git a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/WidgetEditDto.cs b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/WidgetEditDto.cs
index 201fe80e..155bb8e1 100644
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/WidgetEditDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/WidgetEditDto.cs
@@ -10,7 +10,7 @@ public class WidgetEditDto
     public string ValueClassName { get; set; } = "text-3xl";
     public string Color { get; set; }
     public string Icon { get; set; }
-    public string Subtitle { get; set; }
+    public string SubTitle { get; set; }
     public string OnClick { get; set; }
     public string ClassName { get; set; }
 }
diff --git a/api/src/Kurs.Platform.Application.Contracts/ListForms/Select/WidgetDto.cs b/api/src/Kurs.Platform.Application.Contracts/ListForms/Select/WidgetDto.cs
index 11b722e9..3fa021b9 100644
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/Select/WidgetDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/Select/WidgetDto.cs
@@ -4,6 +4,7 @@ public class WidgetDto
 {
     public int ColGap { get; set; }
     public int ColSpan { get; set; }
+    public string ClassName { get; set; }
     public List<WidgetItemDto> Items { get; set; }
 }
 
@@ -14,7 +15,6 @@ public class WidgetItemDto
     public string ValueClassName { get; set; } = "text-3xl";
     public string Color { get; set; }
     public string Icon { get; set; }
-    public string Subtitle { get; set; }
+    public string SubTitle { get; set; }
     public string OnClick { get; set; }
-    public string ClassName { get; set; }
 }
\ No newline at end of file
diff --git a/api/src/Kurs.Platform.Application/ListForms/ListFormSelectAppService.cs b/api/src/Kurs.Platform.Application/ListForms/ListFormSelectAppService.cs
index 0654104e..b78a6fcb 100644
--- a/api/src/Kurs.Platform.Application/ListForms/ListFormSelectAppService.cs
+++ b/api/src/Kurs.Platform.Application/ListForms/ListFormSelectAppService.cs
@@ -228,6 +228,7 @@ public class ListFormSelectAppService : PlatformAppService, IListFormSelectAppSe
                     {
                         ColGap = widget.ColGap,
                         ColSpan = widget.ColSpan,
+                        ClassName = widget.ClassName,
                         Items = []
                     };
 
@@ -244,9 +245,8 @@ public class ListFormSelectAppService : PlatformAppService, IListFormSelectAppSe
                                     Value = dynamicItem.ContainsKey(widget.Value) ? dynamicItem[widget.Value]?.ToString() : string.Empty,
                                     Color = dynamicItem.ContainsKey(widget.Color) ? dynamicItem[widget.Color]?.ToString() : string.Empty,
                                     Icon = dynamicItem.ContainsKey(widget.Icon) ? dynamicItem[widget.Icon]?.ToString() : string.Empty,
-                                    Subtitle = dynamicItem.ContainsKey(widget.Subtitle) ? dynamicItem[widget.Subtitle]?.ToString() : string.Empty,
+                                    SubTitle = dynamicItem.ContainsKey(widget.SubTitle) ? dynamicItem[widget.SubTitle]?.ToString() : string.Empty,
                                     OnClick = dynamicItem.ContainsKey(widget.OnClick) ? dynamicItem[widget.OnClick]?.ToString() : string.Empty,
-                                    ClassName = dynamicItem.ContainsKey(widget.ClassName) ? dynamicItem[widget.ClassName]?.ToString() : string.Empty,
                                 });
                             }
                         }
diff --git a/api/src/Kurs.Platform.Domain/Queries/Widget.cs b/api/src/Kurs.Platform.Domain/Queries/Widget.cs
index 42468558..b0139304 100644
--- a/api/src/Kurs.Platform.Domain/Queries/Widget.cs
+++ b/api/src/Kurs.Platform.Domain/Queries/Widget.cs
@@ -13,7 +13,7 @@ public class Widget : ValueObject
     public string ValueClassName { get; set; } = "text-3xl";
     public string Color { get; set; }
     public string Icon { get; set; }
-    public string Subtitle { get; set; }
+    public string SubTitle { get; set; }
     public string OnClick { get; set; }
     public string ClassName { get; set; }
 
@@ -27,7 +27,7 @@ public class Widget : ValueObject
         yield return ValueClassName;
         yield return Color;
         yield return Icon;
-        yield return Subtitle;
+        yield return SubTitle;
         yield return OnClick;
         yield return ClassName;
     }
diff --git a/ui/dev-dist/sw.js b/ui/dev-dist/sw.js
index 09c4366b..4121d1f0 100644
--- a/ui/dev-dist/sw.js
+++ b/ui/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.buc1mitnpmo"
+    "revision": "0.h9qpsacvko"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/ui/src/components/ui/Widget/Widget.tsx b/ui/src/components/ui/Widget/Widget.tsx
index 611e7cd1..d9d18efe 100644
--- a/ui/src/components/ui/Widget/Widget.tsx
+++ b/ui/src/components/ui/Widget/Widget.tsx
@@ -18,9 +18,9 @@ interface WidgetProps {
   title: string
   value: string | number
   valueClassName?: string
-  color: colorType
-  icon: (typeof iconList)[number]
-  subtitle?: string
+  color?: colorType
+  icon?: (typeof iconList)[number]
+  subTitle?: string
   onClick?: () => void
   className?: string
 }
@@ -29,9 +29,9 @@ export default function Widget({
   title,
   value,
   valueClassName = 'text-3xl',
-  color,
-  icon,
-  subtitle,
+  color = 'blue',
+  icon = 'FaChartBar',
+  subTitle = '-',
   onClick,
   className,
 }: WidgetProps) {
@@ -42,7 +42,7 @@ export default function Widget({
   useEffect(() => {
     let isMounted = true
     import('react-icons/fa').then((icons) => {
-      if (isMounted && icon in icons) {
+      if (isMounted && icon && icon in icons) {
         setIconComponent(() => (icons as any)[icon])
       }
     })
@@ -64,6 +64,8 @@ export default function Widget({
     orange: { bg: 'from-orange-100 to-orange-200', text: 'text-orange-600' },
   }
 
+  const safeColor = color && colorMap[color] ? color : 'green'
+
   return (
     <div
       onClick={onClick}
@@ -76,13 +78,15 @@ export default function Widget({
       <div className="flex items-center justify-between">
         <div>
           <p className="text-sm font-semibold text-gray-600 uppercase tracking-wide">{title}</p>
-          <p className={`${valueClassName} font-bold mt-1 ${colorMap[color].text}`}>{value}</p>
-          {subtitle && <p className="text-sm text-gray-500 mt-1">{subtitle}</p>}
+          <p className={`${valueClassName} font-bold mt-1 ${colorMap[safeColor].text}`}>{value}</p>
+          <p className="text-sm text-gray-500 mt-1">{subTitle}</p>
         </div>
         <div
-          className={`w-12 h-12 bg-gradient-to-br ${colorMap[color].bg} rounded-xl flex items-center justify-center shadow-sm`}
+          className={`w-12 h-12 bg-gradient-to-br ${colorMap[safeColor].bg} rounded-xl flex items-center justify-center shadow-sm`}
         >
-          {IconComponent ? <IconComponent className={`w-6 h-6 ${colorMap[color].text}`} /> : null}
+          {IconComponent ? (
+            <IconComponent className={`w-6 h-6 ${colorMap[safeColor].text}`} />
+          ) : null}
         </div>
       </div>
     </div>
diff --git a/ui/src/components/ui/Widget/WidgetGroup.tsx b/ui/src/components/ui/Widget/WidgetGroup.tsx
index dfe0af76..86094b05 100644
--- a/ui/src/components/ui/Widget/WidgetGroup.tsx
+++ b/ui/src/components/ui/Widget/WidgetGroup.tsx
@@ -1,29 +1,30 @@
 import classNames from 'classnames'
 import Widget, { type colorType } from './Widget'
-import { WidgetEditDto } from '@/proxy/form/models'
+import { WidgetEditDto, WidgetGroupDto } from '@/proxy/form/models'
 
-interface WidgetGroup {
-  colGap?: number
-  colSpan?: number
-  items: WidgetEditDto[]
-}
-
-export default function WidgetGroup(widgets: WidgetGroup[]) {
-  return widgets.map((group, gIdx) => (
-    <div key={gIdx} className={classNames(`grid grid-cols-12 gap-${group.colGap ?? 4}`)}>
-      {group.items.map((item: WidgetEditDto, order: number) => (
-        <div key={`${gIdx}-${order}`} className={classNames(`col-span-${group.colSpan ?? 3}`)}>
-          <Widget
-            title={item.title}
-            value={item.value}
-            color={item.color as colorType}
-            icon={item.icon ?? 'FaChartBar'}
-            subtitle={item.subTitle}
-            valueClassName={item.valueClassName}
-            onClick={() => item.onClick}
-          />
+export default function WidgetGroup({ widgetGroups }: { widgetGroups: WidgetGroupDto[] }) {
+  return (
+    <div>
+      {widgetGroups.map((group, gIdx) => (
+        <div
+          key={gIdx}
+          className={classNames(`grid grid-cols-12 gap-${group.colGap} ${group.className || ''}`)}
+        >
+          {group.items.map((item: WidgetEditDto, order: number) => (
+            <div key={`${gIdx}-${order}`} className={classNames(`col-span-${group.colSpan}`)}>
+              <Widget
+                title={item.title}
+                value={item.value}
+                color={item.color as colorType}
+                icon={item.icon}
+                subTitle={item.subTitle}
+                valueClassName={item.valueClassName}
+                onClick={eval(item.onClick)}
+              />
+            </div>
+          ))}
         </div>
       ))}
     </div>
-  ))
+  )
 }
diff --git a/ui/src/components/ui/Widget/iconList.ts b/ui/src/components/ui/Widget/iconList.ts
index eb76df96..299ac08b 100644
--- a/ui/src/components/ui/Widget/iconList.ts
+++ b/ui/src/components/ui/Widget/iconList.ts
@@ -1,1613 +1,1628 @@
+export enum WidgetColorEnum {
+  'Blue' = 'blue',
+  'Green' = 'green',
+  'Purple' = 'purple',
+  'Gray' = 'gray',
+  'Red' = 'red',
+  'Yellow' = 'yellow',
+  'Pink' = 'pink',
+  'Indigo' = 'indigo',
+  'Teal' = 'teal',
+  'Orange' = 'orange',
+}
+
+export const colSpan = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+
 export const iconList = [
-  "Fa500Px",
-  "FaAccessibleIcon",
-  "FaAccusoft",
-  "FaAcquisitionsIncorporated",
-  "FaAd",
-  "FaAddressBook",
-  "FaAddressCard",
-  "FaAdjust",
-  "FaAdn",
-  "FaAdversal",
-  "FaAffiliatetheme",
-  "FaAirFreshener",
-  "FaAirbnb",
-  "FaAlgolia",
-  "FaAlignCenter",
-  "FaAlignJustify",
-  "FaAlignLeft",
-  "FaAlignRight",
-  "FaAlipay",
-  "FaAllergies",
-  "FaAmazon",
-  "FaAmazonPay",
-  "FaAmbulance",
-  "FaAmericanSignLanguageInterpreting",
-  "FaAmilia",
-  "FaAnchor",
-  "FaAndroid",
-  "FaAngellist",
-  "FaAngleDoubleDown",
-  "FaAngleDoubleLeft",
-  "FaAngleDoubleRight",
-  "FaAngleDoubleUp",
-  "FaAngleDown",
-  "FaAngleLeft",
-  "FaAngleRight",
-  "FaAngleUp",
-  "FaAngry",
-  "FaAngrycreative",
-  "FaAngular",
-  "FaAnkh",
-  "FaAppStore",
-  "FaAppStoreIos",
-  "FaApper",
-  "FaApple",
-  "FaAppleAlt",
-  "FaApplePay",
-  "FaArchive",
-  "FaArchway",
-  "FaArrowAltCircleDown",
-  "FaArrowAltCircleLeft",
-  "FaArrowAltCircleRight",
-  "FaArrowAltCircleUp",
-  "FaArrowCircleDown",
-  "FaArrowCircleLeft",
-  "FaArrowCircleRight",
-  "FaArrowCircleUp",
-  "FaArrowDown",
-  "FaArrowLeft",
-  "FaArrowRight",
-  "FaArrowUp",
-  "FaArrowsAlt",
-  "FaArrowsAltH",
-  "FaArrowsAltV",
-  "FaArtstation",
-  "FaAssistiveListeningSystems",
-  "FaAsterisk",
-  "FaAsymmetrik",
-  "FaAt",
-  "FaAtlas",
-  "FaAtlassian",
-  "FaAtom",
-  "FaAudible",
-  "FaAudioDescription",
-  "FaAutoprefixer",
-  "FaAvianex",
-  "FaAviato",
-  "FaAward",
-  "FaAws",
-  "FaBaby",
-  "FaBabyCarriage",
-  "FaBackspace",
-  "FaBackward",
-  "FaBacon",
-  "FaBacteria",
-  "FaBacterium",
-  "FaBahai",
-  "FaBalanceScale",
-  "FaBalanceScaleLeft",
-  "FaBalanceScaleRight",
-  "FaBan",
-  "FaBandAid",
-  "FaBandcamp",
-  "FaBarcode",
-  "FaBars",
-  "FaBaseballBall",
-  "FaBasketballBall",
-  "FaBath",
-  "FaBatteryEmpty",
-  "FaBatteryFull",
-  "FaBatteryHalf",
-  "FaBatteryQuarter",
-  "FaBatteryThreeQuarters",
-  "FaBattleNet",
-  "FaBed",
-  "FaBeer",
-  "FaBehance",
-  "FaBehanceSquare",
-  "FaBell",
-  "FaBellSlash",
-  "FaBezierCurve",
-  "FaBible",
-  "FaBicycle",
-  "FaBiking",
-  "FaBimobject",
-  "FaBinoculars",
-  "FaBiohazard",
-  "FaBirthdayCake",
-  "FaBitbucket",
-  "FaBitcoin",
-  "FaBity",
-  "FaBlackTie",
-  "FaBlackberry",
-  "FaBlender",
-  "FaBlenderPhone",
-  "FaBlind",
-  "FaBlog",
-  "FaBlogger",
-  "FaBloggerB",
-  "FaBluetooth",
-  "FaBluetoothB",
-  "FaBold",
-  "FaBolt",
-  "FaBomb",
-  "FaBone",
-  "FaBong",
-  "FaBook",
-  "FaBookDead",
-  "FaBookMedical",
-  "FaBookOpen",
-  "FaBookReader",
-  "FaBookmark",
-  "FaBootstrap",
-  "FaBorderAll",
-  "FaBorderNone",
-  "FaBorderStyle",
-  "FaBowlingBall",
-  "FaBox",
-  "FaBoxOpen",
-  "FaBoxTissue",
-  "FaBoxes",
-  "FaBraille",
-  "FaBrain",
-  "FaBreadSlice",
-  "FaBriefcase",
-  "FaBriefcaseMedical",
-  "FaBroadcastTower",
-  "FaBroom",
-  "FaBrush",
-  "FaBtc",
-  "FaBuffer",
-  "FaBug",
-  "FaBuilding",
-  "FaBullhorn",
-  "FaBullseye",
-  "FaBurn",
-  "FaBuromobelexperte",
-  "FaBus",
-  "FaBusAlt",
-  "FaBusinessTime",
-  "FaBuyNLarge",
-  "FaBuysellads",
-  "FaCalculator",
-  "FaCalendar",
-  "FaCalendarAlt",
-  "FaCalendarCheck",
-  "FaCalendarDay",
-  "FaCalendarMinus",
-  "FaCalendarPlus",
-  "FaCalendarTimes",
-  "FaCalendarWeek",
-  "FaCamera",
-  "FaCameraRetro",
-  "FaCampground",
-  "FaCanadianMapleLeaf",
-  "FaCandyCane",
-  "FaCannabis",
-  "FaCapsules",
-  "FaCar",
-  "FaCarAlt",
-  "FaCarBattery",
-  "FaCarCrash",
-  "FaCarSide",
-  "FaCaravan",
-  "FaCaretDown",
-  "FaCaretLeft",
-  "FaCaretRight",
-  "FaCaretSquareDown",
-  "FaCaretSquareLeft",
-  "FaCaretSquareRight",
-  "FaCaretSquareUp",
-  "FaCaretUp",
-  "FaCarrot",
-  "FaCartArrowDown",
-  "FaCartPlus",
-  "FaCashRegister",
-  "FaCat",
-  "FaCcAmazonPay",
-  "FaCcAmex",
-  "FaCcApplePay",
-  "FaCcDinersClub",
-  "FaCcDiscover",
-  "FaCcJcb",
-  "FaCcMastercard",
-  "FaCcPaypal",
-  "FaCcStripe",
-  "FaCcVisa",
-  "FaCentercode",
-  "FaCentos",
-  "FaCertificate",
-  "FaChair",
-  "FaChalkboard",
-  "FaChalkboardTeacher",
-  "FaChargingStation",
-  "FaChartArea",
-  "FaChartBar",
-  "FaChartLine",
-  "FaChartPie",
-  "FaCheck",
-  "FaCheckCircle",
-  "FaCheckDouble",
-  "FaCheckSquare",
-  "FaCheese",
-  "FaChess",
-  "FaChessBishop",
-  "FaChessBoard",
-  "FaChessKing",
-  "FaChessKnight",
-  "FaChessPawn",
-  "FaChessQueen",
-  "FaChessRook",
-  "FaChevronCircleDown",
-  "FaChevronCircleLeft",
-  "FaChevronCircleRight",
-  "FaChevronCircleUp",
-  "FaChevronDown",
-  "FaChevronLeft",
-  "FaChevronRight",
-  "FaChevronUp",
-  "FaChild",
-  "FaChrome",
-  "FaChromecast",
-  "FaChurch",
-  "FaCircle",
-  "FaCircleNotch",
-  "FaCity",
-  "FaClinicMedical",
-  "FaClipboard",
-  "FaClipboardCheck",
-  "FaClipboardList",
-  "FaClock",
-  "FaClone",
-  "FaClosedCaptioning",
-  "FaCloud",
-  "FaCloudDownloadAlt",
-  "FaCloudMeatball",
-  "FaCloudMoon",
-  "FaCloudMoonRain",
-  "FaCloudRain",
-  "FaCloudShowersHeavy",
-  "FaCloudSun",
-  "FaCloudSunRain",
-  "FaCloudUploadAlt",
-  "FaCloudflare",
-  "FaCloudscale",
-  "FaCloudsmith",
-  "FaCloudversify",
-  "FaCocktail",
-  "FaCode",
-  "FaCodeBranch",
-  "FaCodepen",
-  "FaCodiepie",
-  "FaCoffee",
-  "FaCog",
-  "FaCogs",
-  "FaCoins",
-  "FaColumns",
-  "FaComment",
-  "FaCommentAlt",
-  "FaCommentDollar",
-  "FaCommentDots",
-  "FaCommentMedical",
-  "FaCommentSlash",
-  "FaComments",
-  "FaCommentsDollar",
-  "FaCompactDisc",
-  "FaCompass",
-  "FaCompress",
-  "FaCompressAlt",
-  "FaCompressArrowsAlt",
-  "FaConciergeBell",
-  "FaConfluence",
-  "FaConnectdevelop",
-  "FaContao",
-  "FaCookie",
-  "FaCookieBite",
-  "FaCopy",
-  "FaCopyright",
-  "FaCottonBureau",
-  "FaCouch",
-  "FaCpanel",
-  "FaCreativeCommons",
-  "FaCreativeCommonsBy",
-  "FaCreativeCommonsNc",
-  "FaCreativeCommonsNcEu",
-  "FaCreativeCommonsNcJp",
-  "FaCreativeCommonsNd",
-  "FaCreativeCommonsPd",
-  "FaCreativeCommonsPdAlt",
-  "FaCreativeCommonsRemix",
-  "FaCreativeCommonsSa",
-  "FaCreativeCommonsSampling",
-  "FaCreativeCommonsSamplingPlus",
-  "FaCreativeCommonsShare",
-  "FaCreativeCommonsZero",
-  "FaCreditCard",
-  "FaCriticalRole",
-  "FaCrop",
-  "FaCropAlt",
-  "FaCross",
-  "FaCrosshairs",
-  "FaCrow",
-  "FaCrown",
-  "FaCrutch",
-  "FaCss3",
-  "FaCss3Alt",
-  "FaCube",
-  "FaCubes",
-  "FaCut",
-  "FaCuttlefish",
-  "FaDAndD",
-  "FaDAndDBeyond",
-  "FaDailymotion",
-  "FaDashcube",
-  "FaDatabase",
-  "FaDeaf",
-  "FaDeezer",
-  "FaDelicious",
-  "FaDemocrat",
-  "FaDeploydog",
-  "FaDeskpro",
-  "FaDesktop",
-  "FaDev",
-  "FaDeviantart",
-  "FaDharmachakra",
-  "FaDhl",
-  "FaDiagnoses",
-  "FaDiaspora",
-  "FaDice",
-  "FaDiceD20",
-  "FaDiceD6",
-  "FaDiceFive",
-  "FaDiceFour",
-  "FaDiceOne",
-  "FaDiceSix",
-  "FaDiceThree",
-  "FaDiceTwo",
-  "FaDigg",
-  "FaDigitalOcean",
-  "FaDigitalTachograph",
-  "FaDirections",
-  "FaDiscord",
-  "FaDiscourse",
-  "FaDisease",
-  "FaDivide",
-  "FaDizzy",
-  "FaDna",
-  "FaDochub",
-  "FaDocker",
-  "FaDog",
-  "FaDollarSign",
-  "FaDolly",
-  "FaDollyFlatbed",
-  "FaDonate",
-  "FaDoorClosed",
-  "FaDoorOpen",
-  "FaDotCircle",
-  "FaDove",
-  "FaDownload",
-  "FaDraft2Digital",
-  "FaDraftingCompass",
-  "FaDragon",
-  "FaDrawPolygon",
-  "FaDribbble",
-  "FaDribbbleSquare",
-  "FaDropbox",
-  "FaDrum",
-  "FaDrumSteelpan",
-  "FaDrumstickBite",
-  "FaDrupal",
-  "FaDumbbell",
-  "FaDumpster",
-  "FaDumpsterFire",
-  "FaDungeon",
-  "FaDyalog",
-  "FaEarlybirds",
-  "FaEbay",
-  "FaEdge",
-  "FaEdgeLegacy",
-  "FaEdit",
-  "FaEgg",
-  "FaEject",
-  "FaElementor",
-  "FaEllipsisH",
-  "FaEllipsisV",
-  "FaEllo",
-  "FaEmber",
-  "FaEmpire",
-  "FaEnvelope",
-  "FaEnvelopeOpen",
-  "FaEnvelopeOpenText",
-  "FaEnvelopeSquare",
-  "FaEnvira",
-  "FaEquals",
-  "FaEraser",
-  "FaErlang",
-  "FaEthereum",
-  "FaEthernet",
-  "FaEtsy",
-  "FaEuroSign",
-  "FaEvernote",
-  "FaExchangeAlt",
-  "FaExclamation",
-  "FaExclamationCircle",
-  "FaExclamationTriangle",
-  "FaExpand",
-  "FaExpandAlt",
-  "FaExpandArrowsAlt",
-  "FaExpeditedssl",
-  "FaExternalLinkAlt",
-  "FaExternalLinkSquareAlt",
-  "FaEye",
-  "FaEyeDropper",
-  "FaEyeSlash",
-  "FaFacebook",
-  "FaFacebookF",
-  "FaFacebookMessenger",
-  "FaFacebookSquare",
-  "FaFan",
-  "FaFantasyFlightGames",
-  "FaFastBackward",
-  "FaFastForward",
-  "FaFaucet",
-  "FaFax",
-  "FaFeather",
-  "FaFeatherAlt",
-  "FaFedex",
-  "FaFedora",
-  "FaFemale",
-  "FaFighterJet",
-  "FaFigma",
-  "FaFile",
-  "FaFileAlt",
-  "FaFileArchive",
-  "FaFileAudio",
-  "FaFileCode",
-  "FaFileContract",
-  "FaFileCsv",
-  "FaFileDownload",
-  "FaFileExcel",
-  "FaFileExport",
-  "FaFileImage",
-  "FaFileImport",
-  "FaFileInvoice",
-  "FaFileInvoiceDollar",
-  "FaFileMedical",
-  "FaFileMedicalAlt",
-  "FaFilePdf",
-  "FaFilePowerpoint",
-  "FaFilePrescription",
-  "FaFileSignature",
-  "FaFileUpload",
-  "FaFileVideo",
-  "FaFileWord",
-  "FaFill",
-  "FaFillDrip",
-  "FaFilm",
-  "FaFilter",
-  "FaFingerprint",
-  "FaFire",
-  "FaFireAlt",
-  "FaFireExtinguisher",
-  "FaFirefox",
-  "FaFirefoxBrowser",
-  "FaFirstAid",
-  "FaFirstOrder",
-  "FaFirstOrderAlt",
-  "FaFirstdraft",
-  "FaFish",
-  "FaFistRaised",
-  "FaFlag",
-  "FaFlagCheckered",
-  "FaFlagUsa",
-  "FaFlask",
-  "FaFlickr",
-  "FaFlipboard",
-  "FaFlushed",
-  "FaFly",
-  "FaFolder",
-  "FaFolderMinus",
-  "FaFolderOpen",
-  "FaFolderPlus",
-  "FaFont",
-  "FaFontAwesome",
-  "FaFontAwesomeAlt",
-  "FaFontAwesomeFlag",
-  "FaFontAwesomeLogoFull",
-  "FaFonticons",
-  "FaFonticonsFi",
-  "FaFootballBall",
-  "FaFortAwesome",
-  "FaFortAwesomeAlt",
-  "FaForumbee",
-  "FaForward",
-  "FaFoursquare",
-  "FaFreeCodeCamp",
-  "FaFreebsd",
-  "FaFrog",
-  "FaFrown",
-  "FaFrownOpen",
-  "FaFulcrum",
-  "FaFunnelDollar",
-  "FaFutbol",
-  "FaGalacticRepublic",
-  "FaGalacticSenate",
-  "FaGamepad",
-  "FaGasPump",
-  "FaGavel",
-  "FaGem",
-  "FaGenderless",
-  "FaGetPocket",
-  "FaGg",
-  "FaGgCircle",
-  "FaGhost",
-  "FaGift",
-  "FaGifts",
-  "FaGit",
-  "FaGitAlt",
-  "FaGitSquare",
-  "FaGithub",
-  "FaGithubAlt",
-  "FaGithubSquare",
-  "FaGitkraken",
-  "FaGitlab",
-  "FaGitter",
-  "FaGlassCheers",
-  "FaGlassMartini",
-  "FaGlassMartiniAlt",
-  "FaGlassWhiskey",
-  "FaGlasses",
-  "FaGlide",
-  "FaGlideG",
-  "FaGlobe",
-  "FaGlobeAfrica",
-  "FaGlobeAmericas",
-  "FaGlobeAsia",
-  "FaGlobeEurope",
-  "FaGofore",
-  "FaGolfBall",
-  "FaGoodreads",
-  "FaGoodreadsG",
-  "FaGoogle",
-  "FaGoogleDrive",
-  "FaGooglePay",
-  "FaGooglePlay",
-  "FaGooglePlus",
-  "FaGooglePlusG",
-  "FaGooglePlusSquare",
-  "FaGoogleWallet",
-  "FaGopuram",
-  "FaGraduationCap",
-  "FaGratipay",
-  "FaGrav",
-  "FaGreaterThan",
-  "FaGreaterThanEqual",
-  "FaGrimace",
-  "FaGrin",
-  "FaGrinAlt",
-  "FaGrinBeam",
-  "FaGrinBeamSweat",
-  "FaGrinHearts",
-  "FaGrinSquint",
-  "FaGrinSquintTears",
-  "FaGrinStars",
-  "FaGrinTears",
-  "FaGrinTongue",
-  "FaGrinTongueSquint",
-  "FaGrinTongueWink",
-  "FaGrinWink",
-  "FaGripHorizontal",
-  "FaGripLines",
-  "FaGripLinesVertical",
-  "FaGripVertical",
-  "FaGripfire",
-  "FaGrunt",
-  "FaGuilded",
-  "FaGuitar",
-  "FaGulp",
-  "FaHSquare",
-  "FaHackerNews",
-  "FaHackerNewsSquare",
-  "FaHackerrank",
-  "FaHamburger",
-  "FaHammer",
-  "FaHamsa",
-  "FaHandHolding",
-  "FaHandHoldingHeart",
-  "FaHandHoldingMedical",
-  "FaHandHoldingUsd",
-  "FaHandHoldingWater",
-  "FaHandLizard",
-  "FaHandMiddleFinger",
-  "FaHandPaper",
-  "FaHandPeace",
-  "FaHandPointDown",
-  "FaHandPointLeft",
-  "FaHandPointRight",
-  "FaHandPointUp",
-  "FaHandPointer",
-  "FaHandRock",
-  "FaHandScissors",
-  "FaHandSparkles",
-  "FaHandSpock",
-  "FaHands",
-  "FaHandsHelping",
-  "FaHandsWash",
-  "FaHandshake",
-  "FaHandshakeAltSlash",
-  "FaHandshakeSlash",
-  "FaHanukiah",
-  "FaHardHat",
-  "FaHashtag",
-  "FaHatCowboy",
-  "FaHatCowboySide",
-  "FaHatWizard",
-  "FaHdd",
-  "FaHeadSideCough",
-  "FaHeadSideCoughSlash",
-  "FaHeadSideMask",
-  "FaHeadSideVirus",
-  "FaHeading",
-  "FaHeadphones",
-  "FaHeadphonesAlt",
-  "FaHeadset",
-  "FaHeart",
-  "FaHeartBroken",
-  "FaHeartbeat",
-  "FaHelicopter",
-  "FaHighlighter",
-  "FaHiking",
-  "FaHippo",
-  "FaHips",
-  "FaHireAHelper",
-  "FaHistory",
-  "FaHive",
-  "FaHockeyPuck",
-  "FaHollyBerry",
-  "FaHome",
-  "FaHooli",
-  "FaHornbill",
-  "FaHorse",
-  "FaHorseHead",
-  "FaHospital",
-  "FaHospitalAlt",
-  "FaHospitalSymbol",
-  "FaHospitalUser",
-  "FaHotTub",
-  "FaHotdog",
-  "FaHotel",
-  "FaHotjar",
-  "FaHourglass",
-  "FaHourglassEnd",
-  "FaHourglassHalf",
-  "FaHourglassStart",
-  "FaHouseDamage",
-  "FaHouseUser",
-  "FaHouzz",
-  "FaHryvnia",
-  "FaHtml5",
-  "FaHubspot",
-  "FaICursor",
-  "FaIceCream",
-  "FaIcicles",
-  "FaIcons",
-  "FaIdBadge",
-  "FaIdCard",
-  "FaIdCardAlt",
-  "FaIdeal",
-  "FaIgloo",
-  "FaImage",
-  "FaImages",
-  "FaImdb",
-  "FaInbox",
-  "FaIndent",
-  "FaIndustry",
-  "FaInfinity",
-  "FaInfo",
-  "FaInfoCircle",
-  "FaInnosoft",
-  "FaInstagram",
-  "FaInstagramSquare",
-  "FaInstalod",
-  "FaIntercom",
-  "FaInternetExplorer",
-  "FaInvision",
-  "FaIoxhost",
-  "FaItalic",
-  "FaItchIo",
-  "FaItunes",
-  "FaItunesNote",
-  "FaJava",
-  "FaJedi",
-  "FaJediOrder",
-  "FaJenkins",
-  "FaJira",
-  "FaJoget",
-  "FaJoint",
-  "FaJoomla",
-  "FaJournalWhills",
-  "FaJs",
-  "FaJsSquare",
-  "FaJsfiddle",
-  "FaKaaba",
-  "FaKaggle",
-  "FaKey",
-  "FaKeybase",
-  "FaKeyboard",
-  "FaKeycdn",
-  "FaKhanda",
-  "FaKickstarter",
-  "FaKickstarterK",
-  "FaKiss",
-  "FaKissBeam",
-  "FaKissWinkHeart",
-  "FaKiwiBird",
-  "FaKorvue",
-  "FaLandmark",
-  "FaLanguage",
-  "FaLaptop",
-  "FaLaptopCode",
-  "FaLaptopHouse",
-  "FaLaptopMedical",
-  "FaLaravel",
-  "FaLastfm",
-  "FaLastfmSquare",
-  "FaLaugh",
-  "FaLaughBeam",
-  "FaLaughSquint",
-  "FaLaughWink",
-  "FaLayerGroup",
-  "FaLeaf",
-  "FaLeanpub",
-  "FaLemon",
-  "FaLess",
-  "FaLessThan",
-  "FaLessThanEqual",
-  "FaLevelDownAlt",
-  "FaLevelUpAlt",
-  "FaLifeRing",
-  "FaLightbulb",
-  "FaLine",
-  "FaLink",
-  "FaLinkedin",
-  "FaLinkedinIn",
-  "FaLinode",
-  "FaLinux",
-  "FaLiraSign",
-  "FaList",
-  "FaListAlt",
-  "FaListOl",
-  "FaListUl",
-  "FaLocationArrow",
-  "FaLock",
-  "FaLockOpen",
-  "FaLongArrowAltDown",
-  "FaLongArrowAltLeft",
-  "FaLongArrowAltRight",
-  "FaLongArrowAltUp",
-  "FaLowVision",
-  "FaLuggageCart",
-  "FaLungs",
-  "FaLungsVirus",
-  "FaLyft",
-  "FaMagento",
-  "FaMagic",
-  "FaMagnet",
-  "FaMailBulk",
-  "FaMailchimp",
-  "FaMale",
-  "FaMandalorian",
-  "FaMap",
-  "FaMapMarked",
-  "FaMapMarkedAlt",
-  "FaMapMarker",
-  "FaMapMarkerAlt",
-  "FaMapPin",
-  "FaMapSigns",
-  "FaMarkdown",
-  "FaMarker",
-  "FaMars",
-  "FaMarsDouble",
-  "FaMarsStroke",
-  "FaMarsStrokeH",
-  "FaMarsStrokeV",
-  "FaMask",
-  "FaMastodon",
-  "FaMaxcdn",
-  "FaMdb",
-  "FaMedal",
-  "FaMedapps",
-  "FaMedium",
-  "FaMediumM",
-  "FaMedkit",
-  "FaMedrt",
-  "FaMeetup",
-  "FaMegaport",
-  "FaMeh",
-  "FaMehBlank",
-  "FaMehRollingEyes",
-  "FaMemory",
-  "FaMendeley",
-  "FaMenorah",
-  "FaMercury",
-  "FaMeteor",
-  "FaMicroblog",
-  "FaMicrochip",
-  "FaMicrophone",
-  "FaMicrophoneAlt",
-  "FaMicrophoneAltSlash",
-  "FaMicrophoneSlash",
-  "FaMicroscope",
-  "FaMicrosoft",
-  "FaMinus",
-  "FaMinusCircle",
-  "FaMinusSquare",
-  "FaMitten",
-  "FaMix",
-  "FaMixcloud",
-  "FaMixer",
-  "FaMizuni",
-  "FaMobile",
-  "FaMobileAlt",
-  "FaModx",
-  "FaMonero",
-  "FaMoneyBill",
-  "FaMoneyBillAlt",
-  "FaMoneyBillWave",
-  "FaMoneyBillWaveAlt",
-  "FaMoneyCheck",
-  "FaMoneyCheckAlt",
-  "FaMonument",
-  "FaMoon",
-  "FaMortarPestle",
-  "FaMosque",
-  "FaMotorcycle",
-  "FaMountain",
-  "FaMouse",
-  "FaMousePointer",
-  "FaMugHot",
-  "FaMusic",
-  "FaNapster",
-  "FaNeos",
-  "FaNetworkWired",
-  "FaNeuter",
-  "FaNewspaper",
-  "FaNimblr",
-  "FaNode",
-  "FaNodeJs",
-  "FaNotEqual",
-  "FaNotesMedical",
-  "FaNpm",
-  "FaNs8",
-  "FaNutritionix",
-  "FaObjectGroup",
-  "FaObjectUngroup",
-  "FaOctopusDeploy",
-  "FaOdnoklassniki",
-  "FaOdnoklassnikiSquare",
-  "FaOilCan",
-  "FaOldRepublic",
-  "FaOm",
-  "FaOpencart",
-  "FaOpenid",
-  "FaOpera",
-  "FaOptinMonster",
-  "FaOrcid",
-  "FaOsi",
-  "FaOtter",
-  "FaOutdent",
-  "FaPage4",
-  "FaPagelines",
-  "FaPager",
-  "FaPaintBrush",
-  "FaPaintRoller",
-  "FaPalette",
-  "FaPalfed",
-  "FaPallet",
-  "FaPaperPlane",
-  "FaPaperclip",
-  "FaParachuteBox",
-  "FaParagraph",
-  "FaParking",
-  "FaPassport",
-  "FaPastafarianism",
-  "FaPaste",
-  "FaPatreon",
-  "FaPause",
-  "FaPauseCircle",
-  "FaPaw",
-  "FaPaypal",
-  "FaPeace",
-  "FaPen",
-  "FaPenAlt",
-  "FaPenFancy",
-  "FaPenNib",
-  "FaPenSquare",
-  "FaPencilAlt",
-  "FaPencilRuler",
-  "FaPennyArcade",
-  "FaPeopleArrows",
-  "FaPeopleCarry",
-  "FaPepperHot",
-  "FaPerbyte",
-  "FaPercent",
-  "FaPercentage",
-  "FaPeriscope",
-  "FaPersonBooth",
-  "FaPhabricator",
-  "FaPhoenixFramework",
-  "FaPhoenixSquadron",
-  "FaPhone",
-  "FaPhoneAlt",
-  "FaPhoneSlash",
-  "FaPhoneSquare",
-  "FaPhoneSquareAlt",
-  "FaPhoneVolume",
-  "FaPhotoVideo",
-  "FaPhp",
-  "FaPiedPiper",
-  "FaPiedPiperAlt",
-  "FaPiedPiperHat",
-  "FaPiedPiperPp",
-  "FaPiedPiperSquare",
-  "FaPiggyBank",
-  "FaPills",
-  "FaPinterest",
-  "FaPinterestP",
-  "FaPinterestSquare",
-  "FaPizzaSlice",
-  "FaPlaceOfWorship",
-  "FaPlane",
-  "FaPlaneArrival",
-  "FaPlaneDeparture",
-  "FaPlaneSlash",
-  "FaPlay",
-  "FaPlayCircle",
-  "FaPlaystation",
-  "FaPlug",
-  "FaPlus",
-  "FaPlusCircle",
-  "FaPlusSquare",
-  "FaPodcast",
-  "FaPoll",
-  "FaPollH",
-  "FaPoo",
-  "FaPooStorm",
-  "FaPoop",
-  "FaPortrait",
-  "FaPoundSign",
-  "FaPowerOff",
-  "FaPray",
-  "FaPrayingHands",
-  "FaPrescription",
-  "FaPrescriptionBottle",
-  "FaPrescriptionBottleAlt",
-  "FaPrint",
-  "FaProcedures",
-  "FaProductHunt",
-  "FaProjectDiagram",
-  "FaPumpMedical",
-  "FaPumpSoap",
-  "FaPushed",
-  "FaPuzzlePiece",
-  "FaPython",
-  "FaQq",
-  "FaQrcode",
-  "FaQuestion",
-  "FaQuestionCircle",
-  "FaQuidditch",
-  "FaQuinscape",
-  "FaQuora",
-  "FaQuoteLeft",
-  "FaQuoteRight",
-  "FaQuran",
-  "FaRProject",
-  "FaRadiation",
-  "FaRadiationAlt",
-  "FaRainbow",
-  "FaRandom",
-  "FaRaspberryPi",
-  "FaRavelry",
-  "FaReact",
-  "FaReacteurope",
-  "FaReadme",
-  "FaRebel",
-  "FaReceipt",
-  "FaRecordVinyl",
-  "FaRecycle",
-  "FaRedRiver",
-  "FaReddit",
-  "FaRedditAlien",
-  "FaRedditSquare",
-  "FaRedhat",
-  "FaRedo",
-  "FaRedoAlt",
-  "FaRegAddressBook",
-  "FaRegAddressCard",
-  "FaRegAngry",
-  "FaRegArrowAltCircleDown",
-  "FaRegArrowAltCircleLeft",
-  "FaRegArrowAltCircleRight",
-  "FaRegArrowAltCircleUp",
-  "FaRegBell",
-  "FaRegBellSlash",
-  "FaRegBookmark",
-  "FaRegBuilding",
-  "FaRegCalendar",
-  "FaRegCalendarAlt",
-  "FaRegCalendarCheck",
-  "FaRegCalendarMinus",
-  "FaRegCalendarPlus",
-  "FaRegCalendarTimes",
-  "FaRegCaretSquareDown",
-  "FaRegCaretSquareLeft",
-  "FaRegCaretSquareRight",
-  "FaRegCaretSquareUp",
-  "FaRegChartBar",
-  "FaRegCheckCircle",
-  "FaRegCheckSquare",
-  "FaRegCircle",
-  "FaRegClipboard",
-  "FaRegClock",
-  "FaRegClone",
-  "FaRegClosedCaptioning",
-  "FaRegComment",
-  "FaRegCommentAlt",
-  "FaRegCommentDots",
-  "FaRegComments",
-  "FaRegCompass",
-  "FaRegCopy",
-  "FaRegCopyright",
-  "FaRegCreditCard",
-  "FaRegDizzy",
-  "FaRegDotCircle",
-  "FaRegEdit",
-  "FaRegEnvelope",
-  "FaRegEnvelopeOpen",
-  "FaRegEye",
-  "FaRegEyeSlash",
-  "FaRegFile",
-  "FaRegFileAlt",
-  "FaRegFileArchive",
-  "FaRegFileAudio",
-  "FaRegFileCode",
-  "FaRegFileExcel",
-  "FaRegFileImage",
-  "FaRegFilePdf",
-  "FaRegFilePowerpoint",
-  "FaRegFileVideo",
-  "FaRegFileWord",
-  "FaRegFlag",
-  "FaRegFlushed",
-  "FaRegFolder",
-  "FaRegFolderOpen",
-  "FaRegFontAwesomeLogoFull",
-  "FaRegFrown",
-  "FaRegFrownOpen",
-  "FaRegFutbol",
-  "FaRegGem",
-  "FaRegGrimace",
-  "FaRegGrin",
-  "FaRegGrinAlt",
-  "FaRegGrinBeam",
-  "FaRegGrinBeamSweat",
-  "FaRegGrinHearts",
-  "FaRegGrinSquint",
-  "FaRegGrinSquintTears",
-  "FaRegGrinStars",
-  "FaRegGrinTears",
-  "FaRegGrinTongue",
-  "FaRegGrinTongueSquint",
-  "FaRegGrinTongueWink",
-  "FaRegGrinWink",
-  "FaRegHandLizard",
-  "FaRegHandPaper",
-  "FaRegHandPeace",
-  "FaRegHandPointDown",
-  "FaRegHandPointLeft",
-  "FaRegHandPointRight",
-  "FaRegHandPointUp",
-  "FaRegHandPointer",
-  "FaRegHandRock",
-  "FaRegHandScissors",
-  "FaRegHandSpock",
-  "FaRegHandshake",
-  "FaRegHdd",
-  "FaRegHeart",
-  "FaRegHospital",
-  "FaRegHourglass",
-  "FaRegIdBadge",
-  "FaRegIdCard",
-  "FaRegImage",
-  "FaRegImages",
-  "FaRegKeyboard",
-  "FaRegKiss",
-  "FaRegKissBeam",
-  "FaRegKissWinkHeart",
-  "FaRegLaugh",
-  "FaRegLaughBeam",
-  "FaRegLaughSquint",
-  "FaRegLaughWink",
-  "FaRegLemon",
-  "FaRegLifeRing",
-  "FaRegLightbulb",
-  "FaRegListAlt",
-  "FaRegMap",
-  "FaRegMeh",
-  "FaRegMehBlank",
-  "FaRegMehRollingEyes",
-  "FaRegMinusSquare",
-  "FaRegMoneyBillAlt",
-  "FaRegMoon",
-  "FaRegNewspaper",
-  "FaRegObjectGroup",
-  "FaRegObjectUngroup",
-  "FaRegPaperPlane",
-  "FaRegPauseCircle",
-  "FaRegPlayCircle",
-  "FaRegPlusSquare",
-  "FaRegQuestionCircle",
-  "FaRegRegistered",
-  "FaRegSadCry",
-  "FaRegSadTear",
-  "FaRegSave",
-  "FaRegShareSquare",
-  "FaRegSmile",
-  "FaRegSmileBeam",
-  "FaRegSmileWink",
-  "FaRegSnowflake",
-  "FaRegSquare",
-  "FaRegStar",
-  "FaRegStarHalf",
-  "FaRegStickyNote",
-  "FaRegStopCircle",
-  "FaRegSun",
-  "FaRegSurprise",
-  "FaRegThumbsDown",
-  "FaRegThumbsUp",
-  "FaRegTimesCircle",
-  "FaRegTired",
-  "FaRegTrashAlt",
-  "FaRegUser",
-  "FaRegUserCircle",
-  "FaRegWindowClose",
-  "FaRegWindowMaximize",
-  "FaRegWindowMinimize",
-  "FaRegWindowRestore",
-  "FaRegistered",
-  "FaRemoveFormat",
-  "FaRenren",
-  "FaReply",
-  "FaReplyAll",
-  "FaReplyd",
-  "FaRepublican",
-  "FaResearchgate",
-  "FaResolving",
-  "FaRestroom",
-  "FaRetweet",
-  "FaRev",
-  "FaRibbon",
-  "FaRing",
-  "FaRoad",
-  "FaRobot",
-  "FaRocket",
-  "FaRocketchat",
-  "FaRockrms",
-  "FaRoute",
-  "FaRss",
-  "FaRssSquare",
-  "FaRubleSign",
-  "FaRuler",
-  "FaRulerCombined",
-  "FaRulerHorizontal",
-  "FaRulerVertical",
-  "FaRunning",
-  "FaRupeeSign",
-  "FaRust",
-  "FaSadCry",
-  "FaSadTear",
-  "FaSafari",
-  "FaSalesforce",
-  "FaSass",
-  "FaSatellite",
-  "FaSatelliteDish",
-  "FaSave",
-  "FaSchlix",
-  "FaSchool",
-  "FaScrewdriver",
-  "FaScribd",
-  "FaScroll",
-  "FaSdCard",
-  "FaSearch",
-  "FaSearchDollar",
-  "FaSearchLocation",
-  "FaSearchMinus",
-  "FaSearchPlus",
-  "FaSearchengin",
-  "FaSeedling",
-  "FaSellcast",
-  "FaSellsy",
-  "FaServer",
-  "FaServicestack",
-  "FaShapes",
-  "FaShare",
-  "FaShareAlt",
-  "FaShareAltSquare",
-  "FaShareSquare",
-  "FaShekelSign",
-  "FaShieldAlt",
-  "FaShieldVirus",
-  "FaShip",
-  "FaShippingFast",
-  "FaShirtsinbulk",
-  "FaShoePrints",
-  "FaShopify",
-  "FaShoppingBag",
-  "FaShoppingBasket",
-  "FaShoppingCart",
-  "FaShopware",
-  "FaShower",
-  "FaShuttleVan",
-  "FaSign",
-  "FaSignInAlt",
-  "FaSignLanguage",
-  "FaSignOutAlt",
-  "FaSignal",
-  "FaSignature",
-  "FaSimCard",
-  "FaSimplybuilt",
-  "FaSink",
-  "FaSistrix",
-  "FaSitemap",
-  "FaSith",
-  "FaSkating",
-  "FaSketch",
-  "FaSkiing",
-  "FaSkiingNordic",
-  "FaSkull",
-  "FaSkullCrossbones",
-  "FaSkyatlas",
-  "FaSkype",
-  "FaSlack",
-  "FaSlackHash",
-  "FaSlash",
-  "FaSleigh",
-  "FaSlidersH",
-  "FaSlideshare",
-  "FaSmile",
-  "FaSmileBeam",
-  "FaSmileWink",
-  "FaSmog",
-  "FaSmoking",
-  "FaSmokingBan",
-  "FaSms",
-  "FaSnapchat",
-  "FaSnapchatGhost",
-  "FaSnapchatSquare",
-  "FaSnowboarding",
-  "FaSnowflake",
-  "FaSnowman",
-  "FaSnowplow",
-  "FaSoap",
-  "FaSocks",
-  "FaSolarPanel",
-  "FaSort",
-  "FaSortAlphaDown",
-  "FaSortAlphaDownAlt",
-  "FaSortAlphaUp",
-  "FaSortAlphaUpAlt",
-  "FaSortAmountDown",
-  "FaSortAmountDownAlt",
-  "FaSortAmountUp",
-  "FaSortAmountUpAlt",
-  "FaSortDown",
-  "FaSortNumericDown",
-  "FaSortNumericDownAlt",
-  "FaSortNumericUp",
-  "FaSortNumericUpAlt",
-  "FaSortUp",
-  "FaSoundcloud",
-  "FaSourcetree",
-  "FaSpa",
-  "FaSpaceShuttle",
-  "FaSpeakap",
-  "FaSpeakerDeck",
-  "FaSpellCheck",
-  "FaSpider",
-  "FaSpinner",
-  "FaSplotch",
-  "FaSpotify",
-  "FaSprayCan",
-  "FaSquare",
-  "FaSquareFull",
-  "FaSquareRootAlt",
-  "FaSquarespace",
-  "FaStackExchange",
-  "FaStackOverflow",
-  "FaStackpath",
-  "FaStamp",
-  "FaStar",
-  "FaStarAndCrescent",
-  "FaStarHalf",
-  "FaStarHalfAlt",
-  "FaStarOfDavid",
-  "FaStarOfLife",
-  "FaStaylinked",
-  "FaSteam",
-  "FaSteamSquare",
-  "FaSteamSymbol",
-  "FaStepBackward",
-  "FaStepForward",
-  "FaStethoscope",
-  "FaStickerMule",
-  "FaStickyNote",
-  "FaStop",
-  "FaStopCircle",
-  "FaStopwatch",
-  "FaStopwatch20",
-  "FaStore",
-  "FaStoreAlt",
-  "FaStoreAltSlash",
-  "FaStoreSlash",
-  "FaStrava",
-  "FaStream",
-  "FaStreetView",
-  "FaStrikethrough",
-  "FaStripe",
-  "FaStripeS",
-  "FaStroopwafel",
-  "FaStudiovinari",
-  "FaStumbleupon",
-  "FaStumbleuponCircle",
-  "FaSubscript",
-  "FaSubway",
-  "FaSuitcase",
-  "FaSuitcaseRolling",
-  "FaSun",
-  "FaSuperpowers",
-  "FaSuperscript",
-  "FaSupple",
-  "FaSurprise",
-  "FaSuse",
-  "FaSwatchbook",
-  "FaSwift",
-  "FaSwimmer",
-  "FaSwimmingPool",
-  "FaSymfony",
-  "FaSynagogue",
-  "FaSync",
-  "FaSyncAlt",
-  "FaSyringe",
-  "FaTable",
-  "FaTableTennis",
-  "FaTablet",
-  "FaTabletAlt",
-  "FaTablets",
-  "FaTachometerAlt",
-  "FaTag",
-  "FaTags",
-  "FaTape",
-  "FaTasks",
-  "FaTaxi",
-  "FaTeamspeak",
-  "FaTeeth",
-  "FaTeethOpen",
-  "FaTelegram",
-  "FaTelegramPlane",
-  "FaTemperatureHigh",
-  "FaTemperatureLow",
-  "FaTencentWeibo",
-  "FaTenge",
-  "FaTerminal",
-  "FaTextHeight",
-  "FaTextWidth",
-  "FaTh",
-  "FaThLarge",
-  "FaThList",
-  "FaTheRedYeti",
-  "FaTheaterMasks",
-  "FaThemeco",
-  "FaThemeisle",
-  "FaThermometer",
-  "FaThermometerEmpty",
-  "FaThermometerFull",
-  "FaThermometerHalf",
-  "FaThermometerQuarter",
-  "FaThermometerThreeQuarters",
-  "FaThinkPeaks",
-  "FaThumbsDown",
-  "FaThumbsUp",
-  "FaThumbtack",
-  "FaTicketAlt",
-  "FaTiktok",
-  "FaTimes",
-  "FaTimesCircle",
-  "FaTint",
-  "FaTintSlash",
-  "FaTired",
-  "FaToggleOff",
-  "FaToggleOn",
-  "FaToilet",
-  "FaToiletPaper",
-  "FaToiletPaperSlash",
-  "FaToolbox",
-  "FaTools",
-  "FaTooth",
-  "FaTorah",
-  "FaToriiGate",
-  "FaTractor",
-  "FaTradeFederation",
-  "FaTrademark",
-  "FaTrafficLight",
-  "FaTrailer",
-  "FaTrain",
-  "FaTram",
-  "FaTransgender",
-  "FaTransgenderAlt",
-  "FaTrash",
-  "FaTrashAlt",
-  "FaTrashRestore",
-  "FaTrashRestoreAlt",
-  "FaTree",
-  "FaTrello",
-  "FaTripadvisor",
-  "FaTrophy",
-  "FaTruck",
-  "FaTruckLoading",
-  "FaTruckMonster",
-  "FaTruckMoving",
-  "FaTruckPickup",
-  "FaTshirt",
-  "FaTty",
-  "FaTumblr",
-  "FaTumblrSquare",
-  "FaTv",
-  "FaTwitch",
-  "FaTwitter",
-  "FaTwitterSquare",
-  "FaTypo3",
-  "FaUber",
-  "FaUbuntu",
-  "FaUikit",
-  "FaUmbraco",
-  "FaUmbrella",
-  "FaUmbrellaBeach",
-  "FaUncharted",
-  "FaUnderline",
-  "FaUndo",
-  "FaUndoAlt",
-  "FaUniregistry",
-  "FaUnity",
-  "FaUniversalAccess",
-  "FaUniversity",
-  "FaUnlink",
-  "FaUnlock",
-  "FaUnlockAlt",
-  "FaUnsplash",
-  "FaUntappd",
-  "FaUpload",
-  "FaUps",
-  "FaUsb",
-  "FaUser",
-  "FaUserAlt",
-  "FaUserAltSlash",
-  "FaUserAstronaut",
-  "FaUserCheck",
-  "FaUserCircle",
-  "FaUserClock",
-  "FaUserCog",
-  "FaUserEdit",
-  "FaUserFriends",
-  "FaUserGraduate",
-  "FaUserInjured",
-  "FaUserLock",
-  "FaUserMd",
-  "FaUserMinus",
-  "FaUserNinja",
-  "FaUserNurse",
-  "FaUserPlus",
-  "FaUserSecret",
-  "FaUserShield",
-  "FaUserSlash",
-  "FaUserTag",
-  "FaUserTie",
-  "FaUserTimes",
-  "FaUsers",
-  "FaUsersCog",
-  "FaUsersSlash",
-  "FaUsps",
-  "FaUssunnah",
-  "FaUtensilSpoon",
-  "FaUtensils",
-  "FaVaadin",
-  "FaVectorSquare",
-  "FaVenus",
-  "FaVenusDouble",
-  "FaVenusMars",
-  "FaVest",
-  "FaVestPatches",
-  "FaViacoin",
-  "FaViadeo",
-  "FaViadeoSquare",
-  "FaVial",
-  "FaVials",
-  "FaViber",
-  "FaVideo",
-  "FaVideoSlash",
-  "FaVihara",
-  "FaVimeo",
-  "FaVimeoSquare",
-  "FaVimeoV",
-  "FaVine",
-  "FaVirus",
-  "FaVirusSlash",
-  "FaViruses",
-  "FaVk",
-  "FaVnv",
-  "FaVoicemail",
-  "FaVolleyballBall",
-  "FaVolumeDown",
-  "FaVolumeMute",
-  "FaVolumeOff",
-  "FaVolumeUp",
-  "FaVoteYea",
-  "FaVrCardboard",
-  "FaVuejs",
-  "FaWalking",
-  "FaWallet",
-  "FaWarehouse",
-  "FaWatchmanMonitoring",
-  "FaWater",
-  "FaWaveSquare",
-  "FaWaze",
-  "FaWeebly",
-  "FaWeibo",
-  "FaWeight",
-  "FaWeightHanging",
-  "FaWeixin",
-  "FaWhatsapp",
-  "FaWhatsappSquare",
-  "FaWheelchair",
-  "FaWhmcs",
-  "FaWifi",
-  "FaWikipediaW",
-  "FaWind",
-  "FaWindowClose",
-  "FaWindowMaximize",
-  "FaWindowMinimize",
-  "FaWindowRestore",
-  "FaWindows",
-  "FaWineBottle",
-  "FaWineGlass",
-  "FaWineGlassAlt",
-  "FaWix",
-  "FaWizardsOfTheCoast",
-  "FaWodu",
-  "FaWolfPackBattalion",
-  "FaWonSign",
-  "FaWordpress",
-  "FaWordpressSimple",
-  "FaWpbeginner",
-  "FaWpexplorer",
-  "FaWpforms",
-  "FaWpressr",
-  "FaWrench",
-  "FaXRay",
-  "FaXbox",
-  "FaXing",
-  "FaXingSquare",
-  "FaYCombinator",
-  "FaYahoo",
-  "FaYammer",
-  "FaYandex",
-  "FaYandexInternational",
-  "FaYarn",
-  "FaYelp",
-  "FaYenSign",
-  "FaYinYang",
-  "FaYoast",
-  "FaYoutube",
-  "FaYoutubeSquare",
-  "FaZhihu",
-];
+  'Fa500Px',
+  'FaAccessibleIcon',
+  'FaAccusoft',
+  'FaAcquisitionsIncorporated',
+  'FaAd',
+  'FaAddressBook',
+  'FaAddressCard',
+  'FaAdjust',
+  'FaAdn',
+  'FaAdversal',
+  'FaAffiliatetheme',
+  'FaAirFreshener',
+  'FaAirbnb',
+  'FaAlgolia',
+  'FaAlignCenter',
+  'FaAlignJustify',
+  'FaAlignLeft',
+  'FaAlignRight',
+  'FaAlipay',
+  'FaAllergies',
+  'FaAmazon',
+  'FaAmazonPay',
+  'FaAmbulance',
+  'FaAmericanSignLanguageInterpreting',
+  'FaAmilia',
+  'FaAnchor',
+  'FaAndroid',
+  'FaAngellist',
+  'FaAngleDoubleDown',
+  'FaAngleDoubleLeft',
+  'FaAngleDoubleRight',
+  'FaAngleDoubleUp',
+  'FaAngleDown',
+  'FaAngleLeft',
+  'FaAngleRight',
+  'FaAngleUp',
+  'FaAngry',
+  'FaAngrycreative',
+  'FaAngular',
+  'FaAnkh',
+  'FaAppStore',
+  'FaAppStoreIos',
+  'FaApper',
+  'FaApple',
+  'FaAppleAlt',
+  'FaApplePay',
+  'FaArchive',
+  'FaArchway',
+  'FaArrowAltCircleDown',
+  'FaArrowAltCircleLeft',
+  'FaArrowAltCircleRight',
+  'FaArrowAltCircleUp',
+  'FaArrowCircleDown',
+  'FaArrowCircleLeft',
+  'FaArrowCircleRight',
+  'FaArrowCircleUp',
+  'FaArrowDown',
+  'FaArrowLeft',
+  'FaArrowRight',
+  'FaArrowUp',
+  'FaArrowsAlt',
+  'FaArrowsAltH',
+  'FaArrowsAltV',
+  'FaArtstation',
+  'FaAssistiveListeningSystems',
+  'FaAsterisk',
+  'FaAsymmetrik',
+  'FaAt',
+  'FaAtlas',
+  'FaAtlassian',
+  'FaAtom',
+  'FaAudible',
+  'FaAudioDescription',
+  'FaAutoprefixer',
+  'FaAvianex',
+  'FaAviato',
+  'FaAward',
+  'FaAws',
+  'FaBaby',
+  'FaBabyCarriage',
+  'FaBackspace',
+  'FaBackward',
+  'FaBacon',
+  'FaBacteria',
+  'FaBacterium',
+  'FaBahai',
+  'FaBalanceScale',
+  'FaBalanceScaleLeft',
+  'FaBalanceScaleRight',
+  'FaBan',
+  'FaBandAid',
+  'FaBandcamp',
+  'FaBarcode',
+  'FaBars',
+  'FaBaseballBall',
+  'FaBasketballBall',
+  'FaBath',
+  'FaBatteryEmpty',
+  'FaBatteryFull',
+  'FaBatteryHalf',
+  'FaBatteryQuarter',
+  'FaBatteryThreeQuarters',
+  'FaBattleNet',
+  'FaBed',
+  'FaBeer',
+  'FaBehance',
+  'FaBehanceSquare',
+  'FaBell',
+  'FaBellSlash',
+  'FaBezierCurve',
+  'FaBible',
+  'FaBicycle',
+  'FaBiking',
+  'FaBimobject',
+  'FaBinoculars',
+  'FaBiohazard',
+  'FaBirthdayCake',
+  'FaBitbucket',
+  'FaBitcoin',
+  'FaBity',
+  'FaBlackTie',
+  'FaBlackberry',
+  'FaBlender',
+  'FaBlenderPhone',
+  'FaBlind',
+  'FaBlog',
+  'FaBlogger',
+  'FaBloggerB',
+  'FaBluetooth',
+  'FaBluetoothB',
+  'FaBold',
+  'FaBolt',
+  'FaBomb',
+  'FaBone',
+  'FaBong',
+  'FaBook',
+  'FaBookDead',
+  'FaBookMedical',
+  'FaBookOpen',
+  'FaBookReader',
+  'FaBookmark',
+  'FaBootstrap',
+  'FaBorderAll',
+  'FaBorderNone',
+  'FaBorderStyle',
+  'FaBowlingBall',
+  'FaBox',
+  'FaBoxOpen',
+  'FaBoxTissue',
+  'FaBoxes',
+  'FaBraille',
+  'FaBrain',
+  'FaBreadSlice',
+  'FaBriefcase',
+  'FaBriefcaseMedical',
+  'FaBroadcastTower',
+  'FaBroom',
+  'FaBrush',
+  'FaBtc',
+  'FaBuffer',
+  'FaBug',
+  'FaBuilding',
+  'FaBullhorn',
+  'FaBullseye',
+  'FaBurn',
+  'FaBuromobelexperte',
+  'FaBus',
+  'FaBusAlt',
+  'FaBusinessTime',
+  'FaBuyNLarge',
+  'FaBuysellads',
+  'FaCalculator',
+  'FaCalendar',
+  'FaCalendarAlt',
+  'FaCalendarCheck',
+  'FaCalendarDay',
+  'FaCalendarMinus',
+  'FaCalendarPlus',
+  'FaCalendarTimes',
+  'FaCalendarWeek',
+  'FaCamera',
+  'FaCameraRetro',
+  'FaCampground',
+  'FaCanadianMapleLeaf',
+  'FaCandyCane',
+  'FaCannabis',
+  'FaCapsules',
+  'FaCar',
+  'FaCarAlt',
+  'FaCarBattery',
+  'FaCarCrash',
+  'FaCarSide',
+  'FaCaravan',
+  'FaCaretDown',
+  'FaCaretLeft',
+  'FaCaretRight',
+  'FaCaretSquareDown',
+  'FaCaretSquareLeft',
+  'FaCaretSquareRight',
+  'FaCaretSquareUp',
+  'FaCaretUp',
+  'FaCarrot',
+  'FaCartArrowDown',
+  'FaCartPlus',
+  'FaCashRegister',
+  'FaCat',
+  'FaCcAmazonPay',
+  'FaCcAmex',
+  'FaCcApplePay',
+  'FaCcDinersClub',
+  'FaCcDiscover',
+  'FaCcJcb',
+  'FaCcMastercard',
+  'FaCcPaypal',
+  'FaCcStripe',
+  'FaCcVisa',
+  'FaCentercode',
+  'FaCentos',
+  'FaCertificate',
+  'FaChair',
+  'FaChalkboard',
+  'FaChalkboardTeacher',
+  'FaChargingStation',
+  'FaChartArea',
+  'FaChartBar',
+  'FaChartLine',
+  'FaChartPie',
+  'FaCheck',
+  'FaCheckCircle',
+  'FaCheckDouble',
+  'FaCheckSquare',
+  'FaCheese',
+  'FaChess',
+  'FaChessBishop',
+  'FaChessBoard',
+  'FaChessKing',
+  'FaChessKnight',
+  'FaChessPawn',
+  'FaChessQueen',
+  'FaChessRook',
+  'FaChevronCircleDown',
+  'FaChevronCircleLeft',
+  'FaChevronCircleRight',
+  'FaChevronCircleUp',
+  'FaChevronDown',
+  'FaChevronLeft',
+  'FaChevronRight',
+  'FaChevronUp',
+  'FaChild',
+  'FaChrome',
+  'FaChromecast',
+  'FaChurch',
+  'FaCircle',
+  'FaCircleNotch',
+  'FaCity',
+  'FaClinicMedical',
+  'FaClipboard',
+  'FaClipboardCheck',
+  'FaClipboardList',
+  'FaClock',
+  'FaClone',
+  'FaClosedCaptioning',
+  'FaCloud',
+  'FaCloudDownloadAlt',
+  'FaCloudMeatball',
+  'FaCloudMoon',
+  'FaCloudMoonRain',
+  'FaCloudRain',
+  'FaCloudShowersHeavy',
+  'FaCloudSun',
+  'FaCloudSunRain',
+  'FaCloudUploadAlt',
+  'FaCloudflare',
+  'FaCloudscale',
+  'FaCloudsmith',
+  'FaCloudversify',
+  'FaCocktail',
+  'FaCode',
+  'FaCodeBranch',
+  'FaCodepen',
+  'FaCodiepie',
+  'FaCoffee',
+  'FaCog',
+  'FaCogs',
+  'FaCoins',
+  'FaColumns',
+  'FaComment',
+  'FaCommentAlt',
+  'FaCommentDollar',
+  'FaCommentDots',
+  'FaCommentMedical',
+  'FaCommentSlash',
+  'FaComments',
+  'FaCommentsDollar',
+  'FaCompactDisc',
+  'FaCompass',
+  'FaCompress',
+  'FaCompressAlt',
+  'FaCompressArrowsAlt',
+  'FaConciergeBell',
+  'FaConfluence',
+  'FaConnectdevelop',
+  'FaContao',
+  'FaCookie',
+  'FaCookieBite',
+  'FaCopy',
+  'FaCopyright',
+  'FaCottonBureau',
+  'FaCouch',
+  'FaCpanel',
+  'FaCreativeCommons',
+  'FaCreativeCommonsBy',
+  'FaCreativeCommonsNc',
+  'FaCreativeCommonsNcEu',
+  'FaCreativeCommonsNcJp',
+  'FaCreativeCommonsNd',
+  'FaCreativeCommonsPd',
+  'FaCreativeCommonsPdAlt',
+  'FaCreativeCommonsRemix',
+  'FaCreativeCommonsSa',
+  'FaCreativeCommonsSampling',
+  'FaCreativeCommonsSamplingPlus',
+  'FaCreativeCommonsShare',
+  'FaCreativeCommonsZero',
+  'FaCreditCard',
+  'FaCriticalRole',
+  'FaCrop',
+  'FaCropAlt',
+  'FaCross',
+  'FaCrosshairs',
+  'FaCrow',
+  'FaCrown',
+  'FaCrutch',
+  'FaCss3',
+  'FaCss3Alt',
+  'FaCube',
+  'FaCubes',
+  'FaCut',
+  'FaCuttlefish',
+  'FaDAndD',
+  'FaDAndDBeyond',
+  'FaDailymotion',
+  'FaDashcube',
+  'FaDatabase',
+  'FaDeaf',
+  'FaDeezer',
+  'FaDelicious',
+  'FaDemocrat',
+  'FaDeploydog',
+  'FaDeskpro',
+  'FaDesktop',
+  'FaDev',
+  'FaDeviantart',
+  'FaDharmachakra',
+  'FaDhl',
+  'FaDiagnoses',
+  'FaDiaspora',
+  'FaDice',
+  'FaDiceD20',
+  'FaDiceD6',
+  'FaDiceFive',
+  'FaDiceFour',
+  'FaDiceOne',
+  'FaDiceSix',
+  'FaDiceThree',
+  'FaDiceTwo',
+  'FaDigg',
+  'FaDigitalOcean',
+  'FaDigitalTachograph',
+  'FaDirections',
+  'FaDiscord',
+  'FaDiscourse',
+  'FaDisease',
+  'FaDivide',
+  'FaDizzy',
+  'FaDna',
+  'FaDochub',
+  'FaDocker',
+  'FaDog',
+  'FaDollarSign',
+  'FaDolly',
+  'FaDollyFlatbed',
+  'FaDonate',
+  'FaDoorClosed',
+  'FaDoorOpen',
+  'FaDotCircle',
+  'FaDove',
+  'FaDownload',
+  'FaDraft2Digital',
+  'FaDraftingCompass',
+  'FaDragon',
+  'FaDrawPolygon',
+  'FaDribbble',
+  'FaDribbbleSquare',
+  'FaDropbox',
+  'FaDrum',
+  'FaDrumSteelpan',
+  'FaDrumstickBite',
+  'FaDrupal',
+  'FaDumbbell',
+  'FaDumpster',
+  'FaDumpsterFire',
+  'FaDungeon',
+  'FaDyalog',
+  'FaEarlybirds',
+  'FaEbay',
+  'FaEdge',
+  'FaEdgeLegacy',
+  'FaEdit',
+  'FaEgg',
+  'FaEject',
+  'FaElementor',
+  'FaEllipsisH',
+  'FaEllipsisV',
+  'FaEllo',
+  'FaEmber',
+  'FaEmpire',
+  'FaEnvelope',
+  'FaEnvelopeOpen',
+  'FaEnvelopeOpenText',
+  'FaEnvelopeSquare',
+  'FaEnvira',
+  'FaEquals',
+  'FaEraser',
+  'FaErlang',
+  'FaEthereum',
+  'FaEthernet',
+  'FaEtsy',
+  'FaEuroSign',
+  'FaEvernote',
+  'FaExchangeAlt',
+  'FaExclamation',
+  'FaExclamationCircle',
+  'FaExclamationTriangle',
+  'FaExpand',
+  'FaExpandAlt',
+  'FaExpandArrowsAlt',
+  'FaExpeditedssl',
+  'FaExternalLinkAlt',
+  'FaExternalLinkSquareAlt',
+  'FaEye',
+  'FaEyeDropper',
+  'FaEyeSlash',
+  'FaFacebook',
+  'FaFacebookF',
+  'FaFacebookMessenger',
+  'FaFacebookSquare',
+  'FaFan',
+  'FaFantasyFlightGames',
+  'FaFastBackward',
+  'FaFastForward',
+  'FaFaucet',
+  'FaFax',
+  'FaFeather',
+  'FaFeatherAlt',
+  'FaFedex',
+  'FaFedora',
+  'FaFemale',
+  'FaFighterJet',
+  'FaFigma',
+  'FaFile',
+  'FaFileAlt',
+  'FaFileArchive',
+  'FaFileAudio',
+  'FaFileCode',
+  'FaFileContract',
+  'FaFileCsv',
+  'FaFileDownload',
+  'FaFileExcel',
+  'FaFileExport',
+  'FaFileImage',
+  'FaFileImport',
+  'FaFileInvoice',
+  'FaFileInvoiceDollar',
+  'FaFileMedical',
+  'FaFileMedicalAlt',
+  'FaFilePdf',
+  'FaFilePowerpoint',
+  'FaFilePrescription',
+  'FaFileSignature',
+  'FaFileUpload',
+  'FaFileVideo',
+  'FaFileWord',
+  'FaFill',
+  'FaFillDrip',
+  'FaFilm',
+  'FaFilter',
+  'FaFingerprint',
+  'FaFire',
+  'FaFireAlt',
+  'FaFireExtinguisher',
+  'FaFirefox',
+  'FaFirefoxBrowser',
+  'FaFirstAid',
+  'FaFirstOrder',
+  'FaFirstOrderAlt',
+  'FaFirstdraft',
+  'FaFish',
+  'FaFistRaised',
+  'FaFlag',
+  'FaFlagCheckered',
+  'FaFlagUsa',
+  'FaFlask',
+  'FaFlickr',
+  'FaFlipboard',
+  'FaFlushed',
+  'FaFly',
+  'FaFolder',
+  'FaFolderMinus',
+  'FaFolderOpen',
+  'FaFolderPlus',
+  'FaFont',
+  'FaFontAwesome',
+  'FaFontAwesomeAlt',
+  'FaFontAwesomeFlag',
+  'FaFontAwesomeLogoFull',
+  'FaFonticons',
+  'FaFonticonsFi',
+  'FaFootballBall',
+  'FaFortAwesome',
+  'FaFortAwesomeAlt',
+  'FaForumbee',
+  'FaForward',
+  'FaFoursquare',
+  'FaFreeCodeCamp',
+  'FaFreebsd',
+  'FaFrog',
+  'FaFrown',
+  'FaFrownOpen',
+  'FaFulcrum',
+  'FaFunnelDollar',
+  'FaFutbol',
+  'FaGalacticRepublic',
+  'FaGalacticSenate',
+  'FaGamepad',
+  'FaGasPump',
+  'FaGavel',
+  'FaGem',
+  'FaGenderless',
+  'FaGetPocket',
+  'FaGg',
+  'FaGgCircle',
+  'FaGhost',
+  'FaGift',
+  'FaGifts',
+  'FaGit',
+  'FaGitAlt',
+  'FaGitSquare',
+  'FaGithub',
+  'FaGithubAlt',
+  'FaGithubSquare',
+  'FaGitkraken',
+  'FaGitlab',
+  'FaGitter',
+  'FaGlassCheers',
+  'FaGlassMartini',
+  'FaGlassMartiniAlt',
+  'FaGlassWhiskey',
+  'FaGlasses',
+  'FaGlide',
+  'FaGlideG',
+  'FaGlobe',
+  'FaGlobeAfrica',
+  'FaGlobeAmericas',
+  'FaGlobeAsia',
+  'FaGlobeEurope',
+  'FaGofore',
+  'FaGolfBall',
+  'FaGoodreads',
+  'FaGoodreadsG',
+  'FaGoogle',
+  'FaGoogleDrive',
+  'FaGooglePay',
+  'FaGooglePlay',
+  'FaGooglePlus',
+  'FaGooglePlusG',
+  'FaGooglePlusSquare',
+  'FaGoogleWallet',
+  'FaGopuram',
+  'FaGraduationCap',
+  'FaGratipay',
+  'FaGrav',
+  'FaGreaterThan',
+  'FaGreaterThanEqual',
+  'FaGrimace',
+  'FaGrin',
+  'FaGrinAlt',
+  'FaGrinBeam',
+  'FaGrinBeamSweat',
+  'FaGrinHearts',
+  'FaGrinSquint',
+  'FaGrinSquintTears',
+  'FaGrinStars',
+  'FaGrinTears',
+  'FaGrinTongue',
+  'FaGrinTongueSquint',
+  'FaGrinTongueWink',
+  'FaGrinWink',
+  'FaGripHorizontal',
+  'FaGripLines',
+  'FaGripLinesVertical',
+  'FaGripVertical',
+  'FaGripfire',
+  'FaGrunt',
+  'FaGuilded',
+  'FaGuitar',
+  'FaGulp',
+  'FaHSquare',
+  'FaHackerNews',
+  'FaHackerNewsSquare',
+  'FaHackerrank',
+  'FaHamburger',
+  'FaHammer',
+  'FaHamsa',
+  'FaHandHolding',
+  'FaHandHoldingHeart',
+  'FaHandHoldingMedical',
+  'FaHandHoldingUsd',
+  'FaHandHoldingWater',
+  'FaHandLizard',
+  'FaHandMiddleFinger',
+  'FaHandPaper',
+  'FaHandPeace',
+  'FaHandPointDown',
+  'FaHandPointLeft',
+  'FaHandPointRight',
+  'FaHandPointUp',
+  'FaHandPointer',
+  'FaHandRock',
+  'FaHandScissors',
+  'FaHandSparkles',
+  'FaHandSpock',
+  'FaHands',
+  'FaHandsHelping',
+  'FaHandsWash',
+  'FaHandshake',
+  'FaHandshakeAltSlash',
+  'FaHandshakeSlash',
+  'FaHanukiah',
+  'FaHardHat',
+  'FaHashtag',
+  'FaHatCowboy',
+  'FaHatCowboySide',
+  'FaHatWizard',
+  'FaHdd',
+  'FaHeadSideCough',
+  'FaHeadSideCoughSlash',
+  'FaHeadSideMask',
+  'FaHeadSideVirus',
+  'FaHeading',
+  'FaHeadphones',
+  'FaHeadphonesAlt',
+  'FaHeadset',
+  'FaHeart',
+  'FaHeartBroken',
+  'FaHeartbeat',
+  'FaHelicopter',
+  'FaHighlighter',
+  'FaHiking',
+  'FaHippo',
+  'FaHips',
+  'FaHireAHelper',
+  'FaHistory',
+  'FaHive',
+  'FaHockeyPuck',
+  'FaHollyBerry',
+  'FaHome',
+  'FaHooli',
+  'FaHornbill',
+  'FaHorse',
+  'FaHorseHead',
+  'FaHospital',
+  'FaHospitalAlt',
+  'FaHospitalSymbol',
+  'FaHospitalUser',
+  'FaHotTub',
+  'FaHotdog',
+  'FaHotel',
+  'FaHotjar',
+  'FaHourglass',
+  'FaHourglassEnd',
+  'FaHourglassHalf',
+  'FaHourglassStart',
+  'FaHouseDamage',
+  'FaHouseUser',
+  'FaHouzz',
+  'FaHryvnia',
+  'FaHtml5',
+  'FaHubspot',
+  'FaICursor',
+  'FaIceCream',
+  'FaIcicles',
+  'FaIcons',
+  'FaIdBadge',
+  'FaIdCard',
+  'FaIdCardAlt',
+  'FaIdeal',
+  'FaIgloo',
+  'FaImage',
+  'FaImages',
+  'FaImdb',
+  'FaInbox',
+  'FaIndent',
+  'FaIndustry',
+  'FaInfinity',
+  'FaInfo',
+  'FaInfoCircle',
+  'FaInnosoft',
+  'FaInstagram',
+  'FaInstagramSquare',
+  'FaInstalod',
+  'FaIntercom',
+  'FaInternetExplorer',
+  'FaInvision',
+  'FaIoxhost',
+  'FaItalic',
+  'FaItchIo',
+  'FaItunes',
+  'FaItunesNote',
+  'FaJava',
+  'FaJedi',
+  'FaJediOrder',
+  'FaJenkins',
+  'FaJira',
+  'FaJoget',
+  'FaJoint',
+  'FaJoomla',
+  'FaJournalWhills',
+  'FaJs',
+  'FaJsSquare',
+  'FaJsfiddle',
+  'FaKaaba',
+  'FaKaggle',
+  'FaKey',
+  'FaKeybase',
+  'FaKeyboard',
+  'FaKeycdn',
+  'FaKhanda',
+  'FaKickstarter',
+  'FaKickstarterK',
+  'FaKiss',
+  'FaKissBeam',
+  'FaKissWinkHeart',
+  'FaKiwiBird',
+  'FaKorvue',
+  'FaLandmark',
+  'FaLanguage',
+  'FaLaptop',
+  'FaLaptopCode',
+  'FaLaptopHouse',
+  'FaLaptopMedical',
+  'FaLaravel',
+  'FaLastfm',
+  'FaLastfmSquare',
+  'FaLaugh',
+  'FaLaughBeam',
+  'FaLaughSquint',
+  'FaLaughWink',
+  'FaLayerGroup',
+  'FaLeaf',
+  'FaLeanpub',
+  'FaLemon',
+  'FaLess',
+  'FaLessThan',
+  'FaLessThanEqual',
+  'FaLevelDownAlt',
+  'FaLevelUpAlt',
+  'FaLifeRing',
+  'FaLightbulb',
+  'FaLine',
+  'FaLink',
+  'FaLinkedin',
+  'FaLinkedinIn',
+  'FaLinode',
+  'FaLinux',
+  'FaLiraSign',
+  'FaList',
+  'FaListAlt',
+  'FaListOl',
+  'FaListUl',
+  'FaLocationArrow',
+  'FaLock',
+  'FaLockOpen',
+  'FaLongArrowAltDown',
+  'FaLongArrowAltLeft',
+  'FaLongArrowAltRight',
+  'FaLongArrowAltUp',
+  'FaLowVision',
+  'FaLuggageCart',
+  'FaLungs',
+  'FaLungsVirus',
+  'FaLyft',
+  'FaMagento',
+  'FaMagic',
+  'FaMagnet',
+  'FaMailBulk',
+  'FaMailchimp',
+  'FaMale',
+  'FaMandalorian',
+  'FaMap',
+  'FaMapMarked',
+  'FaMapMarkedAlt',
+  'FaMapMarker',
+  'FaMapMarkerAlt',
+  'FaMapPin',
+  'FaMapSigns',
+  'FaMarkdown',
+  'FaMarker',
+  'FaMars',
+  'FaMarsDouble',
+  'FaMarsStroke',
+  'FaMarsStrokeH',
+  'FaMarsStrokeV',
+  'FaMask',
+  'FaMastodon',
+  'FaMaxcdn',
+  'FaMdb',
+  'FaMedal',
+  'FaMedapps',
+  'FaMedium',
+  'FaMediumM',
+  'FaMedkit',
+  'FaMedrt',
+  'FaMeetup',
+  'FaMegaport',
+  'FaMeh',
+  'FaMehBlank',
+  'FaMehRollingEyes',
+  'FaMemory',
+  'FaMendeley',
+  'FaMenorah',
+  'FaMercury',
+  'FaMeteor',
+  'FaMicroblog',
+  'FaMicrochip',
+  'FaMicrophone',
+  'FaMicrophoneAlt',
+  'FaMicrophoneAltSlash',
+  'FaMicrophoneSlash',
+  'FaMicroscope',
+  'FaMicrosoft',
+  'FaMinus',
+  'FaMinusCircle',
+  'FaMinusSquare',
+  'FaMitten',
+  'FaMix',
+  'FaMixcloud',
+  'FaMixer',
+  'FaMizuni',
+  'FaMobile',
+  'FaMobileAlt',
+  'FaModx',
+  'FaMonero',
+  'FaMoneyBill',
+  'FaMoneyBillAlt',
+  'FaMoneyBillWave',
+  'FaMoneyBillWaveAlt',
+  'FaMoneyCheck',
+  'FaMoneyCheckAlt',
+  'FaMonument',
+  'FaMoon',
+  'FaMortarPestle',
+  'FaMosque',
+  'FaMotorcycle',
+  'FaMountain',
+  'FaMouse',
+  'FaMousePointer',
+  'FaMugHot',
+  'FaMusic',
+  'FaNapster',
+  'FaNeos',
+  'FaNetworkWired',
+  'FaNeuter',
+  'FaNewspaper',
+  'FaNimblr',
+  'FaNode',
+  'FaNodeJs',
+  'FaNotEqual',
+  'FaNotesMedical',
+  'FaNpm',
+  'FaNs8',
+  'FaNutritionix',
+  'FaObjectGroup',
+  'FaObjectUngroup',
+  'FaOctopusDeploy',
+  'FaOdnoklassniki',
+  'FaOdnoklassnikiSquare',
+  'FaOilCan',
+  'FaOldRepublic',
+  'FaOm',
+  'FaOpencart',
+  'FaOpenid',
+  'FaOpera',
+  'FaOptinMonster',
+  'FaOrcid',
+  'FaOsi',
+  'FaOtter',
+  'FaOutdent',
+  'FaPage4',
+  'FaPagelines',
+  'FaPager',
+  'FaPaintBrush',
+  'FaPaintRoller',
+  'FaPalette',
+  'FaPalfed',
+  'FaPallet',
+  'FaPaperPlane',
+  'FaPaperclip',
+  'FaParachuteBox',
+  'FaParagraph',
+  'FaParking',
+  'FaPassport',
+  'FaPastafarianism',
+  'FaPaste',
+  'FaPatreon',
+  'FaPause',
+  'FaPauseCircle',
+  'FaPaw',
+  'FaPaypal',
+  'FaPeace',
+  'FaPen',
+  'FaPenAlt',
+  'FaPenFancy',
+  'FaPenNib',
+  'FaPenSquare',
+  'FaPencilAlt',
+  'FaPencilRuler',
+  'FaPennyArcade',
+  'FaPeopleArrows',
+  'FaPeopleCarry',
+  'FaPepperHot',
+  'FaPerbyte',
+  'FaPercent',
+  'FaPercentage',
+  'FaPeriscope',
+  'FaPersonBooth',
+  'FaPhabricator',
+  'FaPhoenixFramework',
+  'FaPhoenixSquadron',
+  'FaPhone',
+  'FaPhoneAlt',
+  'FaPhoneSlash',
+  'FaPhoneSquare',
+  'FaPhoneSquareAlt',
+  'FaPhoneVolume',
+  'FaPhotoVideo',
+  'FaPhp',
+  'FaPiedPiper',
+  'FaPiedPiperAlt',
+  'FaPiedPiperHat',
+  'FaPiedPiperPp',
+  'FaPiedPiperSquare',
+  'FaPiggyBank',
+  'FaPills',
+  'FaPinterest',
+  'FaPinterestP',
+  'FaPinterestSquare',
+  'FaPizzaSlice',
+  'FaPlaceOfWorship',
+  'FaPlane',
+  'FaPlaneArrival',
+  'FaPlaneDeparture',
+  'FaPlaneSlash',
+  'FaPlay',
+  'FaPlayCircle',
+  'FaPlaystation',
+  'FaPlug',
+  'FaPlus',
+  'FaPlusCircle',
+  'FaPlusSquare',
+  'FaPodcast',
+  'FaPoll',
+  'FaPollH',
+  'FaPoo',
+  'FaPooStorm',
+  'FaPoop',
+  'FaPortrait',
+  'FaPoundSign',
+  'FaPowerOff',
+  'FaPray',
+  'FaPrayingHands',
+  'FaPrescription',
+  'FaPrescriptionBottle',
+  'FaPrescriptionBottleAlt',
+  'FaPrint',
+  'FaProcedures',
+  'FaProductHunt',
+  'FaProjectDiagram',
+  'FaPumpMedical',
+  'FaPumpSoap',
+  'FaPushed',
+  'FaPuzzlePiece',
+  'FaPython',
+  'FaQq',
+  'FaQrcode',
+  'FaQuestion',
+  'FaQuestionCircle',
+  'FaQuidditch',
+  'FaQuinscape',
+  'FaQuora',
+  'FaQuoteLeft',
+  'FaQuoteRight',
+  'FaQuran',
+  'FaRProject',
+  'FaRadiation',
+  'FaRadiationAlt',
+  'FaRainbow',
+  'FaRandom',
+  'FaRaspberryPi',
+  'FaRavelry',
+  'FaReact',
+  'FaReacteurope',
+  'FaReadme',
+  'FaRebel',
+  'FaReceipt',
+  'FaRecordVinyl',
+  'FaRecycle',
+  'FaRedRiver',
+  'FaReddit',
+  'FaRedditAlien',
+  'FaRedditSquare',
+  'FaRedhat',
+  'FaRedo',
+  'FaRedoAlt',
+  'FaRegAddressBook',
+  'FaRegAddressCard',
+  'FaRegAngry',
+  'FaRegArrowAltCircleDown',
+  'FaRegArrowAltCircleLeft',
+  'FaRegArrowAltCircleRight',
+  'FaRegArrowAltCircleUp',
+  'FaRegBell',
+  'FaRegBellSlash',
+  'FaRegBookmark',
+  'FaRegBuilding',
+  'FaRegCalendar',
+  'FaRegCalendarAlt',
+  'FaRegCalendarCheck',
+  'FaRegCalendarMinus',
+  'FaRegCalendarPlus',
+  'FaRegCalendarTimes',
+  'FaRegCaretSquareDown',
+  'FaRegCaretSquareLeft',
+  'FaRegCaretSquareRight',
+  'FaRegCaretSquareUp',
+  'FaRegChartBar',
+  'FaRegCheckCircle',
+  'FaRegCheckSquare',
+  'FaRegCircle',
+  'FaRegClipboard',
+  'FaRegClock',
+  'FaRegClone',
+  'FaRegClosedCaptioning',
+  'FaRegComment',
+  'FaRegCommentAlt',
+  'FaRegCommentDots',
+  'FaRegComments',
+  'FaRegCompass',
+  'FaRegCopy',
+  'FaRegCopyright',
+  'FaRegCreditCard',
+  'FaRegDizzy',
+  'FaRegDotCircle',
+  'FaRegEdit',
+  'FaRegEnvelope',
+  'FaRegEnvelopeOpen',
+  'FaRegEye',
+  'FaRegEyeSlash',
+  'FaRegFile',
+  'FaRegFileAlt',
+  'FaRegFileArchive',
+  'FaRegFileAudio',
+  'FaRegFileCode',
+  'FaRegFileExcel',
+  'FaRegFileImage',
+  'FaRegFilePdf',
+  'FaRegFilePowerpoint',
+  'FaRegFileVideo',
+  'FaRegFileWord',
+  'FaRegFlag',
+  'FaRegFlushed',
+  'FaRegFolder',
+  'FaRegFolderOpen',
+  'FaRegFontAwesomeLogoFull',
+  'FaRegFrown',
+  'FaRegFrownOpen',
+  'FaRegFutbol',
+  'FaRegGem',
+  'FaRegGrimace',
+  'FaRegGrin',
+  'FaRegGrinAlt',
+  'FaRegGrinBeam',
+  'FaRegGrinBeamSweat',
+  'FaRegGrinHearts',
+  'FaRegGrinSquint',
+  'FaRegGrinSquintTears',
+  'FaRegGrinStars',
+  'FaRegGrinTears',
+  'FaRegGrinTongue',
+  'FaRegGrinTongueSquint',
+  'FaRegGrinTongueWink',
+  'FaRegGrinWink',
+  'FaRegHandLizard',
+  'FaRegHandPaper',
+  'FaRegHandPeace',
+  'FaRegHandPointDown',
+  'FaRegHandPointLeft',
+  'FaRegHandPointRight',
+  'FaRegHandPointUp',
+  'FaRegHandPointer',
+  'FaRegHandRock',
+  'FaRegHandScissors',
+  'FaRegHandSpock',
+  'FaRegHandshake',
+  'FaRegHdd',
+  'FaRegHeart',
+  'FaRegHospital',
+  'FaRegHourglass',
+  'FaRegIdBadge',
+  'FaRegIdCard',
+  'FaRegImage',
+  'FaRegImages',
+  'FaRegKeyboard',
+  'FaRegKiss',
+  'FaRegKissBeam',
+  'FaRegKissWinkHeart',
+  'FaRegLaugh',
+  'FaRegLaughBeam',
+  'FaRegLaughSquint',
+  'FaRegLaughWink',
+  'FaRegLemon',
+  'FaRegLifeRing',
+  'FaRegLightbulb',
+  'FaRegListAlt',
+  'FaRegMap',
+  'FaRegMeh',
+  'FaRegMehBlank',
+  'FaRegMehRollingEyes',
+  'FaRegMinusSquare',
+  'FaRegMoneyBillAlt',
+  'FaRegMoon',
+  'FaRegNewspaper',
+  'FaRegObjectGroup',
+  'FaRegObjectUngroup',
+  'FaRegPaperPlane',
+  'FaRegPauseCircle',
+  'FaRegPlayCircle',
+  'FaRegPlusSquare',
+  'FaRegQuestionCircle',
+  'FaRegRegistered',
+  'FaRegSadCry',
+  'FaRegSadTear',
+  'FaRegSave',
+  'FaRegShareSquare',
+  'FaRegSmile',
+  'FaRegSmileBeam',
+  'FaRegSmileWink',
+  'FaRegSnowflake',
+  'FaRegSquare',
+  'FaRegStar',
+  'FaRegStarHalf',
+  'FaRegStickyNote',
+  'FaRegStopCircle',
+  'FaRegSun',
+  'FaRegSurprise',
+  'FaRegThumbsDown',
+  'FaRegThumbsUp',
+  'FaRegTimesCircle',
+  'FaRegTired',
+  'FaRegTrashAlt',
+  'FaRegUser',
+  'FaRegUserCircle',
+  'FaRegWindowClose',
+  'FaRegWindowMaximize',
+  'FaRegWindowMinimize',
+  'FaRegWindowRestore',
+  'FaRegistered',
+  'FaRemoveFormat',
+  'FaRenren',
+  'FaReply',
+  'FaReplyAll',
+  'FaReplyd',
+  'FaRepublican',
+  'FaResearchgate',
+  'FaResolving',
+  'FaRestroom',
+  'FaRetweet',
+  'FaRev',
+  'FaRibbon',
+  'FaRing',
+  'FaRoad',
+  'FaRobot',
+  'FaRocket',
+  'FaRocketchat',
+  'FaRockrms',
+  'FaRoute',
+  'FaRss',
+  'FaRssSquare',
+  'FaRubleSign',
+  'FaRuler',
+  'FaRulerCombined',
+  'FaRulerHorizontal',
+  'FaRulerVertical',
+  'FaRunning',
+  'FaRupeeSign',
+  'FaRust',
+  'FaSadCry',
+  'FaSadTear',
+  'FaSafari',
+  'FaSalesforce',
+  'FaSass',
+  'FaSatellite',
+  'FaSatelliteDish',
+  'FaSave',
+  'FaSchlix',
+  'FaSchool',
+  'FaScrewdriver',
+  'FaScribd',
+  'FaScroll',
+  'FaSdCard',
+  'FaSearch',
+  'FaSearchDollar',
+  'FaSearchLocation',
+  'FaSearchMinus',
+  'FaSearchPlus',
+  'FaSearchengin',
+  'FaSeedling',
+  'FaSellcast',
+  'FaSellsy',
+  'FaServer',
+  'FaServicestack',
+  'FaShapes',
+  'FaShare',
+  'FaShareAlt',
+  'FaShareAltSquare',
+  'FaShareSquare',
+  'FaShekelSign',
+  'FaShieldAlt',
+  'FaShieldVirus',
+  'FaShip',
+  'FaShippingFast',
+  'FaShirtsinbulk',
+  'FaShoePrints',
+  'FaShopify',
+  'FaShoppingBag',
+  'FaShoppingBasket',
+  'FaShoppingCart',
+  'FaShopware',
+  'FaShower',
+  'FaShuttleVan',
+  'FaSign',
+  'FaSignInAlt',
+  'FaSignLanguage',
+  'FaSignOutAlt',
+  'FaSignal',
+  'FaSignature',
+  'FaSimCard',
+  'FaSimplybuilt',
+  'FaSink',
+  'FaSistrix',
+  'FaSitemap',
+  'FaSith',
+  'FaSkating',
+  'FaSketch',
+  'FaSkiing',
+  'FaSkiingNordic',
+  'FaSkull',
+  'FaSkullCrossbones',
+  'FaSkyatlas',
+  'FaSkype',
+  'FaSlack',
+  'FaSlackHash',
+  'FaSlash',
+  'FaSleigh',
+  'FaSlidersH',
+  'FaSlideshare',
+  'FaSmile',
+  'FaSmileBeam',
+  'FaSmileWink',
+  'FaSmog',
+  'FaSmoking',
+  'FaSmokingBan',
+  'FaSms',
+  'FaSnapchat',
+  'FaSnapchatGhost',
+  'FaSnapchatSquare',
+  'FaSnowboarding',
+  'FaSnowflake',
+  'FaSnowman',
+  'FaSnowplow',
+  'FaSoap',
+  'FaSocks',
+  'FaSolarPanel',
+  'FaSort',
+  'FaSortAlphaDown',
+  'FaSortAlphaDownAlt',
+  'FaSortAlphaUp',
+  'FaSortAlphaUpAlt',
+  'FaSortAmountDown',
+  'FaSortAmountDownAlt',
+  'FaSortAmountUp',
+  'FaSortAmountUpAlt',
+  'FaSortDown',
+  'FaSortNumericDown',
+  'FaSortNumericDownAlt',
+  'FaSortNumericUp',
+  'FaSortNumericUpAlt',
+  'FaSortUp',
+  'FaSoundcloud',
+  'FaSourcetree',
+  'FaSpa',
+  'FaSpaceShuttle',
+  'FaSpeakap',
+  'FaSpeakerDeck',
+  'FaSpellCheck',
+  'FaSpider',
+  'FaSpinner',
+  'FaSplotch',
+  'FaSpotify',
+  'FaSprayCan',
+  'FaSquare',
+  'FaSquareFull',
+  'FaSquareRootAlt',
+  'FaSquarespace',
+  'FaStackExchange',
+  'FaStackOverflow',
+  'FaStackpath',
+  'FaStamp',
+  'FaStar',
+  'FaStarAndCrescent',
+  'FaStarHalf',
+  'FaStarHalfAlt',
+  'FaStarOfDavid',
+  'FaStarOfLife',
+  'FaStaylinked',
+  'FaSteam',
+  'FaSteamSquare',
+  'FaSteamSymbol',
+  'FaStepBackward',
+  'FaStepForward',
+  'FaStethoscope',
+  'FaStickerMule',
+  'FaStickyNote',
+  'FaStop',
+  'FaStopCircle',
+  'FaStopwatch',
+  'FaStopwatch20',
+  'FaStore',
+  'FaStoreAlt',
+  'FaStoreAltSlash',
+  'FaStoreSlash',
+  'FaStrava',
+  'FaStream',
+  'FaStreetView',
+  'FaStrikethrough',
+  'FaStripe',
+  'FaStripeS',
+  'FaStroopwafel',
+  'FaStudiovinari',
+  'FaStumbleupon',
+  'FaStumbleuponCircle',
+  'FaSubscript',
+  'FaSubway',
+  'FaSuitcase',
+  'FaSuitcaseRolling',
+  'FaSun',
+  'FaSuperpowers',
+  'FaSuperscript',
+  'FaSupple',
+  'FaSurprise',
+  'FaSuse',
+  'FaSwatchbook',
+  'FaSwift',
+  'FaSwimmer',
+  'FaSwimmingPool',
+  'FaSymfony',
+  'FaSynagogue',
+  'FaSync',
+  'FaSyncAlt',
+  'FaSyringe',
+  'FaTable',
+  'FaTableTennis',
+  'FaTablet',
+  'FaTabletAlt',
+  'FaTablets',
+  'FaTachometerAlt',
+  'FaTag',
+  'FaTags',
+  'FaTape',
+  'FaTasks',
+  'FaTaxi',
+  'FaTeamspeak',
+  'FaTeeth',
+  'FaTeethOpen',
+  'FaTelegram',
+  'FaTelegramPlane',
+  'FaTemperatureHigh',
+  'FaTemperatureLow',
+  'FaTencentWeibo',
+  'FaTenge',
+  'FaTerminal',
+  'FaTextHeight',
+  'FaTextWidth',
+  'FaTh',
+  'FaThLarge',
+  'FaThList',
+  'FaTheRedYeti',
+  'FaTheaterMasks',
+  'FaThemeco',
+  'FaThemeisle',
+  'FaThermometer',
+  'FaThermometerEmpty',
+  'FaThermometerFull',
+  'FaThermometerHalf',
+  'FaThermometerQuarter',
+  'FaThermometerThreeQuarters',
+  'FaThinkPeaks',
+  'FaThumbsDown',
+  'FaThumbsUp',
+  'FaThumbtack',
+  'FaTicketAlt',
+  'FaTiktok',
+  'FaTimes',
+  'FaTimesCircle',
+  'FaTint',
+  'FaTintSlash',
+  'FaTired',
+  'FaToggleOff',
+  'FaToggleOn',
+  'FaToilet',
+  'FaToiletPaper',
+  'FaToiletPaperSlash',
+  'FaToolbox',
+  'FaTools',
+  'FaTooth',
+  'FaTorah',
+  'FaToriiGate',
+  'FaTractor',
+  'FaTradeFederation',
+  'FaTrademark',
+  'FaTrafficLight',
+  'FaTrailer',
+  'FaTrain',
+  'FaTram',
+  'FaTransgender',
+  'FaTransgenderAlt',
+  'FaTrash',
+  'FaTrashAlt',
+  'FaTrashRestore',
+  'FaTrashRestoreAlt',
+  'FaTree',
+  'FaTrello',
+  'FaTripadvisor',
+  'FaTrophy',
+  'FaTruck',
+  'FaTruckLoading',
+  'FaTruckMonster',
+  'FaTruckMoving',
+  'FaTruckPickup',
+  'FaTshirt',
+  'FaTty',
+  'FaTumblr',
+  'FaTumblrSquare',
+  'FaTv',
+  'FaTwitch',
+  'FaTwitter',
+  'FaTwitterSquare',
+  'FaTypo3',
+  'FaUber',
+  'FaUbuntu',
+  'FaUikit',
+  'FaUmbraco',
+  'FaUmbrella',
+  'FaUmbrellaBeach',
+  'FaUncharted',
+  'FaUnderline',
+  'FaUndo',
+  'FaUndoAlt',
+  'FaUniregistry',
+  'FaUnity',
+  'FaUniversalAccess',
+  'FaUniversity',
+  'FaUnlink',
+  'FaUnlock',
+  'FaUnlockAlt',
+  'FaUnsplash',
+  'FaUntappd',
+  'FaUpload',
+  'FaUps',
+  'FaUsb',
+  'FaUser',
+  'FaUserAlt',
+  'FaUserAltSlash',
+  'FaUserAstronaut',
+  'FaUserCheck',
+  'FaUserCircle',
+  'FaUserClock',
+  'FaUserCog',
+  'FaUserEdit',
+  'FaUserFriends',
+  'FaUserGraduate',
+  'FaUserInjured',
+  'FaUserLock',
+  'FaUserMd',
+  'FaUserMinus',
+  'FaUserNinja',
+  'FaUserNurse',
+  'FaUserPlus',
+  'FaUserSecret',
+  'FaUserShield',
+  'FaUserSlash',
+  'FaUserTag',
+  'FaUserTie',
+  'FaUserTimes',
+  'FaUsers',
+  'FaUsersCog',
+  'FaUsersSlash',
+  'FaUsps',
+  'FaUssunnah',
+  'FaUtensilSpoon',
+  'FaUtensils',
+  'FaVaadin',
+  'FaVectorSquare',
+  'FaVenus',
+  'FaVenusDouble',
+  'FaVenusMars',
+  'FaVest',
+  'FaVestPatches',
+  'FaViacoin',
+  'FaViadeo',
+  'FaViadeoSquare',
+  'FaVial',
+  'FaVials',
+  'FaViber',
+  'FaVideo',
+  'FaVideoSlash',
+  'FaVihara',
+  'FaVimeo',
+  'FaVimeoSquare',
+  'FaVimeoV',
+  'FaVine',
+  'FaVirus',
+  'FaVirusSlash',
+  'FaViruses',
+  'FaVk',
+  'FaVnv',
+  'FaVoicemail',
+  'FaVolleyballBall',
+  'FaVolumeDown',
+  'FaVolumeMute',
+  'FaVolumeOff',
+  'FaVolumeUp',
+  'FaVoteYea',
+  'FaVrCardboard',
+  'FaVuejs',
+  'FaWalking',
+  'FaWallet',
+  'FaWarehouse',
+  'FaWatchmanMonitoring',
+  'FaWater',
+  'FaWaveSquare',
+  'FaWaze',
+  'FaWeebly',
+  'FaWeibo',
+  'FaWeight',
+  'FaWeightHanging',
+  'FaWeixin',
+  'FaWhatsapp',
+  'FaWhatsappSquare',
+  'FaWheelchair',
+  'FaWhmcs',
+  'FaWifi',
+  'FaWikipediaW',
+  'FaWind',
+  'FaWindowClose',
+  'FaWindowMaximize',
+  'FaWindowMinimize',
+  'FaWindowRestore',
+  'FaWindows',
+  'FaWineBottle',
+  'FaWineGlass',
+  'FaWineGlassAlt',
+  'FaWix',
+  'FaWizardsOfTheCoast',
+  'FaWodu',
+  'FaWolfPackBattalion',
+  'FaWonSign',
+  'FaWordpress',
+  'FaWordpressSimple',
+  'FaWpbeginner',
+  'FaWpexplorer',
+  'FaWpforms',
+  'FaWpressr',
+  'FaWrench',
+  'FaXRay',
+  'FaXbox',
+  'FaXing',
+  'FaXingSquare',
+  'FaYCombinator',
+  'FaYahoo',
+  'FaYammer',
+  'FaYandex',
+  'FaYandexInternational',
+  'FaYarn',
+  'FaYelp',
+  'FaYenSign',
+  'FaYinYang',
+  'FaYoast',
+  'FaYoutube',
+  'FaYoutubeSquare',
+  'FaZhihu',
+]
diff --git a/ui/src/proxy/form/models.ts b/ui/src/proxy/form/models.ts
index cdc705fb..b1d92726 100644
--- a/ui/src/proxy/form/models.ts
+++ b/ui/src/proxy/form/models.ts
@@ -702,10 +702,18 @@ export enum ColumnSortDirectionEnum {
   'Desc' = 'desc',
 }
 
+export interface WidgetGroupDto {
+  colGap?: number
+  colSpan?: number
+  className?: string
+  items: WidgetEditDto[]
+}
+
 export interface WidgetEditDto {
   colGap: number
   colSpan: number
   sqlQuery?: string
+  className?: string
   title: string
   value: string
   valueClassName: string
@@ -713,5 +721,4 @@ export interface WidgetEditDto {
   icon: string
   subTitle: string
   onClick: string
-  className: string
 }
diff --git a/ui/src/shared/useListFormCustomDataSource.ts b/ui/src/shared/useListFormCustomDataSource.ts
index f2bb2a5b..711af741 100644
--- a/ui/src/shared/useListFormCustomDataSource.ts
+++ b/ui/src/shared/useListFormCustomDataSource.ts
@@ -1,9 +1,9 @@
 import DataGrid from 'devextreme-react/data-grid'
 import PivotGrid from 'devextreme-react/pivot-grid'
 import CustomStore from 'devextreme/data/custom_store'
-import { MutableRefObject, useCallback } from 'react'
+import { MutableRefObject, useCallback, useState } from 'react'
 import { getLoadOptions, getServiceAddress, setGridPanelColor } from '../views/list/Utils'
-import { GridOptionsDto } from '../proxy/form/models'
+import { GridOptionsDto, WidgetGroupDto } from '../proxy/form/models'
 import { GridColumnData } from '../views/list/GridColumnData'
 import { dynamicFetch } from '../services/form.service'
 import { MULTIVALUE_DELIMITER } from '../constants/app.constant'
@@ -23,6 +23,7 @@ const useListFormCustomDataSource = ({
       listFormCode: string,
       searchParams?: URLSearchParams,
       cols?: GridColumnData[],
+      setWidgetGroups?: (widgetGroups: WidgetGroupDto[]) => void,
     ) => {
       return new CustomStore({
         key: gridOptions.keyFieldName,
@@ -71,6 +72,8 @@ const useListFormCustomDataSource = ({
             parameters.filter = JSON.stringify(parameters.filter)
             const response = await dynamicFetch('list-form-select/select', 'GET', parameters)
 
+            if (setWidgetGroups) setWidgetGroups(response.data.widgets ?? [])
+
             // Column format multiValue ise, gelen stringi array yapmaliyiz
             if (columns) {
               columns.forEach((col: any) => {
@@ -123,6 +126,7 @@ const useListFormCustomDataSource = ({
               totalCount: response.data.totalCount,
               summary: response.data.summary,
               groupCount: response.data.groupCount,
+              widgets: response.data.widgets,
             }
             return retValue
           } catch (error: any) {
diff --git a/ui/src/views/admin/listForm/edit/FormTabWidgets.tsx b/ui/src/views/admin/listForm/edit/FormTabWidgets.tsx
index a8a2b2cc..019ef64f 100644
--- a/ui/src/views/admin/listForm/edit/FormTabWidgets.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabWidgets.tsx
@@ -9,7 +9,7 @@ import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
 import { useState } from 'react'
-import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa';
+import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
 import JsonRowOpDialogEditForm from './json-row-operations/JsonRowOpDialogEditForm'
 import { JsonRowDialogData } from './json-row-operations/types'
 import JsonRowOpDialogWidget from './json-row-operations/JsonRowOpDialogWidget'
@@ -58,14 +58,14 @@ function FormTabWidgets(props: { listFormCode: string }) {
               <Th>{translate('::ListForms.ListFormEdit.WidgetColGap')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetColSpan')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetSqlQuery')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetClassName')}</Th>
+              <Th>{translate('::ListForms.ListFormEdit.WidgetValueClassName')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetTitle')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetValue')}</Th>
-              <Th>{translate('::ListForms.ListFormEdit.WidgetValueClassName')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetColor')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetIcon')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetSubtitle')}</Th>
               <Th>{translate('::ListForms.ListFormEdit.WidgetOnClick')}</Th>
-              <Th>{translate('::ListForms.ListFormEdit.WidgetClassName')}</Th>
             </Tr>
           </THead>
           <TBody>
@@ -113,14 +113,14 @@ function FormTabWidgets(props: { listFormCode: string }) {
                 <Td>{row.colGap}</Td>
                 <Td>{row.colSpan}</Td>
                 <Td>{row.sqlQuery}</Td>
+                <Td>{row.className}</Td>
+                <Td>{row.valueClassName}</Td>
                 <Td>{row.title}</Td>
                 <Td>{row.value}</Td>
-                <Td>{row.valueClassName}</Td>
                 <Td>{row.color}</Td>
                 <Td>{row.icon}</Td>
                 <Td>{row.subTitle}</Td>
                 <Td>{row.onClick}</Td>
-                <Td>{row.className}</Td>
               </Tr>
             ))}
           </TBody>
diff --git a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
index 2d88fb1f..6ab21386 100644
--- a/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
+++ b/ui/src/views/admin/listForm/edit/json-row-operations/JsonRowOpDialogWidget.tsx
@@ -5,13 +5,14 @@ import {
   FormItem,
   Input,
   Notification,
+  Select,
   toast,
 } from '@/components/ui'
 import { ListFormJsonRowDto } from '@/proxy/admin/list-form/models'
 import { SelectBoxOption } from '@/shared/types'
 import { useStoreActions, useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
-import { Field, Form, Formik } from 'formik'
+import { Field, FieldProps, Form, Formik } from 'formik'
 import { Dispatch, SetStateAction, useEffect, useState } from 'react'
 import { number, object, string } from 'yup'
 import { JsonRowDialogData } from './types'
@@ -21,6 +22,7 @@ import {
   postListFormJsonRow,
   putListFormJsonRow,
 } from '@/services/admin/list-form.service'
+import { colSpanOptions } from '../options'
 
 const schema = object().shape({
   colGap: number().required('Column Gap Required'),
@@ -103,15 +105,15 @@ function JsonRowOpDialogWidget({
               data.widgetValues ?? {
                 colGap: 0,
                 colSpan: 0,
-                sqlQuery: '',
-                title: '',
-                value: '',
-                valueClassName: '',
-                color: '',
-                icon: '',
-                subTitle: '',
-                onClick: '',
                 className: '',
+                sqlQuery: '',
+                title: 'Title',
+                value: 'Value',
+                valueClassName: '',
+                color: 'Color',
+                icon: 'Icon',
+                subTitle: 'SubTitle',
+                onClick: '',
               }
             }
             validationSchema={schema}
@@ -153,31 +155,38 @@ function JsonRowOpDialogWidget({
                 <FormContainer size="sm">
                   <div className="max-h-96 overflow-y-auto p-2">
                     <FormItem
-                      label="Column Gap"
+                      label="Column Gap (Sütun Boşluğu)"
                       invalid={errors.colGap && touched.colGap}
                       errorMessage={errors.colGap}
                     >
                       <Field
-                        type="text"
+                        type="number"
                         autoComplete="off"
                         name="colGap"
                         placeholder="Column Gap"
                         component={Input}
                       />
                     </FormItem>
-                    
+
                     <FormItem
-                      label="Column Span"
+                      label="Column Span (Sütun Genişliği)"
                       invalid={errors.colSpan && touched.colSpan}
                       errorMessage={errors.colSpan}
                     >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="colSpan"
-                        placeholder="Column Span"
-                        component={Input}
-                      />
+                      <Field type="text" autoComplete="off" name="colSpan" placeholder="colSpan">
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={colSpanOptions}
+                            value={colSpanOptions?.filter(
+                              (option: any) => option.value === values.colSpan,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
+                        )}
+                      </Field>
                     </FormItem>
 
                     <FormItem
@@ -191,6 +200,36 @@ function JsonRowOpDialogWidget({
                         name="sqlQuery"
                         placeholder="Sql Query"
                         component={Input}
+                        rows={6}
+                        textArea={true}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Class Name"
+                      invalid={errors.className && touched.className}
+                      errorMessage={errors.className}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="className"
+                        placeholder="Class Name"
+                        component={Input}
+                      />
+                    </FormItem>
+
+                    <FormItem
+                      label="Value Class Name"
+                      invalid={errors.valueClassName && touched.valueClassName}
+                      errorMessage={errors.valueClassName}
+                    >
+                      <Field
+                        type="text"
+                        autoComplete="off"
+                        name="valueClassName"
+                        placeholder="Value Class Name"
+                        component={Input}
                       />
                     </FormItem>
 
@@ -223,21 +262,7 @@ function JsonRowOpDialogWidget({
                     </FormItem>
 
                     <FormItem
-                      label="Value Class Name"
-                      invalid={errors.valueClassName && touched.valueClassName}
-                      errorMessage={errors.valueClassName}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="valueClassName"
-                        placeholder="Value Class Name"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Color"
+                      label="Color Field"
                       invalid={errors.color && touched.color}
                       errorMessage={errors.color}
                     >
@@ -251,7 +276,7 @@ function JsonRowOpDialogWidget({
                     </FormItem>
 
                     <FormItem
-                      label="Icon"
+                      label="Icon Field"
                       invalid={errors.icon && touched.icon}
                       errorMessage={errors.icon}
                     >
@@ -264,6 +289,48 @@ function JsonRowOpDialogWidget({
                       />
                     </FormItem>
 
+                    {/* <FormItem
+                      label="Color"
+                      invalid={errors.color && touched.color}
+                      errorMessage={errors.color}
+                    >
+                      <Field type="text" autoComplete="off" name="color" placeholder="Color">
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={widgetColorOptions}
+                            value={widgetColorOptions?.filter(
+                              (option: any) => option.value === values.color,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
+                        )}
+                      </Field>
+                    </FormItem>
+
+                    <FormItem
+                      label="Icon"
+                      invalid={errors.icon && touched.icon}
+                      errorMessage={errors.icon}
+                    >
+                      <Field type="text" autoComplete="off" name="icon" placeholder="Icon">
+                        {({ field, form }: FieldProps<SelectBoxOption>) => (
+                          <Select
+                            field={field}
+                            form={form}
+                            isClearable={true}
+                            options={widgetIconOptions}
+                            value={widgetIconOptions?.filter(
+                              (option: any) => option.value === values.icon,
+                            )}
+                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                          />
+                        )}
+                      </Field>
+                    </FormItem> */}
+
                     <FormItem
                       label="Sub Title"
                       invalid={errors.subTitle && touched.subTitle}
@@ -272,7 +339,7 @@ function JsonRowOpDialogWidget({
                       <Field
                         type="text"
                         autoComplete="off"
-                        name="subtitle"
+                        name="subTitle"
                         placeholder="Sub Title"
                         component={Input}
                       />
@@ -291,21 +358,6 @@ function JsonRowOpDialogWidget({
                         component={Input}
                       />
                     </FormItem>
-
-                    <FormItem
-                      label="Class Name"
-                      invalid={errors.className && touched.className}
-                      errorMessage={errors.className}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="className"
-                        placeholder="Class Name"
-                        component={Input}
-                      />
-                    </FormItem>
-
                   </div>
                   <div className="text-right mt-4">
                     <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={handleClose}>
diff --git a/ui/src/views/admin/listForm/edit/options.ts b/ui/src/views/admin/listForm/edit/options.ts
index e5823d40..b0d68662 100644
--- a/ui/src/views/admin/listForm/edit/options.ts
+++ b/ui/src/views/admin/listForm/edit/options.ts
@@ -25,6 +25,8 @@ import {
   GridColumnJoinTypeListEnum,
 } from '../../../../proxy/admin/list-form-field/models'
 import { enumToList } from '../../../../utils/enumUtils'
+import { colSpan, iconList, WidgetColorEnum } from '@/components/ui/Widget/iconList'
+import { SelectBoxOption } from '@/shared/types'
 
 export const sortModeOptions = [
   { value: 'none', label: 'None' },
@@ -216,3 +218,13 @@ export const cascadeFilterOperator = enumToList<string>(ColumnCascadeFilterOpera
 export const pivotSettingsAreaOptions = enumToList<string>(PivotSettingsAreaEnum)
 export const pivotSettingsGroupIntervalOptions = enumToList<string>(PivotSettingsGroupIntervalEnum)
 export const pivotSortDirectionOptions = enumToList<string>(ColumnSortDirectionEnum)
+export const widgetColorOptions = enumToList<string>(WidgetColorEnum)
+export const widgetIconOptions = iconList.map((icon) => ({
+  value: icon,
+  label: icon,
+}))
+
+export const colSpanOptions = colSpan.map((span) => ({
+  value: span,
+  label: span,
+}))
diff --git a/ui/src/views/list/Grid.tsx b/ui/src/views/list/Grid.tsx
index c1c34bc3..ef467a1d 100644
--- a/ui/src/views/list/Grid.tsx
+++ b/ui/src/views/list/Grid.tsx
@@ -7,6 +7,7 @@ import {
   GridDto,
   ListFormCustomizationTypeEnum,
   PlatformEditorTypes,
+  WidgetGroupDto,
 } from '@/proxy/form/models'
 import { getList } from '@/services/form.service'
 import {
@@ -64,6 +65,7 @@ import { TagBoxEditorComponent } from './editors/TagBoxEditorComponent'
 import { useFilters } from './useFilters'
 import { useToolbar } from './useToolbar'
 import { ImportDashboard } from '@/components/importManager/ImportDashboard'
+import WidgetGroup from '@/components/ui/Widget/WidgetGroup'
 
 interface GridProps {
   listFormCode: string
@@ -88,6 +90,7 @@ const Grid = (props: GridProps) => {
   const [columnData, setColumnData] = useState<GridColumnData[]>()
   const [formData, setFormData] = useState<any>()
   const [mode, setMode] = useState<RowMode>('view')
+  const [widgetGroups, setWidgetGroups] = useState<WidgetGroupDto[]>([])
 
   const preloadExportLibs = () => {
     import('exceljs')
@@ -404,7 +407,9 @@ const Grid = (props: GridProps) => {
       listFormCode,
       searchParams,
       cols,
+      setWidgetGroups,
     )
+
     setGridDataSource(dataSource)
   }, [gridDto, searchParams])
 
@@ -503,271 +508,275 @@ const Grid = (props: GridProps) => {
   }
 
   return (
-    <Container className={DX_CLASSNAMES}>
-      {!isSubForm && (
-        <Helmet
-          titleTemplate="%s | Kurs Platform"
-          title={translate('::' + gridDto?.gridOptions.title)}
-          defaultTitle="Kurs Platform"
-        ></Helmet>
-      )}
-      {gridDto && columnData && (
-        <>
-          <DataGrid
-            ref={gridRef as any}
-            id={'Grid-' + listFormCode}
-            //dataSource={gridDataSource}
-            //remoteOperations={{ groupPaging: true }}
-            //remoteOperations={false}
-            height={gridDto.gridOptions.height || '100%'}
-            width={gridDto.gridOptions.width || '100%'}
-            allowColumnResizing={gridDto.gridOptions.columnOptionDto?.allowColumnResizing}
-            allowColumnReordering={gridDto.gridOptions.columnOptionDto?.allowColumnReordering}
-            showBorders={gridDto.gridOptions.columnOptionDto?.showBorders}
-            showRowLines={gridDto.gridOptions.columnOptionDto?.showRowLines}
-            showColumnLines={gridDto.gridOptions.columnOptionDto?.showColumnLines}
-            columnResizingMode={gridDto.gridOptions.columnOptionDto?.columnResizingMode}
-            columnAutoWidth={gridDto.gridOptions.columnOptionDto?.columnAutoWidth}
-            rtlEnabled={gridDto.gridOptions.columnOptionDto?.rtlEnabled}
-            rowAlternationEnabled={gridDto.gridOptions.columnOptionDto?.rowAlternationEnabled}
-            hoverStateEnabled={gridDto.gridOptions.columnOptionDto?.hoverStateEnabled}
-            columnHidingEnabled={gridDto.gridOptions.columnOptionDto?.columnHidingEnabled}
-            focusedRowEnabled={gridDto.gridOptions.columnOptionDto?.focusedRowEnabled}
-            showColumnHeaders={gridDto.gridOptions.columnOptionDto?.showColumnHeaders}
-            filterSyncEnabled={true}
-            onSelectionChanged={onSelectionChanged}
-            onInitNewRow={onInitNewRow}
-            onCellPrepared={onCellPrepared}
-            onRowInserting={onRowInserting}
-            onRowUpdating={onRowUpdating}
-            onEditingStart={onEditingStart}
-            onDataErrorOccurred={onDataErrorOccurred}
-            onExporting={onExporting}
-            onEditCanceled={() => {
-              setMode('view')
-            }}
-            onSaved={() => {
-              setMode('view')
-            }}
-            onRowInserted={() => {
-              props.refreshData?.()
-            }}
-            onRowUpdated={() => {
-              props.refreshData?.()
-            }}
-            onRowRemoved={() => {
-              props.refreshData?.()
-            }}
-          >
-            <Export
-              enabled={true}
-              allowExportSelectedData={false}
-              formats={['pdf', 'xlsx', 'csv']}
-            />
-            <Editing
-              refreshMode={gridDto.gridOptions.editingOptionDto?.refreshMode}
-              mode={smaller.md ? 'form' : gridDto.gridOptions.editingOptionDto?.mode}
-              allowDeleting={gridDto.gridOptions.editingOptionDto?.allowDeleting}
-              allowUpdating={gridDto.gridOptions.editingOptionDto?.allowUpdating}
-              allowAdding={gridDto.gridOptions.editingOptionDto?.allowAdding}
-              useIcons={gridDto.gridOptions.editingOptionDto?.useIcons}
-              confirmDelete={gridDto.gridOptions.editingOptionDto?.confirmDelete}
-              newRowPosition={gridDto.gridOptions.editingOptionDto?.newRowPosition}
-              selectTextOnEditStart={gridDto.gridOptions.editingOptionDto?.selectTextOnEditStart}
-              startEditAction={gridDto.gridOptions.editingOptionDto?.startEditAction}
-              popup={{
-                title: gridDto.gridOptions.editingOptionDto?.popup?.title,
-                showTitle: gridDto.gridOptions.editingOptionDto?.popup?.showTitle,
-                hideOnOutsideClick: gridDto.gridOptions.editingOptionDto?.popup?.hideOnOutsideClick,
-                width: gridDto.gridOptions.editingOptionDto?.popup?.width,
-                height: gridDto.gridOptions.editingOptionDto?.popup?.height,
-                fullScreen: gridDto.gridOptions.editingOptionDto?.popup?.fullScreen,
-              }}
-              form={{
-                items:
-                  gridDto.gridOptions.editingFormDto?.length > 0
-                    ? gridDto.gridOptions.editingFormDto
-                        ?.sort((a: any, b: any) => {
-                          return a.order >= b.order ? 1 : -1
-                        })
-                        .map((e: any) => {
-                          return {
-                            itemType: e.itemType,
-                            colCount: e.colCount,
-                            colSpan: e.colSpan,
-                            caption: e.caption,
-                            items: e.items
-                              ?.sort((a: any, b: any) => {
-                                return a.order >= b.order ? 1 : -1
-                              })
-                              .map((i: EditingFormItemDto) => {
-                                let editorOptions = {}
-                                try {
-                                  editorOptions = i.editorOptions && JSON.parse(i.editorOptions)
+    <>
+      <WidgetGroup widgetGroups={widgetGroups} />
 
-                                  // Eğer default value varsa, bu editörü readonly yapıyoruz
-                                  if (searchParams?.has(i.dataField)) {
+      <Container className={DX_CLASSNAMES}>
+        {!isSubForm && (
+          <Helmet
+            titleTemplate="%s | Kurs Platform"
+            title={translate('::' + gridDto?.gridOptions.title)}
+            defaultTitle="Kurs Platform"
+          ></Helmet>
+        )}
+        {gridDto && columnData && (
+          <>
+            <DataGrid
+              ref={gridRef as any}
+              id={'Grid-' + listFormCode}
+              //dataSource={gridDataSource}
+              //remoteOperations={{ groupPaging: true }}
+              //remoteOperations={false}
+              height={gridDto.gridOptions.height || '100%'}
+              width={gridDto.gridOptions.width || '100%'}
+              allowColumnResizing={gridDto.gridOptions.columnOptionDto?.allowColumnResizing}
+              allowColumnReordering={gridDto.gridOptions.columnOptionDto?.allowColumnReordering}
+              showBorders={gridDto.gridOptions.columnOptionDto?.showBorders}
+              showRowLines={gridDto.gridOptions.columnOptionDto?.showRowLines}
+              showColumnLines={gridDto.gridOptions.columnOptionDto?.showColumnLines}
+              columnResizingMode={gridDto.gridOptions.columnOptionDto?.columnResizingMode}
+              columnAutoWidth={gridDto.gridOptions.columnOptionDto?.columnAutoWidth}
+              rtlEnabled={gridDto.gridOptions.columnOptionDto?.rtlEnabled}
+              rowAlternationEnabled={gridDto.gridOptions.columnOptionDto?.rowAlternationEnabled}
+              hoverStateEnabled={gridDto.gridOptions.columnOptionDto?.hoverStateEnabled}
+              columnHidingEnabled={gridDto.gridOptions.columnOptionDto?.columnHidingEnabled}
+              focusedRowEnabled={gridDto.gridOptions.columnOptionDto?.focusedRowEnabled}
+              showColumnHeaders={gridDto.gridOptions.columnOptionDto?.showColumnHeaders}
+              filterSyncEnabled={true}
+              onSelectionChanged={onSelectionChanged}
+              onInitNewRow={onInitNewRow}
+              onCellPrepared={onCellPrepared}
+              onRowInserting={onRowInserting}
+              onRowUpdating={onRowUpdating}
+              onEditingStart={onEditingStart}
+              onDataErrorOccurred={onDataErrorOccurred}
+              onExporting={onExporting}
+              onEditCanceled={() => {
+                setMode('view')
+              }}
+              onSaved={() => {
+                setMode('view')
+              }}
+              onRowInserted={() => {
+                props.refreshData?.()
+              }}
+              onRowUpdated={() => {
+                props.refreshData?.()
+              }}
+              onRowRemoved={() => {
+                props.refreshData?.()
+              }}
+            >
+              <Export
+                enabled={true}
+                allowExportSelectedData={false}
+                formats={['pdf', 'xlsx', 'csv']}
+              />
+              <Editing
+                refreshMode={gridDto.gridOptions.editingOptionDto?.refreshMode}
+                mode={smaller.md ? 'form' : gridDto.gridOptions.editingOptionDto?.mode}
+                allowDeleting={gridDto.gridOptions.editingOptionDto?.allowDeleting}
+                allowUpdating={gridDto.gridOptions.editingOptionDto?.allowUpdating}
+                allowAdding={gridDto.gridOptions.editingOptionDto?.allowAdding}
+                useIcons={gridDto.gridOptions.editingOptionDto?.useIcons}
+                confirmDelete={gridDto.gridOptions.editingOptionDto?.confirmDelete}
+                newRowPosition={gridDto.gridOptions.editingOptionDto?.newRowPosition}
+                selectTextOnEditStart={gridDto.gridOptions.editingOptionDto?.selectTextOnEditStart}
+                startEditAction={gridDto.gridOptions.editingOptionDto?.startEditAction}
+                popup={{
+                  title: gridDto.gridOptions.editingOptionDto?.popup?.title,
+                  showTitle: gridDto.gridOptions.editingOptionDto?.popup?.showTitle,
+                  hideOnOutsideClick:
+                    gridDto.gridOptions.editingOptionDto?.popup?.hideOnOutsideClick,
+                  width: gridDto.gridOptions.editingOptionDto?.popup?.width,
+                  height: gridDto.gridOptions.editingOptionDto?.popup?.height,
+                  fullScreen: gridDto.gridOptions.editingOptionDto?.popup?.fullScreen,
+                }}
+                form={{
+                  items:
+                    gridDto.gridOptions.editingFormDto?.length > 0
+                      ? gridDto.gridOptions.editingFormDto
+                          ?.sort((a: any, b: any) => {
+                            return a.order >= b.order ? 1 : -1
+                          })
+                          .map((e: any) => {
+                            return {
+                              itemType: e.itemType,
+                              colCount: e.colCount,
+                              colSpan: e.colSpan,
+                              caption: e.caption,
+                              items: e.items
+                                ?.sort((a: any, b: any) => {
+                                  return a.order >= b.order ? 1 : -1
+                                })
+                                .map((i: EditingFormItemDto) => {
+                                  let editorOptions = {}
+                                  try {
+                                    editorOptions = i.editorOptions && JSON.parse(i.editorOptions)
+
+                                    // Eğer default value varsa, bu editörü readonly yapıyoruz
+                                    if (searchParams?.has(i.dataField)) {
+                                      editorOptions = {
+                                        ...editorOptions,
+                                        readOnly: true,
+                                      }
+                                    }
+                                  } catch {}
+                                  const fieldName = i.dataField.split(':')[0]
+                                  const listFormField = gridDto.columnFormats.find(
+                                    (x: any) => x.fieldName === fieldName,
+                                  )
+                                  if (listFormField?.sourceDbType === DbTypeEnum.Date) {
                                     editorOptions = {
+                                      ...{
+                                        type: 'date',
+                                        dateSerializationFormat: 'yyyy-MM-dd',
+                                        displayFormat: 'shortDate',
+                                      },
                                       ...editorOptions,
+                                    }
+                                  } else if (
+                                    listFormField?.sourceDbType === DbTypeEnum.DateTime ||
+                                    listFormField?.sourceDbType === DbTypeEnum.DateTime2 ||
+                                    listFormField?.sourceDbType === DbTypeEnum.DateTimeOffset
+                                  ) {
+                                    editorOptions = {
+                                      ...{
+                                        type: 'datetime',
+                                        dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ssxxx',
+                                        displayFormat: 'shortDateShortTime',
+                                      },
+                                      ...editorOptions,
+                                    }
+                                  }
+                                  const item: SimpleItemWithColData = {
+                                    canRead: listFormField?.canRead ?? false,
+                                    canUpdate: listFormField?.canUpdate ?? false,
+                                    canCreate: listFormField?.canCreate ?? false,
+                                    canExport: listFormField?.canExport ?? false,
+                                    dataField: i.dataField,
+                                    name: i.dataField,
+                                    editorType2: i.editorType2,
+                                    editorType:
+                                      i.editorType2 == PlatformEditorTypes.dxGridBox
+                                        ? 'dxDropDownBox'
+                                        : i.editorType2,
+                                    colSpan: i.colSpan,
+                                    isRequired: i.isRequired,
+                                    editorOptions,
+                                  }
+                                  if (i.dataField.indexOf(':') >= 0) {
+                                    item.label = { text: captionize(i.dataField.split(':')[1]) }
+                                  }
+                                  if (
+                                    (mode == 'edit' && !item.canUpdate) ||
+                                    (mode == 'new' && !item.canCreate)
+                                  ) {
+                                    item.editorOptions = {
+                                      ...item.editorOptions,
                                       readOnly: true,
                                     }
                                   }
-                                } catch {}
-                                const fieldName = i.dataField.split(':')[0]
-                                const listFormField = gridDto.columnFormats.find(
-                                  (x: any) => x.fieldName === fieldName,
-                                )
-                                if (listFormField?.sourceDbType === DbTypeEnum.Date) {
-                                  editorOptions = {
-                                    ...{
-                                      type: 'date',
-                                      dateSerializationFormat: 'yyyy-MM-dd',
-                                      displayFormat: 'shortDate',
-                                    },
-                                    ...editorOptions,
-                                  }
-                                } else if (
-                                  listFormField?.sourceDbType === DbTypeEnum.DateTime ||
-                                  listFormField?.sourceDbType === DbTypeEnum.DateTime2 ||
-                                  listFormField?.sourceDbType === DbTypeEnum.DateTimeOffset
-                                ) {
-                                  editorOptions = {
-                                    ...{
-                                      type: 'datetime',
-                                      dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ssxxx',
-                                      displayFormat: 'shortDateShortTime',
-                                    },
-                                    ...editorOptions,
-                                  }
-                                }
-                                const item: SimpleItemWithColData = {
-                                  canRead: listFormField?.canRead ?? false,
-                                  canUpdate: listFormField?.canUpdate ?? false,
-                                  canCreate: listFormField?.canCreate ?? false,
-                                  canExport: listFormField?.canExport ?? false,
-                                  dataField: i.dataField,
-                                  name: i.dataField,
-                                  editorType2: i.editorType2,
-                                  editorType:
-                                    i.editorType2 == PlatformEditorTypes.dxGridBox
-                                      ? 'dxDropDownBox'
-                                      : i.editorType2,
-                                  colSpan: i.colSpan,
-                                  isRequired: i.isRequired,
-                                  editorOptions,
-                                }
-                                if (i.dataField.indexOf(':') >= 0) {
-                                  item.label = { text: captionize(i.dataField.split(':')[1]) }
-                                }
-                                if (
-                                  (mode == 'edit' && !item.canUpdate) ||
-                                  (mode == 'new' && !item.canCreate)
-                                ) {
-                                  item.editorOptions = {
-                                    ...item.editorOptions,
-                                    readOnly: true,
-                                  }
-                                }
 
-                                return item
-                              })
-                              .filter((a: any) => {
-                                // return a.canRead
-                                if (mode === 'view') {
-                                  return a.canRead
-                                } else if (mode === 'new') {
-                                  return a.canCreate || a.canRead
-                                } else if (mode === 'edit') {
-                                  return a.canUpdate || a.canRead
-                                } else {
-                                  return false
-                                }
-                              }),
-                          } as GroupItem
-                        })
-                    : undefined,
-              }}
-            ></Editing>
-            <Template name={'cellEditTagBox'} render={TagBoxEditorComponent} />
-            <Template name={'cellEditGridBox'} render={GridBoxEditorComponent} />
-            <Toolbar visible={toolbarData.length > 0 || filterToolbarData.length > 0}>
-              {toolbarData.map((item) => (
-                <Item key={item.name} {...item}></Item>
-              ))}
-              {filterToolbarData.map((item) => (
-                <Item key={item.name} {...item}></Item>
-              ))}
-            </Toolbar>
-            <Sorting mode={gridDto.gridOptions?.sortMode}></Sorting>
-            <FilterRow
-              visible={gridDto.gridOptions.filterRowDto?.visible}
-              applyFilter={gridDto.gridOptions.filterRowDto?.applyFilter}
-            ></FilterRow>
-            <FilterPanel visible={gridDto.gridOptions.filterPanelDto.visible}></FilterPanel>
-            <HeaderFilter visible={gridDto.gridOptions.headerFilterDto.visible}></HeaderFilter>
-            <SearchPanel
-              visible={gridDto.gridOptions.searchPanelDto.visible}
-              width={gridDto.gridOptions.searchPanelDto.width}
-            ></SearchPanel>
-            <GroupPanel visible={gridDto.gridOptions.groupPanelDto?.visible}></GroupPanel>
-            <Grouping autoExpandAll={gridDto.gridOptions.groupPanelDto?.autoExpandAll}></Grouping>
-            <Selection
-              mode={gridDto.gridOptions.selectionDto?.mode}
-              allowSelectAll={gridDto.gridOptions.selectionDto?.allowSelectAll}
-              selectAllMode={gridDto.gridOptions.selectionDto?.selectAllMode}
-              showCheckBoxesMode={gridDto.gridOptions.selectionDto?.showCheckBoxesMode}
-            ></Selection>
-            {/* <Paging pageSize={gridDto.gridOptions.pageSize ?? 0}></Paging> */}
-            <Pager
-              visible={gridDto.gridOptions.pagerOptionDto?.visible}
-              allowedPageSizes={gridDto.gridOptions.pagerOptionDto?.allowedPageSizes
-                ?.split(',')
-                .map((a: any) => +a)}
-              showPageSizeSelector={gridDto.gridOptions.pagerOptionDto?.showPageSizeSelector}
-              showInfo={gridDto.gridOptions.pagerOptionDto?.showInfo}
-              showNavigationButtons={gridDto.gridOptions.pagerOptionDto?.showNavigationButtons}
-              infoText={gridDto.gridOptions.pagerOptionDto?.infoText}
-              displayMode={gridDto.gridOptions.pagerOptionDto?.displayMode}
-            ></Pager>
-            <ColumnChooser
-              enabled={gridDto.gridOptions.columnOptionDto?.columnChooserEnabled}
-              mode={gridDto.gridOptions.columnOptionDto?.columnChooserMode}
-            ></ColumnChooser>
-            <ColumnFixing
-              enabled={gridDto.gridOptions.columnOptionDto?.columnFixingEnabled}
-            ></ColumnFixing>
-            <Scrolling mode={gridDto.gridOptions.pagerOptionDto?.scrollingMode}></Scrolling>
-            <LoadPanel
-              enabled={gridDto.gridOptions.pagerOptionDto?.loadPanelEnabled}
-              text={gridDto.gridOptions.pagerOptionDto?.loadPanelText}
-            ></LoadPanel>
-            <Summary>
-              {gridDto.columnFormats
-                .filter((x: any) => !!x.columnTotalSummaryDto?.summaryType)
-                .map((x: any) => (
-                  <TotalItem
-                    key={`Total_${x.fieldName}`}
-                    column={x.fieldName}
-                    summaryType={x.columnTotalSummaryDto.summaryType as any}
-                    showInColumn={x.columnTotalSummaryDto.showInColumn}
-                    valueFormat={x.columnTotalSummaryDto.valueFormat}
-                    displayFormat={x.columnTotalSummaryDto.displayFormat}
-                  />
+                                  return item
+                                })
+                                .filter((a: any) => {
+                                  // return a.canRead
+                                  if (mode === 'view') {
+                                    return a.canRead
+                                  } else if (mode === 'new') {
+                                    return a.canCreate || a.canRead
+                                  } else if (mode === 'edit') {
+                                    return a.canUpdate || a.canRead
+                                  } else {
+                                    return false
+                                  }
+                                }),
+                            } as GroupItem
+                          })
+                      : undefined,
+                }}
+              ></Editing>
+              <Template name={'cellEditTagBox'} render={TagBoxEditorComponent} />
+              <Template name={'cellEditGridBox'} render={GridBoxEditorComponent} />
+              <Toolbar visible={toolbarData.length > 0 || filterToolbarData.length > 0}>
+                {toolbarData.map((item) => (
+                  <Item key={item.name} {...item}></Item>
                 ))}
-              {gridDto.columnFormats
-                .filter((x: any) => !!x.columnGroupSummaryDto?.summaryType)
-                .map((x: any) => (
-                  <GroupItemDx
-                    key={`Group_${x.fieldName}`}
-                    column={x.fieldName}
-                    summaryType={x.columnGroupSummaryDto.summaryType as any}
-                    showInColumn={x.columnGroupSummaryDto.showInColumn}
-                    valueFormat={x.columnGroupSummaryDto.valueFormat}
-                    displayFormat={x.columnGroupSummaryDto.displayFormat}
-                  />
+                {filterToolbarData.map((item) => (
+                  <Item key={item.name} {...item}></Item>
                 ))}
-            </Summary>
-            {/* <Column
+              </Toolbar>
+              <Sorting mode={gridDto.gridOptions?.sortMode}></Sorting>
+              <FilterRow
+                visible={gridDto.gridOptions.filterRowDto?.visible}
+                applyFilter={gridDto.gridOptions.filterRowDto?.applyFilter}
+              ></FilterRow>
+              <FilterPanel visible={gridDto.gridOptions.filterPanelDto.visible}></FilterPanel>
+              <HeaderFilter visible={gridDto.gridOptions.headerFilterDto.visible}></HeaderFilter>
+              <SearchPanel
+                visible={gridDto.gridOptions.searchPanelDto.visible}
+                width={gridDto.gridOptions.searchPanelDto.width}
+              ></SearchPanel>
+              <GroupPanel visible={gridDto.gridOptions.groupPanelDto?.visible}></GroupPanel>
+              <Grouping autoExpandAll={gridDto.gridOptions.groupPanelDto?.autoExpandAll}></Grouping>
+              <Selection
+                mode={gridDto.gridOptions.selectionDto?.mode}
+                allowSelectAll={gridDto.gridOptions.selectionDto?.allowSelectAll}
+                selectAllMode={gridDto.gridOptions.selectionDto?.selectAllMode}
+                showCheckBoxesMode={gridDto.gridOptions.selectionDto?.showCheckBoxesMode}
+              ></Selection>
+              {/* <Paging pageSize={gridDto.gridOptions.pageSize ?? 0}></Paging> */}
+              <Pager
+                visible={gridDto.gridOptions.pagerOptionDto?.visible}
+                allowedPageSizes={gridDto.gridOptions.pagerOptionDto?.allowedPageSizes
+                  ?.split(',')
+                  .map((a: any) => +a)}
+                showPageSizeSelector={gridDto.gridOptions.pagerOptionDto?.showPageSizeSelector}
+                showInfo={gridDto.gridOptions.pagerOptionDto?.showInfo}
+                showNavigationButtons={gridDto.gridOptions.pagerOptionDto?.showNavigationButtons}
+                infoText={gridDto.gridOptions.pagerOptionDto?.infoText}
+                displayMode={gridDto.gridOptions.pagerOptionDto?.displayMode}
+              ></Pager>
+              <ColumnChooser
+                enabled={gridDto.gridOptions.columnOptionDto?.columnChooserEnabled}
+                mode={gridDto.gridOptions.columnOptionDto?.columnChooserMode}
+              ></ColumnChooser>
+              <ColumnFixing
+                enabled={gridDto.gridOptions.columnOptionDto?.columnFixingEnabled}
+              ></ColumnFixing>
+              <Scrolling mode={gridDto.gridOptions.pagerOptionDto?.scrollingMode}></Scrolling>
+              <LoadPanel
+                enabled={gridDto.gridOptions.pagerOptionDto?.loadPanelEnabled}
+                text={gridDto.gridOptions.pagerOptionDto?.loadPanelText}
+              ></LoadPanel>
+              <Summary>
+                {gridDto.columnFormats
+                  .filter((x: any) => !!x.columnTotalSummaryDto?.summaryType)
+                  .map((x: any) => (
+                    <TotalItem
+                      key={`Total_${x.fieldName}`}
+                      column={x.fieldName}
+                      summaryType={x.columnTotalSummaryDto.summaryType as any}
+                      showInColumn={x.columnTotalSummaryDto.showInColumn}
+                      valueFormat={x.columnTotalSummaryDto.valueFormat}
+                      displayFormat={x.columnTotalSummaryDto.displayFormat}
+                    />
+                  ))}
+                {gridDto.columnFormats
+                  .filter((x: any) => !!x.columnGroupSummaryDto?.summaryType)
+                  .map((x: any) => (
+                    <GroupItemDx
+                      key={`Group_${x.fieldName}`}
+                      column={x.fieldName}
+                      summaryType={x.columnGroupSummaryDto.summaryType as any}
+                      showInColumn={x.columnGroupSummaryDto.showInColumn}
+                      valueFormat={x.columnGroupSummaryDto.valueFormat}
+                      displayFormat={x.columnGroupSummaryDto.displayFormat}
+                    />
+                  ))}
+              </Summary>
+              {/* <Column
               dataField="Quantity"
               width={160}
               alignment="right"
@@ -777,34 +786,35 @@ const Grid = (props: GridProps) => {
             >
               <Format type="fixedPoint" precision={2} />
             </Column> */}
-          </DataGrid>
-          {gridDto?.gridOptions?.subFormsDto?.length > 0 && (
-            <>
-              <hr className="my-4" />
-              <SubForms gridDto={gridDto!} formData={formData} level={level ?? 0} />
-            </>
-          )}
+            </DataGrid>
+            {gridDto?.gridOptions?.subFormsDto?.length > 0 && (
+              <>
+                <hr className="my-4" />
+                <SubForms gridDto={gridDto!} formData={formData} level={level ?? 0} />
+              </>
+            )}
 
-          <Dialog
-            width={smaller.md ? '100%' : 1000}
-            isOpen={filterData.isImportModalOpen || false}
-            onClose={() => filterData.setIsImportModalOpen(false)}
-            onRequestClose={() => filterData.setIsImportModalOpen(false)}
-          >
-            <ImportDashboard gridDto={gridDto} />
-          </Dialog>
-        </>
-      )}
+            <Dialog
+              width={smaller.md ? '100%' : 1000}
+              isOpen={filterData.isImportModalOpen || false}
+              onClose={() => filterData.setIsImportModalOpen(false)}
+              onRequestClose={() => filterData.setIsImportModalOpen(false)}
+            >
+              <ImportDashboard gridDto={gridDto} />
+            </Dialog>
+          </>
+        )}
 
-      <Dialog
-        isOpen={toolbarModalData?.open || false}
-        onClose={() => setToolbarModalData(undefined)}
-        onRequestClose={() => setToolbarModalData(undefined)}
-      >
-        {toolbarModalData?.content}
-      </Dialog>
-      <GridFilterDialogs gridRef={gridRef} listFormCode={listFormCode} {...filterData} />
-    </Container>
+        <Dialog
+          isOpen={toolbarModalData?.open || false}
+          onClose={() => setToolbarModalData(undefined)}
+          onRequestClose={() => setToolbarModalData(undefined)}
+        >
+          {toolbarModalData?.content}
+        </Dialog>
+        <GridFilterDialogs gridRef={gridRef} listFormCode={listFormCode} {...filterData} />
+      </Container>
+    </>
   )
 }