Lot of improvements.

cerberus/src/app/core/components/application-card/application-card.component.html

@@ -0,0 +1,7 @@
+<div class="application-card">
+    <div class="logo">
+        <img [src]="application?.image" />
+        <div class="status {{application?.status}}" matTooltip="This application is running"></div>
+    </div>
+    <div class="name">{{application?.name}}</div>
+</div>

cerberus/src/app/core/components/application-card/application-card.component.scss

@@ -0,0 +1,44 @@
+.application-card {
+    margin: 2rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+    .logo {
+        position: relative;
+
+        img {
+            width: 164px;
+            height: 164px;
+            background-color: #fff;
+            border-radius: 4px;
+            box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.2);
+        }
+
+        .status {
+            width: 2rem;
+            height: 2rem;
+            
+            border-radius: 10em;
+            position: absolute;
+            bottom: 10px;
+            right: 5px;
+
+            &.started {
+                background-image: linear-gradient(#5bc13e, #1fa200);
+                border: 2px solid #136900;
+            }
+            &.stoped {
+                background-image: linear-gradient(#c13e3e, #a20000);
+                border: 2px solid #770000;
+            }
+        }
+    }
+
+
+    .name {
+        margin: .5rem;
+        font-weight: 500;
+    }
+}

cerberus/src/app/core/components/application-card/application-card.component.ts

@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Application } from '../../entities/Application';
+import { ApplicationService } from '../../services/application.service';
+
+interface AppDisplaying {
+  name: string,
+  image: string,
+  status: string
+}
+
+@Component({
+  selector: 'app-application-card',
+  templateUrl: './application-card.component.html',
+  styleUrls: ['./application-card.component.scss']
+})
+export class ApplicationCardComponent implements OnInit {
+  @Input() application: Application | undefined;
+
+  constructor(
+    private _applicationService: ApplicationService
+  ) {}
+
+  ngOnInit(): void {
+    
+  }
+}

cerberus/src/app/core/entities/Application.ts

@@ -3,4 +3,6 @@ export interface Application {
   name: string;
   serviceName: string;
   serviceType: string;
+  image: string;
+  status: string;
 }

cerberus/src/app/core/shared.module.ts

@@ -0,0 +1,35 @@
+import { HttpClientModule } from "@angular/common/http";
+import { NgModule } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatIconModule } from "@angular/material/icon";
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { RouterModule } from "@angular/router";
+import { AppRoutingModule } from "../app.routing";
+import { ApplicationCardComponent } from './components/application-card/application-card.component';
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatIconModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        RouterModule,
+    ],
+    exports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatIconModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        RouterModule,
+    ]
+})
+export class SharedModule {
+
+}