diff --git a/package-lock.json b/package-lock.json
index a236a9f..520e16b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
 			"name": "flanders",
 			"version": "0.0.1",
 			"dependencies": {
+				"@fortawesome/fontawesome-free": "^6.4.2",
 				"dotenv": "^16.3.1",
 				"js-yaml": "^4.1.0"
 			},
@@ -463,6 +464,15 @@
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
+		"node_modules/@fortawesome/fontawesome-free": {
+			"version": "6.4.2",
+			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.2.tgz",
+			"integrity": "sha512-m5cPn3e2+FDCOgi1mz0RexTUvvQibBebOUlUlW0+YrMjDTPkiJ6VTKukA1GRsvRw+12KyJndNjj0O4AgTxm2Pg==",
+			"hasInstallScript": true,
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.10",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
diff --git a/package.json b/package.json
index d0df873..5aa6580 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@fortawesome/fontawesome-free": "^6.4.2",
 		"dotenv": "^16.3.1",
 		"js-yaml": "^4.1.0"
 	}
diff --git a/src/config.yml b/src/config.yml
index 39a9eff..b65b09d 100644
--- a/src/config.yml
+++ b/src/config.yml
@@ -1,7 +1,8 @@
 title: 'Hello World !!'
 subtitle: 'actually, I am a new pilot.'
 logo: 'icon-any.svg'
-asmask: true
+icon: 'fa fa-cloud'
+asmask: false
 
 services:
   - title: '/Cloud'
diff --git a/src/lib/components/Brand.svelte b/src/lib/components/Brand.svelte
index 0d29e54..8a1d083 100644
--- a/src/lib/components/Brand.svelte
+++ b/src/lib/components/Brand.svelte
@@ -20,14 +20,16 @@
 			<img src={brand.logo} alt="logo" />
 		{/if}
 	{:else if brand.icon}
-		<p>an icon</p>
+		<i class="fa-fw {brand.icon}" />
 	{/if}
 </div>
 
 <style>
 	.container {
 		width: var(--size);
+		min-width: min-content;
 		height: var(--size);
+		font-size: var(--size);
 	}
 
 	.masked {
@@ -37,4 +39,11 @@
 		-webkit-mask: var(--mask) center no-repeat;
 		-webkit-mask-size: var(--size);
 	}
+
+	div {
+		display: flex;
+		flex-flow: row wrap;
+		align-items: center;
+		justify-content: center;
+	}
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..68cf6a1
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import '@fortawesome/fontawesome-free/css/all.min.css';
+</script>
+
+<slot />