diff --git a/package-lock.json b/package-lock.json
index c26d4b4..289df7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "fair4health-data-privacy-tool",
-    "version": "0.1.0",
+    "version": "1.0.1",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
diff --git a/package.json b/package.json
index 8ea6917..cada7b7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "fair4health-data-privacy-tool",
     "productName": "FAIR4Health Privacy Tool",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "private": true,
     "author": "SRDC Corporation <technical@srdc.com.tr>",
     "description": "FAIR4Health | Data Privacy Tool",
diff --git a/src/assets/f4h-512x512.png b/src/assets/f4h-512x512.png
new file mode 100644
index 0000000..fe25af6
Binary files /dev/null and b/src/assets/f4h-512x512.png differ
diff --git a/src/common/utils/fhir-util.ts b/src/common/utils/fhir-util.ts
index f654f41..ded0c28 100644
--- a/src/common/utils/fhir-util.ts
+++ b/src/common/utils/fhir-util.ts
@@ -139,4 +139,12 @@ export class FHIRUtils {
         }
     }
 
+    static sortProfiles (profiles: string[]) {
+        return profiles?.sort((p1, p2) => {
+            const p1Name = p1.split('/').pop()!.toLowerCase()
+            const p2Name = p2.split('/').pop()!.toLowerCase()
+            return (p1Name > p2Name) ? 1 : ((p2Name > p1Name) ? -1 : 0)
+        }) || []
+    }
+
 }
diff --git a/src/components/AlgorithmConfigDialog.vue b/src/components/AlgorithmConfigDialog.vue
index bafec07..c0bde25 100644
--- a/src/components/AlgorithmConfigDialog.vue
+++ b/src/components/AlgorithmConfigDialog.vue
@@ -32,7 +32,7 @@
 				</template>
 			</q-select>
 			<q-item-label class="text-weight-bold q-mt-lg q-mb-xs">
-				<span class="text-info"><q-icon name="fas fa-info" size="xs" class="q-mr-xs q-mb-sm" /> {{getInfoText()}} </span>
+				<span class="text-primary"><q-icon name="fas fa-info" size="xs" class="q-mr-xs q-mb-sm" /> {{getInfoText()}} </span>
 			</q-item-label>
 		</q-card-section>
 		<q-card-section v-if="isSensitive() && getAlgorithmName() !== envAlgorithms.REPLACE.name" class="q-pt-none">
diff --git a/src/components/AttributeSelector.vue b/src/components/AttributeSelector.vue
index d6bc95f..926e0bc 100644
--- a/src/components/AttributeSelector.vue
+++ b/src/components/AttributeSelector.vue
@@ -1,22 +1,24 @@
 <template>
 	<div>
-		<q-toolbar class="bg-grey-4">
-			<q-toolbar-title class="text-grey-8"> {{ $t('COMMON.ATTRIBUTE_SELECTOR') }} </q-toolbar-title>
-			<q-btn unelevated :label="$t('BUTTONS.SELECT')" color="primary" @click="selectSavedConfigurations" icon="fas fa-archive" no-caps class="q-mr-sm" >
-				<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.SELECT_SAVED_CONFIGURATION') }} </q-tooltip>
-			</q-btn>
-			<q-btn unelevated :label="$t('BUTTONS.IMPORT')" color="primary" @click="importSavedConfigurations" icon="fas fa-file-import" no-caps >
-				<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.IMPORT_CONFIGURATION') }} </q-tooltip>
-			</q-btn>
+		<q-toolbar class="bg-grey-4 top-fix-column">
+			<q-btn unelevated :label="$t('BUTTONS.BACK')" color="primary" icon="chevron_left" @click="previousStep" no-caps />
+			<q-toolbar-title class="text-grey-8" align="center">
+				<q-icon name="fas fa-database" color="primary" class="q-px-md" />
+				{{ $t('COMMON.ATTRIBUTE_SELECTOR') }}
+			</q-toolbar-title>
+			<div class="q-gutter-md">
+				<q-btn unelevated :label="$t('BUTTONS.SELECT')" color="white" text-color="primary" @click="selectSavedConfigurations" icon="fas fa-archive" no-caps>
+					<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.SELECT_SAVED_CONFIGURATION') }} </q-tooltip>
+				</q-btn>
+				<q-btn unelevated :label="$t('BUTTONS.IMPORT')" color="white" text-color="primary" @click="importSavedConfigurations" icon="fas fa-file-import" no-caps>
+					<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.IMPORT_CONFIGURATION') }} </q-tooltip>
+				</q-btn>
+				<q-btn unelevated :label="$t('BUTTONS.NEXT')" icon-right="chevron_right" color="primary" @click="nextStep" no-caps />
+			</div>
 		</q-toolbar>
 
 		<div class="q-ma-sm">
 			<FhirAttributeTable :key="fhirAttributeTableKey" />
-			<div class="row q-ma-md">
-				<q-btn unelevated :label="$t('BUTTONS.BACK')" color="primary" icon="chevron_left" @click="previousStep" no-caps />
-				<q-space />
-				<q-btn unelevated :label="$t('BUTTONS.NEXT')" icon-right="chevron_right" color="primary" @click="nextStep" no-caps />
-			</div>
 		</div>
 
 		<q-dialog v-model="selectDialog">
@@ -158,4 +160,8 @@ export default class AttributeSelector extends Vue {
         width: 500px
         max-width: 80vw
     }
+		.fhir-element-text:hover {
+				text-decoration: underline
+				cursor: pointer
+		}
 </style>
diff --git a/src/components/ConfigurationManager.vue b/src/components/ConfigurationManager.vue
index 5b9f67d..9469ba8 100644
--- a/src/components/ConfigurationManager.vue
+++ b/src/components/ConfigurationManager.vue
@@ -1,12 +1,23 @@
 <template>
     <div>
-        <q-toolbar class="bg-grey-4">
-            <q-toolbar-title class="text-grey-8"> {{ $t('COMMON.CONFIGURATION_MANAGER') }} </q-toolbar-title>
+        <q-toolbar class="bg-grey-4 top-fix-column">
+            <q-btn unelevated :label="$t('BUTTONS.BACK')" color="primary" icon="chevron_left" @click="previousStep" no-caps />
+            <q-toolbar-title class="text-grey-8" align="center">
+                <q-icon name="fas fa-sliders-h" color="primary" class="q-px-md" />
+                {{ $t('COMMON.CONFIGURATION_MANAGER') }}
+            </q-toolbar-title>
+            <q-btn unelevated :label="$t('BUTTONS.NEXT')" icon-right="chevron_right" color="primary" @click="nextStep" no-caps />
         </q-toolbar>
 
         <div class="q-ma-sm">
-            <q-item-label class="text-weight-bold q-mt-lg q-mb-lg">
-                <span class="text-info"><q-icon name="fas fa-info" size="xs" class="q-mr-xs" /> {{ $t('INFO.CONFIGURATION_MANAGER_INFO') }} </span>
+            <q-item-label class="text-weight-bold q-my-lg">
+                <q-banner inline-actions rounded v-show="showBanner" class="bg-primary text-white">
+                    <q-icon name="fas fa-info" size="xs" class="q-mr-xs" />
+                    {{ $t('INFO.CONFIGURATION_MANAGER_INFO') }}
+                    <template v-slot:action>
+                        <q-btn flat color="white" :label="$t('BUTTONS.OK')" @click="setShowBanner(false)" />
+                    </template>
+                </q-banner>
             </q-item-label>
             <q-card flat class="bg-white">
                 <q-card-section class="row q-col-gutter-sm">
@@ -34,14 +45,16 @@
                             <span><q-icon name="far fa-file-alt" size="xs" color="primary" class="q-mr-xs" /> {{ $t('LABELS.PROFILES') }} </span>
                         </q-item-label>
                         <q-separator spaced />
-                        <q-select clearable outlined dense v-model="currentFHIRProf" :options="resourceProfileMappings[currentFHIRRes]" :label="$t('LABELS.PROFILES')" :disable="!this.resourceProfileMappings[this.currentFHIRRes] || !resourceProfileMappings[currentFHIRRes].length">
+                        <q-select clearable outlined dense options-dense v-model="currentFHIRProf" :options="sortProfiles(resourceProfileMappings[currentFHIRRes])"
+                                  :disable="!this.resourceProfileMappings[this.currentFHIRRes] || !resourceProfileMappings[currentFHIRRes].length"
+                                  :option-label="item => item.split('/').pop()" :label="$t('LABELS.PROFILES')">
                             <template v-slot:option="scope">
                                 <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
                                     <q-item-section avatar>
                                         <q-icon name="fas fa-file-alt" size="xs" />
                                     </q-item-section>
                                     <q-item-section>
-                                        <q-item-label v-html="scope.opt" />
+                                        <q-item-label v-html="scope.opt.split('/').pop()" />
                                     </q-item-section>
                                 </q-item>
                             </template>
@@ -69,11 +82,6 @@
                     </q-tab-panels>
                 </q-card-section>
             </q-card>
-            <div class="row q-ma-md">
-                <q-btn unelevated :label="$t('BUTTONS.BACK')" color="primary" icon="chevron_left" @click="previousStep" no-caps />
-                <q-space />
-                <q-btn unelevated :label="$t('BUTTONS.NEXT')" icon-right="chevron_right" color="primary" @click="nextStep" no-caps />
-            </div>
         </div>
     </div>
 </template>
@@ -82,6 +90,7 @@
 import {Component, Vue, Watch} from 'vue-property-decorator'
 import Loading from '@/components/Loading.vue';
 import {VuexStoreUtil as types} from '@/common/utils/vuex-store-util';
+import {FHIRUtils} from '@/common/utils/fhir-util'
 
 @Component({
     components: {
@@ -101,6 +110,7 @@ export default class ConfigurationManager extends Vue {
     private loadingFhir: boolean = false;
     private fhirResourceOptions: string[] = [];
     private tab: string = 'quasi';
+    private showBanner: boolean = true;
 
     get fhirResourceList (): string[] { return this.$store.getters[types.Fhir.RESOURCE_LIST] }
 
@@ -115,6 +125,12 @@ export default class ConfigurationManager extends Vue {
 
     created () {
         this.getElements();
+        // Set showBanner
+        if (sessionStorage.getItem('showBannerConfigurationManager')) {
+            this.showBanner = sessionStorage.getItem('showBannerConfigurationManager') === 'true'
+        } else {
+            this.showBanner = true;
+        }
     }
 
     @Watch('currentFHIRRes')
@@ -130,8 +146,21 @@ export default class ConfigurationManager extends Vue {
         this.getElements();
     }
 
+    setShowBanner (value: boolean) {
+        sessionStorage.setItem('showBannerConfigurationManager', String(value))
+        this.showBanner = value
+    }
+
     getElements () {
-        this.$store.dispatch(types.Fhir.GET_ELEMENTS, !this.currentFHIRProf ? this.currentFHIRRes : this.currentFHIRProf)
+        const params = {parameterName: '', profile: ''}
+        if (this.currentFHIRProf) {
+            params.parameterName = 'url'
+            params.profile = this.currentFHIRProf
+        } else {
+            params.parameterName = '_id'
+            params.profile = this.currentFHIRRes
+        }
+        this.$store.dispatch(types.Fhir.GET_ELEMENTS, params)
             .then(() => {
                 this.loadingFhir = false;
                 this.$forceUpdate();
@@ -162,6 +191,10 @@ export default class ConfigurationManager extends Vue {
         this.$store.commit(types.DECREMENT_STEP)
     }
 
+    sortProfiles (profiles: string[]) {
+        return FHIRUtils.sortProfiles(profiles)
+    }
+
 }
 
 </script>
diff --git a/src/components/Deidentifier.vue b/src/components/Deidentifier.vue
index 5aa1fd4..7470d90 100644
--- a/src/components/Deidentifier.vue
+++ b/src/components/Deidentifier.vue
@@ -1,23 +1,35 @@
 <template>
 	<div>
-		<q-toolbar class="bg-grey-4">
-			<q-toolbar-title class="text-grey-8"> {{ $t('COMMON.DEIDENTIFIER') }} </q-toolbar-title>
-			<q-btn unelevated label="Save" color="primary" @click="saveConfigurations" icon="save" no-caps class="q-mr-sm" >
-				<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.SAVE_CONFIGURATION') }} </q-tooltip>
-			</q-btn>
-			<q-btn unelevated :label="$t('BUTTONS.EXPORT')" color="primary" @click="exportConfigurations" icon="publish" no-caps >
-				<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.EXPORT_CONFIGURATION') }} </q-tooltip>
-			</q-btn>
+		<q-toolbar class="bg-grey-4 top-fix-column">
+			<q-btn unelevated :label="$t('BUTTONS.BACK')" color="primary" icon="chevron_left" @click="previousStep" no-caps />
+			<q-toolbar-title class="text-grey-8" align="center">
+				<q-icon name="fas fa-user-secret" color="primary" class="q-px-md" />
+				{{ $t('COMMON.DEIDENTIFIER') }}
+			</q-toolbar-title>
+			<div class="q-gutter-md">
+				<q-btn unelevated :label="$t('BUTTONS.SAVE')" color="white" text-color="primary" @click="saveConfigurations" icon="save" no-caps >
+					<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.SAVE_CONFIGURATION') }} </q-tooltip>
+				</q-btn>
+				<q-btn unelevated :label="$t('BUTTONS.EXPORT')" color="white" text-color="primary" @click="exportConfigurations" icon="publish" no-caps >
+					<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.EXPORT_CONFIGURATION') }} </q-tooltip>
+				</q-btn>
+			</div>
 		</q-toolbar>
 
 		<div class="q-ma-sm">
-			<q-item-label class="text-weight-bold q-mt-lg q-mb-lg">
-				<span class="text-info"><q-icon name="fas fa-info" size="xs" class="q-mr-xs" /> {{ $t('INFO.DEIDENTIFIER_INFO') }} </span>
+			<q-item-label class="text-weight-bold q-my-lg">
+				<q-banner inline-actions rounded v-show="showBanner" class="bg-primary text-white">
+					<q-icon name="fas fa-info" size="xs" class="q-mr-xs" />
+					{{ $t('INFO.DEIDENTIFIER_INFO') }}
+					<template v-slot:action>
+						<q-btn flat color="white" :label="$t('BUTTONS.OK')" @click="setShowBanner(false)" />
+					</template>
+				</q-banner>
 			</q-item-label>
-			<q-card flat bordered class="q-ma-sm">
-				<q-card-section>
+			<q-card flat class="bg-white">
+				<q-card-section class="q-col-gutter-sm">
 					<q-table flat binary-state-sort :title="$t('LABELS.RESOURCES')" :data="mappingList" :columns="columns" row-key="resource"
-					         :rows-per-page-options="[0]" :pagination.sync="pagination" class="sticky-header-table" selection="multiple"
+					         :rows-per-page-options="[0]" :pagination.sync="pagination" class="sticky-header-table col-12" selection="multiple"
                              table-class="resources-table" :loading="loading" color="primary" :selected.sync="selectedResources"
 					>
 						<template v-slot:header-cell="props">
@@ -92,15 +104,15 @@
 									</q-chip>
 								</q-td>
 								<q-td key="final" :props="props">
-									<q-chip v-if="isInProgress(props.row.status)" square class="bg-secondary text-white">
+									<q-chip v-if="isInProgress(props.row.status)" square class="bg-positive text-white">
 										<q-spinner color="white" />
 									</q-chip>
 									<q-chip v-else-if="(isDone(props.row.status) || isError(props.row.status)
 											|| isWarning(props.row.status)) && props.row.entries.length"
-									        square class="bg-secondary text-white" clickable @click="showJSONResources(props.row.resource, false)">
+									        square class="bg-positive text-white" clickable @click="showJSONResources(props.row.resource, false)">
 										{{ props.row.entries.length }}
 									</q-chip>
-									<q-chip v-else square class="bg-secondary text-white"> - </q-chip>
+									<q-chip v-else square class="bg-positive text-white"> - </q-chip>
 								</q-td>
 								<q-td key="restricted" :props="props">
 									<q-chip v-if="isInProgress(props.row.status)" square class="bg-negative text-white">
@@ -134,14 +146,14 @@
 													<q-list>
 														<q-item>
 															<div class="col-2">
-																<q-item-label class="text-weight-bold text-secondary q-mt-sm">
+																<q-item-label class="text-weight-bold text-positive q-mt-sm">
 																	{{ $t('LABELS.INFORMATION_LOSS') }}
 																</q-item-label>
 															</div>
 															<div class="col-3">
-																<q-linear-progress rounded size="30px" :value="props.row.informationLoss" color="secondary">
+																<q-linear-progress rounded size="30px" :value="props.row.informationLoss" color="positive">
 																	<div class="absolute-full flex flex-center">
-																		<q-badge text-color="white" color="secondary">
+																		<q-badge text-color="white" color="positive">
 																			{{progressLabel(props.row.informationLoss)}} <q-icon size="10px" class="q-ml-xs" name="fas fa-percent" color="white" />
 																		</q-badge>
 																	</div>
@@ -191,7 +203,7 @@
 					<div class="row content-end q-gutter-sm">
 						<q-space />
 						<q-btn v-if="isSuccess(deidentificationStatus) || isError(deidentificationStatus)"
-						       :disable="disableSave()" label="Save" color="secondary" icon="save"
+						       :disable="disableSave()" label="Save" color="positive" icon="save"
 						       class="q-mt-lg" @click="saveDialog = true" no-caps>
 							<q-tooltip anchor="bottom middle" self="top middle"> {{ $t('TOOLTIPS.SAVE_DEIDENTIFIED_DATA') }} </q-tooltip>
 						</q-btn>
@@ -209,10 +221,6 @@
 
 				</q-card-section>
 			</q-card>
-
-			<div class="row q-ma-md">
-				<q-btn unelevated :label="$t('BUTTONS.BACK')" color="primary" icon="chevron_left" @click="previousStep" no-caps />
-			</div>
 		</div>
 
 		<q-dialog v-model="saveDialog">
@@ -298,7 +306,7 @@
 				<q-separator />
 				<q-card-section v-if="selectedResource && deidentificationResults[selectedResource]" class="scroll json-resources-card-section">
 					<q-item-label class="text-weight-bold q-mb-lg q-mt-sm">
-						<span class="text-info"><q-icon name="fas fa-info" size="xs" class="q-mr-xs" />
+						<span class="text-primary"><q-icon name="fas fa-info" size="xs" class="q-mr-xs" />
 							<template v-if="isRestricted"> {{ $t('INFO.RESTRICTED_JSONS') }} </template>
 							<template v-else> {{ $t('INFO.DEIDENTIFIED_JSONS') }} </template>
 						</span>
@@ -369,6 +377,7 @@ export default class Deidentifier extends Mixins(StatusMixin) {
     private currentPage: number = 1;
     private maxPage: number = 1;
     private isRestricted: boolean = true;
+    private showBanner: boolean = true;
 
     get attributeMappings (): any { return this.$store.getters[types.Fhir.ATTRIBUTE_MAPPINGS] }
     set attributeMappings (value) { this.$store.commit(types.Fhir.SET_ATTRIBUTE_MAPPINGS, value) }
@@ -415,6 +424,18 @@ export default class Deidentifier extends Mixins(StatusMixin) {
         } else {
             this.deidentificationStatus = Status.PENDING;
         }
+
+        // Set showBanner
+        if (sessionStorage.getItem('showBannerDeidentifier')) {
+            this.showBanner = sessionStorage.getItem('showBannerDeidentifier') === 'true';
+        } else {
+            this.showBanner = true;
+        }
+    }
+
+    setShowBanner (value: boolean) {
+        sessionStorage.setItem('showBannerDeidentifier', String(value));
+        this.showBanner = value;
     }
 
     fetchAllData (groupedByResources): Promise<any> {
diff --git a/src/components/OnFHIRConfig.vue b/src/components/OnFHIRConfig.vue
index 8bf51c5..3e2b064 100644
--- a/src/components/OnFHIRConfig.vue
+++ b/src/components/OnFHIRConfig.vue
@@ -1,13 +1,13 @@
 <template>
-	<q-card flat class="col-6">
+	<q-card flat class="col-xs-12 col-sm-12 col-md-6">
 		<q-card-section>
-			<q-item-label class="text-weight-bold q-mb-lg q-mt-sm">
-				<span class="text-info"><q-icon name="fas fa-info" size="xs" class="q-mr-xs" />
+			<q-item-label class="text-weight-bold q-mb-lg">
+				<span class="text-primary"><q-icon name="fas fa-info" size="xs" class="q-mr-xs" />
 					<template v-if="isSource"> {{ $t('LABELS.PROVIDE_FHIR_URL_TO_DEIDENTIFY') }} </template>
 					<template v-else> {{ $t('LABELS.PROVIDE_FHIR_URL_TO_SAVE') }} </template>
 				</span>
 			</q-item-label>
-			<q-input filled type="url" class="col-10" v-model="onfhirUrl" color="accent"
+			<q-input outlined square dense type="url" class="col-10" v-model="onfhirUrl" color="primary"
 			         @input="changeVerificationStatus(Status.PENDING)"
 			         :placeholder="$t('LABELS.FHIR_REPOSITORY_URL')"
 			         :disable="(isSource && isInProgress(fhirSourceVerificationStatus)) || (!isSource && isInProgress(fhirTargetVerificationStatus))"
diff --git a/src/components/OnFHIRVerifier.vue b/src/components/OnFHIRVerifier.vue
index 19eccf0..87c871b 100644
--- a/src/components/OnFHIRVerifier.vue
+++ b/src/components/OnFHIRVerifier.vue
@@ -1,9 +1,7 @@
 <template>
-	<div class="q-mt-xl">
-		<div class="q-py-xl">
-			<div class="row justify-center">
-				<OnFHIRConfig />
-			</div>
+	<div class="q-py-xl">
+		<div class="row justify-center q-mx-lg">
+			<OnFHIRConfig />
 		</div>
 	</div>
 </template>
diff --git a/src/components/tables/FhirAttributeTable.vue b/src/components/tables/FhirAttributeTable.vue
index 7ae4710..0d8c1b9 100644
--- a/src/components/tables/FhirAttributeTable.vue
+++ b/src/components/tables/FhirAttributeTable.vue
@@ -1,7 +1,13 @@
 <template>
 	<div>
-		<q-item-label class="text-weight-bold q-mt-lg q-mb-lg">
-			<span class="text-info"><q-icon name="fas fa-info" size="xs" class="q-mr-xs" /> {{ $t('INFO.FHIR_ATTRIBUTE_TABLE') }} </span>
+		<q-item-label class="text-weight-bold q-my-lg">
+			<q-banner inline-actions rounded v-show="showBanner" class="bg-primary text-white">
+				<q-icon name="fas fa-info" size="xs" class="q-mr-xs" />
+				{{ $t('INFO.FHIR_ATTRIBUTE_TABLE') }}
+				<template v-slot:action>
+					<q-btn flat color="white" :label="$t('BUTTONS.OK')" @click="setShowBanner(false)" />
+				</template>
+			</q-banner>
 		</q-item-label>
 
 		<q-card flat class="bg-white">
@@ -30,14 +36,16 @@
 						<span><q-icon name="far fa-file-alt" size="xs" color="primary" class="q-mr-xs" /> {{ $t('LABELS.PROFILES') }} </span>
 					</q-item-label>
 					<q-separator spaced />
-					<q-select clearable outlined dense v-model="currentFHIRProf" :options="resourceProfileMappings[currentFHIRRes]" :label="$t('LABELS.PROFILES')" :disable="!this.resourceProfileMappings[this.currentFHIRRes] || !resourceProfileMappings[currentFHIRRes].length">
+					<q-select clearable outlined dense options-dense v-model="currentFHIRProf" :options="sortProfiles(resourceProfileMappings[currentFHIRRes])"
+										:disable="!this.resourceProfileMappings[this.currentFHIRRes] || !resourceProfileMappings[currentFHIRRes].length"
+										:option-label="item => item.split('/').pop()" :label="$t('LABELS.PROFILES')">
 						<template v-slot:option="scope">
 							<q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
 								<q-item-section avatar>
 									<q-icon name="fas fa-file-alt" size="xs" />
 								</q-item-section>
 								<q-item-section>
-									<q-item-label v-html="scope.opt" />
+									<q-item-label v-html="scope.opt.split('/').pop()" />
 								</q-item-section>
 							</q-item>
 						</template>
@@ -46,60 +54,64 @@
 			</q-card-section>
 			<q-card-section>
 				<div>
-                    <q-item class="q-px-xs">
-                        <q-item-section>
-                            <q-input borderless dense v-model="filter" :label="$t('LABELS.FILTER')">
-                                <template v-slot:prepend>
-                                    <q-icon name="sort" />
-                                </template>
-                                <template v-slot:append>
-                                    <q-icon v-if="filter" name="clear" class="cursor-pointer" @click="filter=''" />
-                                </template>
-                            </q-input>
-                        </q-item-section>
-                        <q-item-section side v-if="fhirElementList.length && recommendedAttributesMappings[currentFHIRRes]">
-                            <q-btn unelevated dense round icon="restore" color="primary" @click="resetRecommendations()" >
-                                <q-tooltip anchor="center left" self="center right"> {{ $t('TOOLTIPS.RESET_RECOMMENDED_ATTRIBUTES') }} </q-tooltip>
-                            </q-btn>
-                        </q-item-section>
-                    </q-item>
+					<q-item class="q-px-xs">
+							<q-item-section>
+									<q-input borderless dense v-model="filter" :label="$t('LABELS.FILTER')">
+											<template v-slot:prepend>
+													<q-icon name="sort" />
+											</template>
+											<template v-slot:append>
+													<q-icon v-if="filter" name="clear" class="cursor-pointer" @click="filter=''" />
+											</template>
+									</q-input>
+							</q-item-section>
+							<q-item-section side v-if="fhirElementList.length && recommendedAttributesMappings[currentFHIRRes]">
+									<q-btn unelevated dense round icon="restore" color="primary" @click="resetRecommendations()" >
+											<q-tooltip anchor="center left" self="center right"> {{ $t('TOOLTIPS.RESET_RECOMMENDED_ATTRIBUTES') }} </q-tooltip>
+									</q-btn>
+							</q-item-section>
+					</q-item>
 					<q-separator />
 					<div class="splitter-div">
-						<q-splitter v-model="splitterModel">
+						<q-splitter v-model="splitterModel" :limits="[50, 100]">
 							<!--Fhir Element Tree Part-->
 							<template v-slot:before>
-								<div class="row items-center full-width bg-primary q-pa-xs">
+								<div class="row items-center full-width bg-primary q-pa-xs text-white">
 									<div class="text-center col">
-										<span class="text-white"> {{ $t('TABLE.ATTRIBUTE') }} </span>
+										{{ $t('TABLE.ATTRIBUTE') }}
+										<q-tooltip v-if="splitterModel<100">{{$t('TABLE.ATTRIBUTE')}}</q-tooltip>
 									</div>
 									<div class="text-center col-4">
-										<span class="text-white"> {{ $t('TABLE.TYPE') }} </span>
+										{{ $t('TABLE.TYPE') }}
+										<q-tooltip v-if="splitterModel<100">{{$t('TABLE.TYPE')}}</q-tooltip>
 									</div>
-									<div class="text-right col-1">
-										<span class="text-white">{{attributeTypes.ID}}</span>
+									<div class="text-right col-1 ellipsis">
+										{{attributeTypes.ID}}
+										<q-tooltip v-if="splitterModel<100">{{attributeTypes.ID}}</q-tooltip>
 									</div>
-									<div class="text-center col-2">
-										<span class="text-white">{{attributeTypes.QUASI}}</span>
+									<div class="text-center col-2 ellipsis">
+										{{attributeTypes.QUASI}}
+										<q-tooltip v-if="splitterModel<100">{{attributeTypes.QUASI}}</q-tooltip>
 									</div>
-									<div class="col-1">
-										<span class="text-white">{{attributeTypes.SENSITIVE}}</span>
+									<div class="col-1 ellipsis">
+										{{attributeTypes.SENSITIVE}}
+										<q-tooltip v-if="splitterModel<100">{{attributeTypes.SENSITIVE}}</q-tooltip>
 									</div>
-									<div class="col-1">
-										<span class="text-white">{{attributeTypes.INSENSITIVE}}</span>
+									<div class="col-1 ellipsis">
+										{{attributeTypes.INSENSITIVE}}
+										<q-tooltip v-if="splitterModel<100">{{attributeTypes.INSENSITIVE}}</q-tooltip>
 									</div>
 								</div>
-								<q-scroll-area>
+								<q-scroll-area class="overflow-hidden">
 									<q-tree :nodes="fhirElementList"
 									        ref="fhirTree"
 									        node-key="value"
 									        label-key="label"
-									        :selected.sync="selectedStr"
 									        :filter="filter"
 									        :filter-method="filterTree"
 									        :no-nodes-label="noNodesLabel"
 									        :no-results-label="$t('LABELS.NO_RESULT')"
 									        selected-color="primary"
-									        @update:selected="onSelected"
 									        default-expand-all
 									>
 										<template v-slot:default-header="prop">
@@ -110,7 +122,9 @@
 													        :size="prop.node.children && prop.node.children.length ? 'sm' : 'xs'"
 													        class="q-mr-sm"
 													/>
-													<span>{{ prop.node.label }}
+													<span class="fhir-element-text" v-bind:class="{'text-primary': selectedStr === prop.node.value}"
+																@click="onSelected(prop.node.value)">
+														{{ prop.node.label }}
 														<span v-if="prop.node.required" class="text-red text-weight-bold text-size-xxxl">
 															{{ prop.node.required ? '*' : '' }}
 															<q-tooltip v-if="prop.node.children.length" content-class="text-size-md" anchor="top right" self="top left">
@@ -146,43 +160,44 @@
 
 							<!--Elements Definition Part-->
 							<template v-slot:after>
-								<q-scroll-area v-if="selectedElem">
-									<div>
-										<q-toolbar class="bg-grey-2">
-											<q-item-label class="text-weight-bold text-grey-7">
-												<span class="text-weight-regular text-primary">
-							                        [{{ selectedElem.min }}..{{ selectedElem.max }}]
-							                    </span>
-												<u>
-													{{ selectedElem.value }}
-													<q-tooltip>{{ selectedElem.value }}</q-tooltip>
-												</u>
-												<span class="text-red">{{ selectedElem.required ? '*' : '' }}</span>
-											</q-item-label>
-										</q-toolbar>
-										<div class="q-ma-sm q-gutter-sm">
-											<q-card flat bordered v-if="selectedElem.short">
-												<q-card-section>
-													<div class="text-h6"> {{ $t('LABELS.SHORT') }} </div>
-													<q-separator spaced />
-													<div class="text-grey-10">{{ selectedElem.short }}</div>
-												</q-card-section>
-											</q-card>
-											<q-card flat bordered v-if="selectedElem.definition">
-												<q-card-section>
-													<div class="text-h6"> {{ $t('LABELS.DEFINITION') }} </div>
-													<q-separator spaced />
-													<div class="text-grey-10">{{ selectedElem.definition }}</div>
-												</q-card-section>
-											</q-card>
-											<q-card flat bordered v-if="selectedElem.comment">
-												<q-card-section>
-													<div class="text-h6"> {{ $t('LABELS.COMMENTS') }} </div>
-													<q-separator spaced />
-													<div class="text-grey-10">{{ selectedElem.comment }}</div>
-												</q-card-section>
-											</q-card>
-										</div>
+								<q-toolbar v-if="selectedElem" class="bg-grey-2">
+									<q-item-label class="text-weight-bold text-grey-7">
+										<span class="text-weight-regular text-primary">
+												[{{ selectedElem.min }}..{{ selectedElem.max }}]
+										</span>
+										<u>
+											{{ selectedElem.value }}
+											<q-tooltip>{{ selectedElem.value }}</q-tooltip>
+										</u>
+										<span class="text-red">{{ selectedElem.required ? '*' : '' }}</span>
+									</q-item-label>
+									<q-space />
+									<q-btn unelevated round dense size="sm" icon="close" color="white" text-color="grey-9"
+												 @click="selectedStr=null; selectedElem=null; splitterModel=100" />
+								</q-toolbar>
+								<q-scroll-area v-if="selectedElem" class="overflow-hidden">
+									<div class="q-ma-sm q-gutter-sm">
+										<q-card flat bordered v-if="selectedElem.short">
+											<q-card-section>
+												<div class="text-h6"> {{ $t('LABELS.SHORT') }} </div>
+												<q-separator spaced />
+												<div class="text-grey-10">{{ selectedElem.short }}</div>
+											</q-card-section>
+										</q-card>
+										<q-card flat bordered v-if="selectedElem.definition">
+											<q-card-section>
+												<div class="text-h6"> {{ $t('LABELS.DEFINITION') }} </div>
+												<q-separator spaced />
+												<div class="text-grey-10">{{ selectedElem.definition }}</div>
+											</q-card-section>
+										</q-card>
+										<q-card flat bordered v-if="selectedElem.comment">
+											<q-card-section>
+												<div class="text-h6"> {{ $t('LABELS.COMMENTS') }} </div>
+												<q-separator spaced />
+												<div class="text-grey-10">{{ selectedElem.comment }}</div>
+											</q-card-section>
+										</q-card>
 									</div>
 								</q-scroll-area>
 							</template>
@@ -204,7 +219,7 @@ import {VuexStoreUtil as types} from '@/common/utils/vuex-store-util';
 @Component
 export default class FhirAttributeTable extends Vue {
     private attributeTypes = environment.attributeTypes;
-    private splitterModel = 70;
+    private splitterModel = 100;
     private loadingFhir: boolean = false;
     private selectedStr: string = '';
     private selectedElem: any = null;
@@ -212,9 +227,10 @@ export default class FhirAttributeTable extends Vue {
     private fhirResourceOptions: string[] = [];
     private tempParameterMappings = JSON.parse(JSON.stringify(this.attributeMappings));
     private tempTypeMappings = JSON.parse(JSON.stringify(this.typeMappings));
+    private showBanner: boolean = true;
 
     get fhirResourceList (): string[] { return this.$store.getters[types.Fhir.RESOURCE_LIST] }
-    get fhirProfileList (): string[] { return this.$store.getters[types.Fhir.PROFILE_LIST].map(r => r.id) }
+    get fhirProfileList (): string[] { return this.$store.getters[types.Fhir.PROFILE_LIST].map(r => r.url) }
 
     get currentFHIRRes (): string { return this.$store.getters[types.Fhir.CURRENT_RESOURCE] }
     set currentFHIRRes (value) { this.$store.commit(types.Fhir.SET_CURRENT_RESOURCE, value) }
@@ -250,17 +266,24 @@ export default class FhirAttributeTable extends Vue {
             this.noNodesLabel = String(this.$t('LABELS.PLEASE_SELECT_A_RESOURCE'));
         }
         this.$store.dispatch(types.Fhir.GET_RESOURCES).then(res => {
-            for (const resource of this.fhirResourceList) {
-                this.$store.dispatch(types.Fhir.GET_PROFILES_BY_RES, resource).then(pro => {
-                    this.resourceProfileMappings[JSON.parse(JSON.stringify(resource))] = JSON.parse(JSON.stringify(this.fhirProfileList));
+            for (const resourceType of this.fhirResourceList) {
+                this.$store.dispatch(types.Fhir.GET_PROFILES_BY_RES, resourceType).then(pro => {
+                    this.resourceProfileMappings[resourceType] = JSON.parse(JSON.stringify(this.fhirProfileList));
                     this.$forceUpdate();
                 }).catch(err => {
-                    this.$notify.error(String(this.$t('ERROR.X_RESOURCE_ELEMENTS_COULDNT_BE_LOADED', {resource})))
+                    this.$notify.error(String(this.$t('ERROR.X_RESOURCE_ELEMENTS_COULDNT_BE_LOADED', {resource: resourceType})))
                 });
             }
         }).catch(err => {
             this.$notify.error(String(this.$t('ERROR.ST_WRONG_FETCHING_X', {name: 'resources'})))
         });
+
+        // Set showBanner
+        if (sessionStorage.getItem('showBannerFhirAttribute')) {
+            this.showBanner = sessionStorage.getItem('showBannerFhirAttribute') === 'true';
+        } else {
+            this.showBanner = true;
+        }
     }
 
     @Watch('currentFHIRRes')
@@ -277,8 +300,21 @@ export default class FhirAttributeTable extends Vue {
         this.getElements();
     }
 
+    setShowBanner (value: boolean) {
+            sessionStorage.setItem('showBannerFhirAttribute', String(value))
+            this.showBanner = value
+    }
+
     getElements () {
-        this.$store.dispatch(types.Fhir.GET_ELEMENTS, !this.currentFHIRProf ? this.currentFHIRRes : this.currentFHIRProf)
+        const params = {parameterName: '', profile: ''};
+        if (this.currentFHIRProf) {
+            params.parameterName = 'url';
+            params.profile = this.currentFHIRProf;
+        } else {
+            params.parameterName = '_id';
+            params.profile = this.currentFHIRRes;
+        }
+        this.$store.dispatch(types.Fhir.GET_ELEMENTS, params)
             .then(response => {
                 this.loadingFhir = false;
                 this.tempParameterMappings = JSON.parse(JSON.stringify(this.attributeMappings));
@@ -290,7 +326,7 @@ export default class FhirAttributeTable extends Vue {
             .catch(() => {
                 this.loadingFhir = false;
                 if (!this.currentFHIRProf) {
-                    this.$notify.error(String(this.$t('ERROR.X_RESOURCE_ELEMENTS_COULDNT_BE_LOADED', {resource: this.currentFHIRRes})))
+                    this.$notify.error(String(this.$t('ERROR.X_RESOURCE_ELEMENTS_COULDNT_BE_LOADED', {resource: this.currentFHIRRes})));
                 } else {
                     this.$notify.error(String(this.$t('ERROR.X_PROFILE_ELEMENTS_COULDNT_BE_LOADED', {profile: this.currentFHIRProf})));
                 }
@@ -326,6 +362,9 @@ export default class FhirAttributeTable extends Vue {
     }
 
     onSelected (target) {
+        if (target) this.splitterModel = 50;
+        else this.splitterModel = 100;
+        this.selectedStr = target;
         const filtered = this.fhirElementListFlat.filter(item => item.value === target);
         this.selectedElem = filtered.length ? filtered[0] : null
     }
@@ -340,12 +379,17 @@ export default class FhirAttributeTable extends Vue {
             (this.typeMappings[node.value] && this.typeMappings[node.value].toLowerCase().includes(filt));
     }
 
+    sortProfiles (profiles: string[]) {
+        return FHIRUtils.sortProfiles(profiles)
+    }
+
   }
 </script>
 
 <style lang="stylus">
     .splitter-div {
         overflow-y: auto
+				overflow-x: hidden
     }
     .q-scrollarea {
         height: 50vh
diff --git a/src/components/tables/QuasiIdentifierTable.vue b/src/components/tables/QuasiIdentifierTable.vue
index 16cbbe9..fa25c2e 100644
--- a/src/components/tables/QuasiIdentifierTable.vue
+++ b/src/components/tables/QuasiIdentifierTable.vue
@@ -17,32 +17,30 @@
 		</q-item-section>
 		<q-separator />
 		<div class="splitter-div">
-			<q-splitter v-model="splitterModel">
+			<q-splitter v-model="splitterModel" :limits="[50, 100]">
 				<!--Fhir Element Tree Part-->
 				<template v-slot:before>
-					<div class="row items-center full-width bg-primary q-pa-xs">
-						<div class="text-center col">
-							<span class="text-white"> {{ $t('TABLE.ATTRIBUTE') }} </span>
+					<div class="row items-center full-width bg-primary q-pa-xs text-white">
+						<div class="text-center col ellipsis">
+							{{ $t('TABLE.ATTRIBUTE') }}
 						</div>
-						<div class="text-center col-4">
-							<span class="text-white"> {{ $t('TABLE.TYPE') }} </span>
+						<div class="text-center col-4 ellipsis">
+							{{ $t('TABLE.TYPE') }}
 						</div>
-						<div class="text-center col-6">
-							<span class="text-white"> {{ $t('TABLE.DEIDENTIFICATION_ALGORITHM') }} </span>
+						<div class="text-center col-6 ellipsis">
+							{{ $t('TABLE.DEIDENTIFICATION_ALGORITHM') }}
 						</div>
 					</div>
-					<q-scroll-area>
+					<q-scroll-area class="overflow-hidden">
 						<q-tree :nodes="quasiElementList"
 						        ref="quasiTree"
 						        node-key="value"
 						        label-key="label"
-						        :selected.sync="selectedStr"
 						        :filter="filter"
 						        :filter-method="filterTree"
 						        :no-nodes-label="$t('LABELS.NO_QUASI_IDENTIFIER')"
 						        :no-results-label="$t('LABELS.NO_RESULT')"
 						        selected-color="primary"
-						        @update:selected="onSelected"
 						        default-expand-all
 						>
 							<template v-slot:default-header="prop">
@@ -53,7 +51,10 @@
 										        :size="prop.node.children && prop.node.children.length ? 'sm' : 'xs'"
 										        class="q-mr-sm"
 										/>
-										<span>{{ prop.node.label }} <span class="text-red">{{ prop.node.required ? '*' : '' }}</span></span>
+										<span class="fhir-element-text" v-bind:class="{'text-primary': selectedStr === prop.node.value}"
+													@click="onSelected(prop.node.value)">{{ prop.node.label }}
+												<span class="text-red">{{ prop.node.required ? '*' : '' }}</span>
+										</span>
 									</div>
 									<div class="text-center col-5">
 										<span class="text-caption text-primary">{{ typeMappings[prop.key] }}</span>
@@ -93,43 +94,44 @@
 
 				<!--Elements Definition Part-->
 				<template v-slot:after>
-					<q-scroll-area v-if="selectedElem">
-						<div>
-							<q-toolbar class="bg-grey-2">
-								<q-item-label class="text-weight-bold text-grey-7">
-									<span class="text-weight-regular text-primary">
-			                            [{{ selectedElem.min }}..{{ selectedElem.max }}]
-									</span>
-									<u>
-										{{ selectedElem.value }}
-										<q-tooltip>{{ selectedElem.value }}</q-tooltip>
-									</u>
-									<span class="text-red">{{ selectedElem.min ? '*' : '' }}</span>
-								</q-item-label>
-							</q-toolbar>
-							<div class="q-ma-sm q-gutter-sm">
-								<q-card flat bordered v-if="selectedElem.short">
-									<q-card-section>
-										<div class="text-h6"> {{ $t('LABELS.SHORT') }} </div>
-										<q-separator spaced />
-										<div class="text-grey-10">{{ selectedElem.short }}</div>
-									</q-card-section>
-								</q-card>
-								<q-card flat bordered v-if="selectedElem.definition">
-									<q-card-section>
-										<div class="text-h6"> {{ $t('LABELS.DEFINITION') }} </div>
-										<q-separator spaced />
-										<div class="text-grey-10">{{ selectedElem.definition }}</div>
-									</q-card-section>
-								</q-card>
-								<q-card flat bordered v-if="selectedElem.comment">
-									<q-card-section>
-										<div class="text-h6"> {{ $t('LABELS.COMMENTS') }} </div>
-										<q-separator spaced />
-										<div class="text-grey-10">{{ selectedElem.comment }}</div>
-									</q-card-section>
-								</q-card>
-							</div>
+					<q-toolbar v-if="selectedElem" class="bg-grey-2">
+						<q-item-label class="text-weight-bold text-grey-7">
+							<span class="text-weight-regular text-primary">
+								[{{ selectedElem.min }}..{{ selectedElem.max }}]
+							</span>
+							<u>
+								{{ selectedElem.value }}
+								<q-tooltip>{{ selectedElem.value }}</q-tooltip>
+							</u>
+							<span class="text-red">{{ selectedElem.min ? '*' : '' }}</span>
+						</q-item-label>
+						<q-space />
+						<q-btn unelevated round dense size="sm" icon="close" color="white" text-color="grey-9"
+									 @click="selectedStr=null; selectedElem=null; splitterModel=100" />
+					</q-toolbar>
+					<q-scroll-area v-if="selectedElem" class="overflow-hidden">
+						<div class="q-ma-sm q-gutter-sm">
+							<q-card flat bordered v-if="selectedElem.short">
+								<q-card-section>
+									<div class="text-h6"> {{ $t('LABELS.SHORT') }} </div>
+									<q-separator spaced />
+									<div class="text-grey-10">{{ selectedElem.short }}</div>
+								</q-card-section>
+							</q-card>
+							<q-card flat bordered v-if="selectedElem.definition">
+								<q-card-section>
+									<div class="text-h6"> {{ $t('LABELS.DEFINITION') }} </div>
+									<q-separator spaced />
+									<div class="text-grey-10">{{ selectedElem.definition }}</div>
+								</q-card-section>
+							</q-card>
+							<q-card flat bordered v-if="selectedElem.comment">
+								<q-card-section>
+									<div class="text-h6"> {{ $t('LABELS.COMMENTS') }} </div>
+									<q-separator spaced />
+									<div class="text-grey-10">{{ selectedElem.comment }}</div>
+								</q-card-section>
+							</q-card>
 						</div>
 					</q-scroll-area>
 				</template>
@@ -160,7 +162,7 @@ import {VuexStoreUtil as types} from '@/common/utils/vuex-store-util';
     } as any
 })
 export default class QuasiIdentifierTable extends Vue {
-    private splitterModel = 70;
+    private splitterModel = 100;
     private configDialog: boolean = false;
     private selectedStr: string = '';
     private selectedElem: any = null;
@@ -257,6 +259,9 @@ export default class QuasiIdentifierTable extends Vue {
     }
 
     onSelected (target) {
+        if (target) this.splitterModel = 50;
+        else this.splitterModel = 100;
+        this.selectedStr = target;
         const filtered = this.fhirElementListFlat.filter(item => item.value === target);
         this.selectedElem = filtered.length ? filtered[0] : null
     }
@@ -285,6 +290,7 @@ export default class QuasiIdentifierTable extends Vue {
 <style lang="stylus">
     .splitter-div {
         overflow-y: auto
+				overflow-x: hidden
     }
     .q-scrollarea {
         height: 50vh
diff --git a/src/components/tables/SensitiveAttributeTable.vue b/src/components/tables/SensitiveAttributeTable.vue
index b449d81..c2de0c1 100644
--- a/src/components/tables/SensitiveAttributeTable.vue
+++ b/src/components/tables/SensitiveAttributeTable.vue
@@ -12,35 +12,33 @@
 	</q-item-section>
 		<q-separator />
 		<div class="splitter-div">
-			<q-splitter v-model="splitterModel">
+			<q-splitter v-model="splitterModel" :limits="[50, 100]">
 				<!--Fhir Element Tree Part-->
 				<template v-slot:before>
-					<div class="row items-center full-width bg-primary q-pa-xs">
+					<div class="row items-center full-width bg-primary q-pa-xs text-white">
 						<div class="text-center col">
-							<span class="text-white"> {{ $t('TABLE.ATTRIBUTE') }} </span>
+							{{ $t('TABLE.ATTRIBUTE') }}
 						</div>
 						<div class="text-center col-4">
-							<span class="text-white"> {{ $t('TABLE.TYPE') }} </span>
+							{{ $t('TABLE.TYPE') }}
 						</div>
 						<div class="text-center col-2">
-							<span class="text-white"> {{ $t('TABLE.HAS_RARE_VALUES') }} </span>
+							{{ $t('TABLE.HAS_RARE_VALUES') }}
 						</div>
 						<div class="text-center col-2">
-							<span class="text-white"> {{ $t('TABLE.L_DIVERSITY') }} (l)</span>
+							{{ $t('TABLE.L_DIVERSITY') }} (l)
 						</div>
 					</div>
-					<q-scroll-area>
+					<q-scroll-area class="overflow-hidden">
 						<q-tree :nodes="sensitiveElementList"
 						        ref="sensTree"
 						        node-key="value"
 						        label-key="label"
-						        :selected.sync="selectedStr"
 						        :filter="filter"
 						        :filter-method="filterTree"
 						        :no-nodes-label="$t('LABELS.NO_SENSITIVE_ATTRIBUTE')"
 						        :no-results-label="$t('LABELS.NO_RESULT')"
 						        selected-color="primary"
-						        @update:selected="onSelected"
 						        default-expand-all
 						>
 							<template v-slot:default-header="prop">
@@ -51,7 +49,10 @@
 										        :size="prop.node.children && prop.node.children.length ? 'sm' : 'xs'"
 										        class="q-mr-sm"
 										/>
-										<span>{{ prop.node.label }} <span class="text-red">{{ prop.node.required ? '*' : '' }}</span></span>
+										<span class="fhir-element-text" v-bind:class="{'text-primary': selectedStr === prop.node.value}"
+													@click="onSelected(prop.node.value)">{{ prop.node.label }}
+												<span class="text-red">{{ prop.node.required ? '*' : '' }}</span>
+										</span>
 									</div>
 									<div class="text-center col-5">
 										<span class="text-caption text-primary">{{ typeMappings[prop.key] }}</span>
@@ -90,43 +91,44 @@
 
 				<!--Elements Definition Part-->
 				<template v-slot:after>
-					<q-scroll-area v-if="selectedElem">
-						<div>
-							<q-toolbar class="bg-grey-2">
-								<q-item-label class="text-weight-bold text-grey-7">
-									<span class="text-weight-regular text-primary">
-			                            [{{ selectedElem.min }}..{{ selectedElem.max }}]
-									</span>
-									<u>
-										{{ selectedElem.value }}
-										<q-tooltip>{{ selectedElem.value }}</q-tooltip>
-									</u>
-									<span class="text-red">{{ selectedElem.min ? '*' : '' }}</span>
-								</q-item-label>
-							</q-toolbar>
-							<div class="q-ma-sm q-gutter-sm">
-								<q-card flat bordered v-if="selectedElem.short">
-									<q-card-section>
-										<div class="text-h6"> {{ $t('LABELS.SHORT') }} </div>
-										<q-separator spaced />
-										<div class="text-grey-10">{{ selectedElem.short }}</div>
-									</q-card-section>
-								</q-card>
-								<q-card flat bordered v-if="selectedElem.definition">
-									<q-card-section>
-										<div class="text-h6"> {{ $t('LABELS.DEFINITION') }} </div>
-										<q-separator spaced />
-										<div class="text-grey-10">{{ selectedElem.definition }}</div>
-									</q-card-section>
-								</q-card>
-								<q-card flat bordered v-if="selectedElem.comment">
-									<q-card-section>
-										<div class="text-h6"> {{ $t('LABELS.COMMENTS') }} </div>
-										<q-separator spaced />
-										<div class="text-grey-10">{{ selectedElem.comment }}</div>
-									</q-card-section>
-								</q-card>
-							</div>
+					<q-toolbar v-if="selectedElem" class="bg-grey-2">
+						<q-item-label class="text-weight-bold text-grey-7">
+							<span class="text-weight-regular text-primary">
+								[{{ selectedElem.min }}..{{ selectedElem.max }}]
+							</span>
+							<u>
+								{{ selectedElem.value }}
+								<q-tooltip>{{ selectedElem.value }}</q-tooltip>
+							</u>
+							<span class="text-red">{{ selectedElem.min ? '*' : '' }}</span>
+						</q-item-label>
+						<q-space />
+						<q-btn unelevated round dense size="sm" icon="close" color="white" text-color="grey-9"
+									 @click="selectedStr=null; selectedElem=null; splitterModel=100" />
+					</q-toolbar>
+					<q-scroll-area v-if="selectedElem" class="overflow-hidden">
+						<div class="q-ma-sm q-gutter-sm">
+							<q-card flat bordered v-if="selectedElem.short">
+								<q-card-section>
+									<div class="text-h6"> {{ $t('LABELS.SHORT') }} </div>
+									<q-separator spaced />
+									<div class="text-grey-10">{{ selectedElem.short }}</div>
+								</q-card-section>
+							</q-card>
+							<q-card flat bordered v-if="selectedElem.definition">
+								<q-card-section>
+									<div class="text-h6"> {{ $t('LABELS.DEFINITION') }} </div>
+									<q-separator spaced />
+									<div class="text-grey-10">{{ selectedElem.definition }}</div>
+								</q-card-section>
+							</q-card>
+							<q-card flat bordered v-if="selectedElem.comment">
+								<q-card-section>
+									<div class="text-h6"> {{ $t('LABELS.COMMENTS') }} </div>
+									<q-separator spaced />
+									<div class="text-grey-10">{{ selectedElem.comment }}</div>
+								</q-card-section>
+							</q-card>
 						</div>
 					</q-scroll-area>
 				</template>
@@ -142,11 +144,11 @@
 </template>
 
 <script lang="ts">
-    import {Component, Vue, Watch} from 'vue-property-decorator'
-    import Loading from '@/components/Loading.vue';
-    import {VuexStoreUtil as types} from '@/common/utils/vuex-store-util';
+import {Component, Vue, Watch} from 'vue-property-decorator'
+import Loading from '@/components/Loading.vue';
+import {VuexStoreUtil as types} from '@/common/utils/vuex-store-util';
 
-    @Component({
+@Component({
     components: {
         AlgorithmConfigDialog: () => ({
             component: import('@/components/AlgorithmConfigDialog.vue'),
@@ -156,7 +158,7 @@
     } as any
 })
 export default class SensitiveAttributeTable extends Vue {
-    private splitterModel = 70;
+    private splitterModel = 100;
     private configDialog: boolean = false;
     private selectedStr: string = '';
     private selectedElem: any = null;
@@ -213,6 +215,9 @@ export default class SensitiveAttributeTable extends Vue {
     }
 
     onSelected (target) {
+        if (target) this.splitterModel = 50;
+        else this.splitterModel = 100;
+        this.selectedStr = target;
         const filtered = this.fhirElementListFlat.filter(item => item.value === target);
         this.selectedElem = filtered.length ? filtered[0] : null
     }
diff --git a/src/electron-main.ts b/src/electron-main.ts
index 318854d..2ec313f 100644
--- a/src/electron-main.ts
+++ b/src/electron-main.ts
@@ -62,7 +62,7 @@ function createWindow () {
     if (process.env.WEBPACK_DEV_SERVER_URL) {
         // Load the url of the dev server if in development mode
         win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
-        if (!process.env.IS_TEST) win.webContents.openDevTools()
+        // if (!process.env.IS_TEST) win.webContents.openDevTools()
     } else {
         createProtocol('fair4health');
         // Load the index.html when not in development
@@ -158,16 +158,11 @@ app.on('activate', () => {
 app.on('ready', async () => {
     if (isDevelopment && !process.env.IS_TEST) {
         // Install Vue Devtools
-        // Devtools extensions are broken in Electron 6.0.0 and greater
-        // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info
-        // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode
-        // If you are not using Windows 10 dark mode, you may uncomment these lines
-        // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines
-        try {
-            await installExtension(VUEJS_DEVTOOLS)
-        } catch (e) {
-            console.error('Vue Devtools failed to install:', e.toString())
-        }
+        // try {
+        //     await installExtension(VUEJS_DEVTOOLS)
+        // } catch (e) {
+        //     console.error('Vue Devtools failed to install:', e.toString())
+        // }
     }
 
     // Create Main renderer window
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 6724f69..fe35f5a 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -114,7 +114,7 @@ export default class MainLayout extends Vue {
     set currentStep (value) { this.$store.commit(types.SET_STEP, value) }
 
     get isCollapsed () { return (this.$q.screen.gt.xs && (this.$q.screen.lt.lg || this.drawerMiniState)) }
-    get projectHomePage () { return window.process.env.ELECTRON_WEBPACK_APP_F4H_HOMEPAGE }
+    get projectHomePage () { return window.process.env.APP_HOMEPAGE }
 
     changeCurrentStep (stepId: number) {
         if (this.currentStep > stepId) {
@@ -134,7 +134,7 @@ export default class MainLayout extends Vue {
         margin-left auto
         margin-right auto
     .drawer-list .q-item.q-router-link--exact-active
-        border-left solid 4px #526EB2
+        border-left solid 4px #8A5975
     .drawer-list .q-item
         border-radius 0 32px 32px 0
     .step-item:hover
diff --git a/src/layouts/TitleBar.vue b/src/layouts/TitleBar.vue
index 2eb4ce4..c70e3ae 100644
--- a/src/layouts/TitleBar.vue
+++ b/src/layouts/TitleBar.vue
@@ -7,7 +7,7 @@
                     <div class="col-auto">
                         <img class="flex flex-center" src="../assets/FAIR4Health-logo.png" width="80px">
                     </div>
-                    <div class="col text-weight-bold text-size-xl">{{ $t('COMMON.APP_NAME') }}</div>
+                    <div class="col text-weight-bold text-size-xl">{{ $t('COMMON.APP_NAME') }} {{ appVersion }}</div>
                 </div>
             </div>
             <template v-if="!isDarwin">
@@ -126,7 +126,8 @@
             ]
         }
 
-        get projectHomePage () { return window.process.env.ELECTRON_WEBPACK_APP_F4H_HOMEPAGE }
+        get projectHomePage (): string { return window.process.env.APP_HOMEPAGE || '' }
+        get appVersion (): string { return window.process.env.APP_VERSION || '' }
         get isDarwin (): boolean { return remote.process.platform === 'darwin' }
 
         get drawerOpen (): boolean { return this.$store.getters[types.DRAWER_OPEN] }
diff --git a/src/locales/en.json b/src/locales/en.json
index ef12649..98766f5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -92,6 +92,7 @@
         "FHIR_RESOURCE": "FHIR Resource",
         "FILTER": "Filter",
         "FIXED_LENGTH": "Fixed Length",
+        "FOLLOW_US": "Follow us on social media!",
         "HIGHEST_PROSECUTOR": "Highest Prosecutor Risk",
         "LAST_DIGITS_TO_BE_ROUNDED": "Last digits to be rounded:",
         "LOWEST_PROSECUTOR": "Lowest Prosecutor Risk",
diff --git a/src/main.ts b/src/main.ts
index e80e9ff..61de533 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,7 +10,10 @@ import TreeView from 'vue-json-tree-view'
 import _ from 'lodash'
 import i18n from './i18n'
 
-window.process.env.ELECTRON_WEBPACK_APP_F4H_HOMEPAGE = require('./../package.json').homepage
+const packageJson = require('./../package.json')
+// Include the app version and project homepage in the window.process environment
+window.process.env.APP_VERSION = packageJson.version
+window.process.env.APP_HOMEPAGE = packageJson.homepage
 
 webFrame.setZoomFactor(0.9);
 
diff --git a/src/quasar.js b/src/quasar.js
index 1be4767..ab77fc4 100644
--- a/src/quasar.js
+++ b/src/quasar.js
@@ -70,7 +70,8 @@ import {
     QToggle,
     QField,
     QPagination,
-    QBtnDropdown
+    QBtnDropdown,
+    QBanner
 } from 'quasar'
 
 Vue.use(Quasar, {
@@ -148,7 +149,8 @@ Vue.use(Quasar, {
         QToggle,
         QField,
         QPagination,
-        QBtnDropdown
+        QBtnDropdown,
+        QBanner
     },
     directives: {
         ClosePopup
diff --git a/src/store/fhirStore/index.ts b/src/store/fhirStore/index.ts
index 6f9cba1..7a5a986 100644
--- a/src/store/fhirStore/index.ts
+++ b/src/store/fhirStore/index.ts
@@ -37,7 +37,7 @@ const fhirStore = {
             const resource = splitted[0];
             const key = splitted.slice(2).join('.');
             const word = splitted[splitted.length - 1];
-            if (recommendation.attributeMappings[resource][key]) {
+            if (recommendation.attributeMappings[resource] && recommendation.attributeMappings[resource][key]) {
                 if (!tmpObj.required || (tmpObj.required && recommendation.attributeMappings[resource][key] !== environment.attributeTypes.ID)) {
                     // if no conflict with required value, assign recommendation
                     state.attributeMappings[tmpObj.value] = recommendation.attributeMappings[resource][key];
@@ -271,7 +271,7 @@ const fhirStore = {
                                     state.sourceFhirService.search(resourceType, {_profile: url})
                                         .then(response => {
                                             const count: number = response.data.total;
-                                            resolve1({resourceType, profile, count, title, description});
+                                            resolve1({resourceType, profile, count, url, title, description});
                                         }).catch(err => reject1(err));
                                 })
                             })).then((counts: any) => {
@@ -282,7 +282,7 @@ const fhirStore = {
                                     }
                                 }
                                 commit(types.Fhir.SET_PROFILE_LIST, availableProfiles.map(e => {
-                                    return {id: e.profile, title: e.title, description: e.description}
+                                    return {id: e.profile, title: e.title, url: e.url, description: e.description} as fhir.StructureDefinition
                                 }) || []);
                                 resolve(true)
                             }).catch(err => reject(err));
@@ -293,9 +293,11 @@ const fhirStore = {
                     }).catch(err => reject(err));
             })
         },
-        [types.Fhir.GET_ELEMENTS] ({ commit, state }, profileId: string): Promise<boolean> {
+        [types.Fhir.GET_ELEMENTS] ({ commit, state }, { parameterName, profile }): Promise<boolean> {
             return new Promise((resolve, reject) => {
-                state.sourceFhirService.search('StructureDefinition', {_id: profileId}, true)
+                const query = {}
+                query[parameterName] = profile
+                state.sourceFhirService.search('StructureDefinition', query, true)
                     .then(res => {
                         const bundle = res.data as fhir.Bundle;
                         if (bundle.entry?.length) {
@@ -303,7 +305,7 @@ const fhirStore = {
                             const list: fhir.ElementTree[] = [];
                             resource?.snapshot?.element.forEach((element) => {
                                 const parts = element?.id?.split('.') || [];
-                                parts.splice(1, 0, profileId);
+                                parts.splice(1, 0, profile.split('/').pop());
                                 const newId = parts.join('.');
                                 let tmpList = list;
                                 let part = parts.shift();
diff --git a/src/styles/quasar.variables.styl b/src/styles/quasar.variables.styl
index 87748b6..733bd3f 100644
--- a/src/styles/quasar.variables.styl
+++ b/src/styles/quasar.variables.styl
@@ -2,10 +2,10 @@
 // to match your app's branding.
 
 $primary   = #B26F95
-$secondary = #00A54F
+$secondary = #8A5975
 $accent    = #ea6f12
 
-$positive  = #0DA9A4
+$positive  = $green
 $negative  = #D9534F
 $info      = #00A7F7
 $warning   = #FDB860
diff --git a/src/views/About.vue b/src/views/About.vue
index b0c4931..7be0373 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,17 +1,58 @@
 <template>
-	<div>
-		<q-toolbar class="bg-grey-4">
-			<q-toolbar-title class="text-grey-8">
-				{{ $t('TITLES.ABOUT') }}
-			</q-toolbar-title>
-		</q-toolbar>
-	</div>
+  <div>
+    <q-toolbar class="bg-grey-4">
+      <q-toolbar-title class="text-grey-8">
+        {{ $t('TITLES.ABOUT') }}
+      </q-toolbar-title>
+    </q-toolbar>
+    <div class="row justify-center q-ma-lg">
+      <q-card flat class="bg-grey-3 col-xs-12 col-sm-12 col-md-6">
+        <p align="center"><img src="../assets/FAIR4Health-logo.png" alt="FAIR4Health Logo" width="400" /></p>
+        <q-card-section>
+          <p class="text-grey-7 text-size-xl text-center">{{ description }}</p>
+        </q-card-section>
+        <q-card-section class="text-center text-h6 text-grey-7">
+          {{ $t('LABELS.FOLLOW_US') }}
+        </q-card-section>
+        <q-card-section class="text-center q-gutter-md">
+          <q-btn flat round icon="fab fa-github" size="lg" @click="openExternal(github)">
+            <q-tooltip>GitHub</q-tooltip>
+          </q-btn>
+          <q-btn flat round icon="fab fa-youtube" size="lg" color="negative" @click="openExternal(youtube)">
+            <q-tooltip>Youtube</q-tooltip>
+          </q-btn>
+          <q-btn flat round size="lg" color="positive" @click="openExternal(projectWebsite)">
+            <q-avatar size="lg"><img src="../assets/f4h-512x512.png" alt="FAIR4Health Website" /></q-avatar>
+            <q-tooltip>FAIR4Health Website</q-tooltip>
+          </q-btn>
+        </q-card-section>
+        <q-card-section class="text-center text-grey-6 q-pt-xl">
+          {{ acknowledgement }}
+        </q-card-section>
+      </q-card>
+    </div>
+  </div>
 </template>
 
 <script lang="ts">
-import {Component, Vue} from 'vue-property-decorator'
+import { Component, Vue } from 'vue-property-decorator'
+import { shell } from 'electron'
 
 @Component
-export default class About extends Vue {}
+export default class About extends Vue {
+  private description: string = 'The Data Privacy Tool is a standalone, desktop application developed by the ' +
+      'FAIR4Health project. The tool aims to handle the privacy challenges exposed by the sensitive health data. ' +
+      'It is designed to work on an HL7 FHIR API so that it can be used on top of any standard FHIR Repository ' +
+      'as a data de-identification, anonymization, and related actions toolset. The tool accesses FHIR resources, ' +
+      'presents metadata to the user, guide the user about the configuration to be applied and then output the ' +
+      'processed FHIR resources.'
+  private github: string = 'https://github.com/fair4health/data-privacy-tool'
+  private youtube: string = 'https://www.youtube.com/channel/UCpycUIqaXMAJCZPatqcm4cg'
+  private projectWebsite: string = 'https://www.fair4health.eu/'
+  private acknowledgement: string = 'This research has received funding from the European Union’s Horizon 2020 ' +
+      'research and innovation programme under grant agreement No 824666 (Improving Health Research in EU through FAIR Data).'
+
+  openExternal (url: string) { shell.openExternal(url) }
+}
 
 </script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index f8d8863..34844ac 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -17,87 +17,73 @@
 			<q-item-section>
 				<q-item-label class="text-h4 text-weight-bold">{{ $t('LABELS.OVERALL_STEPS') }}</q-item-label>
 				<q-stepper flat v-model="step" ref="stepper" alternative-labels color="primary" class="bg-grey-3">
-					<q-step :name="1" :title="$t('COMMON.ONFHIR_VERIFIER')" icon="fas fa-fire" color="secondary"></q-step>
-					<q-step :name="2" :title="$t('COMMON.ATTRIBUTE_SELECTOR')" icon="fas fa-database" color="secondary"></q-step>
-					<q-step :name="3" :title="$t('COMMON.CONFIGURATION_MANAGER')" icon="fas fa-sliders-h" color="secondary"></q-step>
-					<q-step :name="4" :title="$t('COMMON.DEIDENTIFIER')" icon="fas fa-user-secret" color="secondary"></q-step>
+					<q-step :name="1" :title="$t('COMMON.ONFHIR_VERIFIER')" icon="fas fa-fire" color="primary"></q-step>
+					<q-step :name="2" :title="$t('COMMON.ATTRIBUTE_SELECTOR')" icon="fas fa-database" color="primary"></q-step>
+					<q-step :name="3" :title="$t('COMMON.CONFIGURATION_MANAGER')" icon="fas fa-sliders-h" color="primary"></q-step>
+					<q-step :name="4" :title="$t('COMMON.DEIDENTIFIER')" icon="fas fa-user-secret" color="primary"></q-step>
 				</q-stepper>
 			</q-item-section>
 		</q-item>
 
 		<!--OnFHIR Verifier-->
-		<q-item class="q-pt-xl q-pl-xl q-pr-xl text-grey-8">
+		<q-item class="q-pa-lg text-grey-8">
 			<q-item-section>
 				<q-item-label class="text-h7 text-weight-bold">
 					<q-icon class=" q-mr-xs" size="xs" name="fas fa-fire" /> {{ $t('COMMON.ONFHIR_VERIFIER') }}
 				</q-item-label>
 				<q-card flat class="q-ma-md">
 					<q-card-section>
-						<q-list dense class="rounded-borders">
-							<q-item>
-								<q-item-section> {{ $t('INFO.ONFHIR_VERIFIER_HOME_INFO') }} </q-item-section>
-							</q-item>
-						</q-list>
+						{{ $t('INFO.ONFHIR_VERIFIER_HOME_INFO') }}
 					</q-card-section>
 				</q-card>
 			</q-item-section>
 		</q-item>
 
 		<!--Attribute Selector-->
-		<q-item class="q-pt-xl q-pl-xl q-pr-xl text-grey-8">
+		<q-item class="q-pa-lg text-grey-8">
 			<q-item-section>
 				<q-item-label class="text-h7 text-weight-bold">
 					<q-icon class=" q-mr-xs" size="xs" name="fas fa-database" /> {{ $t('COMMON.ATTRIBUTE_SELECTOR') }}
 				</q-item-label>
 				<q-card flat class="q-ma-md">
 					<q-card-section>
-						<q-list dense class="rounded-borders">
-							<q-item>
-								<q-item-section> {{ $t('INFO.ATTRIBUTE_SELECTOR_HOME_INFO') }} </q-item-section>
-							</q-item>
-						</q-list>
+						{{ $t('INFO.ATTRIBUTE_SELECTOR_HOME_INFO') }}
 					</q-card-section>
 				</q-card>
 			</q-item-section>
 		</q-item>
 
 		<!--Configuration Manager-->
-		<q-item class="q-pt-xl q-pl-xl q-pr-xl text-grey-8">
+		<q-item class="q-pa-lg text-grey-8">
 			<q-item-section>
 				<q-item-label class="text-h7 text-weight-bold">
 					<q-icon class=" q-mr-xs" size="xs" name="fas fa-sliders-h" /> {{ $t('COMMON.CONFIGURATION_MANAGER') }}
 				</q-item-label>
 				<q-card flat class="q-ma-md">
 					<q-card-section>
-						<q-list dense class="rounded-borders">
-							<q-item>
-								<q-item-section> {{ $t('INFO.CONFIGURATION_MANAGER_HOME_INFO') }} </q-item-section>
-							</q-item>
-						</q-list>
+						{{ $t('INFO.CONFIGURATION_MANAGER_HOME_INFO') }}
 					</q-card-section>
 				</q-card>
 			</q-item-section>
 		</q-item>
 
 		<!--De-identifier-->
-		<q-item class="q-pt-xl q-pl-xl q-pr-xl text-grey-8">
+		<q-item class="q-pa-lg text-grey-8">
 			<q-item-section>
 				<q-item-label class="text-h7 text-weight-bold">
 					<q-icon class=" q-mr-xs" size="xs" name="fas fa-user-secret" /> {{ $t('COMMON.DEIDENTIFIER') }}
 				</q-item-label>
 				<q-card flat class="q-ma-md">
 					<q-card-section>
-						<q-list dense class="rounded-borders">
-							<q-item>
-								<q-item-section> {{ $t('INFO.DEIDENTIFIER_HOME_INFO_1') }} </q-item-section>
-							</q-item>
-							<q-item>
-								<q-item-section> {{ $t('INFO.DEIDENTIFIER_HOME_INFO_2') }} </q-item-section>
-							</q-item>
-							<q-item>
-								<q-item-section> {{ $t('INFO.DEIDENTIFIER_HOME_INFO_3') }} </q-item-section>
-							</q-item>
-						</q-list>
+						<q-item-label class="q-mb-md">
+							{{ $t('INFO.DEIDENTIFIER_HOME_INFO_1') }}
+						</q-item-label>
+						<q-item-label class="q-mb-md">
+							{{ $t('INFO.DEIDENTIFIER_HOME_INFO_2') }}
+						</q-item-label>
+						<q-item-label>
+							{{ $t('INFO.DEIDENTIFIER_HOME_INFO_3') }}
+						</q-item-label>
 					</q-card-section>
 				</q-card>
 			</q-item-section>