diff --git a/Kernel/Output/HTML/CustomerDashboard/TileServiceCatalog.pm b/Kernel/Output/HTML/CustomerDashboard/TileServiceCatalog.pm
index 99ca98a..ac454d8 100644
--- a/Kernel/Output/HTML/CustomerDashboard/TileServiceCatalog.pm
+++ b/Kernel/Output/HTML/CustomerDashboard/TileServiceCatalog.pm
@@ -204,13 +204,30 @@ sub Run {
                         }
                     }
                 } elsif ( $Needed eq 'Descriptions' ) {
-                    $Service{DescriptionShort} = $ServiceRef->{$Needed}->{$LayoutObject->{UserLanguage}}->{DescriptionShort} || 
-                        $ServiceRef->{$Needed}->{$Kernel::OM->Get('Kernel::Config')->Get('DefaultLanguage')}->{DescriptionShort} || 
-                            $ServiceRef->{$Needed}->{'en'}->{DescriptionShort} || $LayoutObject->{LanguageObject}->Translate( 'Description not available.' );
+                    $Service{DescriptionShort} = $ServiceRef->{$Needed}->{$LayoutObject->{UserLanguage}}->{DescriptionShort} ||
+                        $ServiceRef->{$Needed}->{$Kernel::OM->Get('Kernel::Config')->Get('DefaultLanguage')}->{DescriptionShort} ||
+                        $ServiceRef->{$Needed}->{'en'}->{DescriptionShort} || $LayoutObject->{LanguageObject}->Translate( 'Description not available.' );
 
-                    $Service{DescriptionLong} = $ServiceRef->{$Needed}->{$LayoutObject->{UserLanguage}}->{DescriptionLong} || 
-                        $ServiceRef->{$Needed}->{$Kernel::OM->Get('Kernel::Config')->Get('DefaultLanguage')}->{DescriptionLong} || 
-                            $ServiceRef->{$Needed}->{'en'}->{DescriptionLong} || $LayoutObject->{LanguageObject}->Translate( 'Description not available.' );
+                    my $DynamicFieldBackendObject = $Kernel::OM->Get('Kernel::System::DynamicField::Backend');
+
+                    my $IconFieldConfig = $Kernel::OM->Get('Kernel::System::DynamicField')->DynamicFieldGet(
+                        Name => 'ServiceIcon',
+                    );
+
+                    if ($IconFieldConfig) {
+                        my $IconValue = $DynamicFieldBackendObject->ValueGet(
+                            DynamicFieldConfig => $IconFieldConfig,
+                            ObjectID           => $Service{ServiceID},
+                        );
+
+                        if ($IconValue) {
+                            $Service{ServiceIconClass} = $IconValue;
+                        }
+                    }
+
+                    $Service{DescriptionLong} = $ServiceRef->{$Needed}->{$LayoutObject->{UserLanguage}}->{DescriptionLong} ||
+                        $ServiceRef->{$Needed}->{$Kernel::OM->Get('Kernel::Config')->Get('DefaultLanguage')}->{DescriptionLong} ||
+                        $ServiceRef->{$Needed}->{'en'}->{DescriptionLong} || $LayoutObject->{LanguageObject}->Translate( 'Description not available.' );
                 }
                 else {
                     $Service{$Needed} = $ServiceRef->{$Needed};
@@ -447,6 +464,24 @@ sub Run {
             }
 
             $Service{NotSelectable}             = 1;
+
+            my $DynamicFieldBackendObject = $Kernel::OM->Get('Kernel::System::DynamicField::Backend');
+
+            my $IconFieldConfig = $Kernel::OM->Get('Kernel::System::DynamicField')->DynamicFieldGet(
+                Name => 'ServiceIcon',
+            );
+
+            if ($IconFieldConfig) {
+                my $IconValue = $DynamicFieldBackendObject->ValueGet(
+                    DynamicFieldConfig => $IconFieldConfig,
+                    ObjectID           => $Service{ServiceID},
+                );
+
+                if ($IconValue) {
+                    $Service{ServiceIconClass} = $IconValue;
+                }
+            }
+
             $ServiceList{ $Service{ServiceID} } = \%Service;
             $ParentID                           = $Service{ParentID};
 
diff --git a/Kernel/Output/HTML/Templates/Standard/Dashboard/TileServiceCatalog.tt b/Kernel/Output/HTML/Templates/Standard/Dashboard/TileServiceCatalog.tt
index a401d17..dc90302 100644
--- a/Kernel/Output/HTML/Templates/Standard/Dashboard/TileServiceCatalog.tt
+++ b/Kernel/Output/HTML/Templates/Standard/Dashboard/TileServiceCatalog.tt
@@ -17,15 +17,20 @@
     <h2>[% Translate(Data.HeaderText) | html %]</h2>
     <div class="oooServiceCatalogWrapper">
         <ul class="oooParentServiceList">
-[% RenderBlockStart("ParentService") %]
-            <li title="[% Translate('Show details of this service.') | html %]" data-service-id="[% Data.ServiceID | html %]" class="oooServiceIDAvailable">[% Translate(Data.NameShort) | html %]</li>
-[% RenderBlockEnd("ParentService") %]
-[% RenderBlockStart("ParentServiceMore") %]
+        [% RenderBlockStart("ParentService") %]
+            <li title="[% Translate('Show details of this service.') | html %]" data-service-id="[% Data.ServiceID | html %]" class="oooServiceIDAvailable">
+                <span style="width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px">
+                    <i class="fa [% Data.ServiceIconClass %]"  style="font-size: 43pt;"></i>
+                    [% Translate(Data.NameShort) | html %]
+                </span>
+            </li>
+        [% RenderBlockEnd("ParentService") %]
+        [% RenderBlockStart("ParentServiceMore") %]
             <li class="oooServiceMore oooServiceIDAvailable" data-service-id="All">
                 <div class="oooServiceMoreSearch"><i class="ooofo ooofo-search"></i><span>[% Translate('Search') | html %]</span></div>
                 <div class="oooServiceMoreInfo">+ [% Data.NumberOfServices | html %]</div>
             </li>
-[% RenderBlockEnd("ParentServiceMore") %]
+        [% RenderBlockEnd("ParentServiceMore") %]
         </ul>
     </div>
 </div>
diff --git a/Kernel/Output/JavaScript/Templates/Standard/Customer/TileServiceCatalogContainer.html.tmpl b/Kernel/Output/JavaScript/Templates/Standard/Customer/TileServiceCatalogContainer.html.tmpl
index 7beb2c2..bed007d 100644
--- a/Kernel/Output/JavaScript/Templates/Standard/Customer/TileServiceCatalogContainer.html.tmpl
+++ b/Kernel/Output/JavaScript/Templates/Standard/Customer/TileServiceCatalogContainer.html.tmpl
@@ -18,6 +18,11 @@
     
     <div class="oooDesciptionHeader">
         <h2 class="oooServiceName" title="{{ Name }}">{{ Name }}</h2>
+        {% if NumberOfSubservices %}
+            <div class="oooSubservices ooo12g">
+                {{ NumberOfSubservices }} {{ 'Sub-Service(s)' | Translate }}
+            </div>
+        {% endif %}
         {% if ( TicketType | length ) >= 1 %}
             <i class="ooofo ooofo-more_v"></i>
             <div class="oooServiceActions oooHidden">
@@ -44,10 +49,11 @@
     </div>
 
     <div class="oooDescriptionBody">
-        {% if NumberOfSubservices %}
-            <div class="oooSubservices ooo12g">{{ NumberOfSubservices }} {{ 'Sub-Service(s)' | Translate }}</div>
-        {% endif %}
-        <span class="oooDescriptionShort">{{ DescriptionShort }}</span>
+        <div style="display: flex; gap: 12px; color: var(--colTextDark); font-size:100px;">
+            <i class="fa {{ ServiceIconClass }}">
+            </i>
+        </div>
+        <div class="oooDescriptionShort">{{ DescriptionShort }}</div>
         <span class="oooKeywords">{{ Keywords }}</span>
     </div>
 
diff --git a/ServiceCatalog.sopm b/ServiceCatalog.sopm
index e8331f4..e98b89a 100644
--- a/ServiceCatalog.sopm
+++ b/ServiceCatalog.sopm
@@ -42,7 +42,8 @@
         <File Permission="660" Location="var/httpd/htdocs/js/Core.Agent.ITSMServiceZoom.js" />
         <File Permission="660" Location="var/httpd/htdocs/js/Core.Agent.Admin.Service.js" />
         <File Permission="660" Location="var/packagesetup/ServiceCatalog.pm" />
-    </Filelist>    
+    </Filelist>
+    
     <DatabaseInstall Type="post">
         <TableCreate Name="service_description">
             <Column AutoIncrement="true" Name="id" PrimaryKey="true" Required="true" Type="BIGINT"></Column>
@@ -156,12 +157,33 @@
             <ColumnDrop Name="keywords"></ColumnDrop>
         </TableAlter>
     </DatabaseUninstall>
+    <CodeInstall Type="post"><![CDATA[
+    my $CodeModule = 'var::packagesetup::' . $Param{Structure}->{Name}->{Content};
+
+    $Kernel::OM->Get($CodeModule)->CreateServiceIconField();
+]]></CodeInstall>
+    <CodeUpgrade Version="11.0.5"><![CDATA[
+    my $CodeModule = 'var::packagesetup::' . $Param{Structure}->{Name}->{Content};
+
+    $Kernel::OM->Get($CodeModule)->CreateServiceIconField();
+]]></CodeUpgrade>
     <CodeUpgrade Version="11.0.3"><![CDATA[
     # create the package name
     my $CodeModule = 'var::packagesetup::' . $Param{Structure}->{Name}->{Content};
-      
+
     $Kernel::OM->Get($CodeModule)->CodeUpgradeFromLowerThan_11_0_3();
-]]></CodeUpgrade>    
+]]></CodeUpgrade>
+
+    <CodeInstall Type="post"><![CDATA[
+    my $CodeModule = 'var::packagesetup::' . $Param{Structure}->{Name}->{Content};
+
+    $Kernel::OM->Get($CodeModule)->CreateServiceIconField();
+]]></CodeInstall>
+    <CodeUpgrade Version="11.0.5"><![CDATA[
+    my $CodeModule = 'var::packagesetup::' . $Param{Structure}->{Name}->{Content};
+
+    $Kernel::OM->Get($CodeModule)->CreateServiceIconField();
+]]></CodeUpgrade>
     <IntroInstall Lang="en" Title="Install Information" Type="pre">
         &lt;br&gt;
         WELCOME!&lt;br&gt;
diff --git a/var/httpd/htdocs/js/Core.Customer.TileServiceCatalog.js b/var/httpd/htdocs/js/Core.Customer.TileServiceCatalog.js
index 3ff6457..06d1865 100644
--- a/var/httpd/htdocs/js/Core.Customer.TileServiceCatalog.js
+++ b/var/httpd/htdocs/js/Core.Customer.TileServiceCatalog.js
@@ -210,7 +210,8 @@ Core.Customer.TileServiceCatalog = (function (TargetNS) {
             Baselink: Baselink,
             NotSelectable: Service.NotSelectable,
             Class: Class,
-            Keywords: Service.Keywords
+            Keywords: Service.Keywords,
+            ServiceIconClass: Service.ServiceIconClass
         });
 
         return Container;
diff --git a/var/httpd/htdocs/skins/Customer/default/css/Core.Dashboard.TileServiceCatalog.css b/var/httpd/htdocs/skins/Customer/default/css/Core.Dashboard.TileServiceCatalog.css
index c00f575..ebd9d50 100644
--- a/var/httpd/htdocs/skins/Customer/default/css/Core.Dashboard.TileServiceCatalog.css
+++ b/var/httpd/htdocs/skins/Customer/default/css/Core.Dashboard.TileServiceCatalog.css
@@ -27,8 +27,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
     word-wrap: anywhere;
     box-sizing: border-box;
     display: flex;
+    justify-content: center;
     align-items: flex-start;
-    padding: 56px 32px 32px;
+    padding: 16px;
     gap: 8px;
     width: 200px;
     height: 128px;
@@ -240,7 +241,7 @@ ul.oooBreadcrumbServiceList > li:first-child {
 }
 
 .oooServiceContainer {
-    gap: 16px 16px;
+    gap: 6px 6px;
     margin: 8px;
     float: left;
     display: flex;
@@ -384,12 +385,12 @@ ul.oooBreadcrumbServiceList > li:first-child {
 }
 
 .oooDescriptionBody { 
-    overflow: hidden; */
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-items: flex-start;
-    padding: 16px 24px;
+    align-items: center;
+    padding: 0 24px;
     gap: 4px;
     flex: none;
     order: 1;
@@ -398,6 +399,7 @@ ul.oooBreadcrumbServiceList > li:first-child {
     z-index: 1;
     font-size: 12px;
     color: var(--colTextLight);
+    text-align: center;
 }
 
 .oooServiceBottom {
@@ -1037,7 +1039,7 @@ ul.oooBreadcrumbServiceList > li:first-child {
 
     .Dialog > .Header {
         padding: 0;
-    overflow: hidden;
+        overflow: hidden;
     }
 
     .Dialog > .Header .Close {
diff --git a/var/packagesetup/ServiceCatalog.pm b/var/packagesetup/ServiceCatalog.pm
index 6579216..c28de0e 100644
--- a/var/packagesetup/ServiceCatalog.pm
+++ b/var/packagesetup/ServiceCatalog.pm
@@ -161,6 +161,51 @@ sub CodeUpgradeFromLowerThan_11_0_3 {    ## no critic qw(OTOBO::RequireCamelCase
     return 1;
 }
 
+sub CreateServiceIconField() {
+    my ( $Self, %Param ) = @_;
+
+    my $DynamicFieldObject = $Kernel::OM->Get('Kernel::System::DynamicField');
+
+    my $ServiceIconField = $DynamicFieldObject->DynamicFieldGet(
+        Name => 'ServiceIcon',
+    );
+
+    # Only create the field if it doesn't exist
+    if ( !$ServiceIconField->{ID} ) {
+        my $FieldID = $DynamicFieldObject->DynamicFieldAdd(
+            Name       => 'ServiceIcon',
+            Label      => 'Service Icon Class String',
+            FieldType  => 'Text',
+            ObjectType => 'Service',
+            Config     => {
+                DefaultValue => '',
+                Tooltip      => 'Define a FontAwesome v4 icon class to be used for this service. Example value: fa-bug',
+            },
+            ValidID => 1,
+            UserID  => 1,
+            FieldOrder => 410,
+        );
+
+        if ( !$FieldID ) {
+            $Kernel::OM->Get('Kernel::System::Log')->Log(
+                Priority 	=> 'error',
+                Message 	=> 'Could not create ServiceIcon dynamic field!'
+            );
+            return 0;
+        }
+        $Kernel::OM->Get('Kernel::System::Log')->Log(
+            Priority 	=> 'notice',
+            Message 	=> 'Created ServiceIcon dynamic field successfully.'
+        );
+        return 1;
+    } else {
+        $Kernel::OM->Get('Kernel::System::Log')->Log(
+            Priority 	=> 'notice',
+            Message 	=> 'ServiceIcon dynamic field already exists.'
+        );
+    }
+    return 1;
+}
 
 =head2 CodeUninstall()