diff --git a/apps/vue-app/src/assets/main.css b/apps/vue-app/src/assets/main.css
index 36fb845..14d0f07 100644
--- a/apps/vue-app/src/assets/main.css
+++ b/apps/vue-app/src/assets/main.css
@@ -3,7 +3,6 @@
 #app {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   font-weight: normal;
 }
 
@@ -26,10 +25,4 @@ a,
     display: flex;
     place-items: center;
   }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
 }
diff --git a/apps/vue-app/src/components/pages/DashboardPage.vue b/apps/vue-app/src/components/pages/DashboardPage.vue
index 06d5eb9..ae7a92b 100644
--- a/apps/vue-app/src/components/pages/DashboardPage.vue
+++ b/apps/vue-app/src/components/pages/DashboardPage.vue
@@ -1,11 +1,11 @@
 <script setup>
 import { onMounted, reactive } from 'vue';
 
-import { AbcdeScore } from '@creedengo/vue-ui'
 import SonarAPI from '@creedengo/sonar-services'
 import core from '@creedengo/core-services';
+import { DashboardPageTemplate } from '@creedengo/vue-ui';
 
-const { api, calculateProjectScore } = core;
+const { api, calculateProjectScore, getScoreTexts } = core;
 
 api.init(SonarAPI)
 const props = defineProps({
@@ -23,7 +23,9 @@ const state = reactive({ score: '', error: null });
 
 onMounted(async () => {
   try {
-    state.score = await calculateProjectScore({ ...props });
+    const value = await calculateProjectScore({ ...props });
+    const { label, description, tips } = getScoreTexts(value);
+    state.score = { value, label, description, tips };
   } catch (error) {
     state.score = 'N/A';
     globalThis.console.error('Error fetching score:', error);
@@ -45,7 +47,7 @@ onMounted(async () => {
         <i class="fa fa-exclamation-triangle" /> Score not available - {{ state.error }}
       </span>
       <span v-else>
-        <AbcdeScore :value="state.score" />
+        <DashboardPageTemplate :score="state.score" />
       </span>
     </div>
   </main>
diff --git a/shared/core-services/src/score.service.js b/shared/core-services/src/score.service.js
index 78679ec..1a02f4a 100644
--- a/shared/core-services/src/score.service.js
+++ b/shared/core-services/src/score.service.js
@@ -5,6 +5,34 @@
 
 import api from './adapter.js';
 
+const scoreTexts = {
+    A: { 
+        label: "Your app is fully optimized, congratulations!",
+        description: "Don't forget to check it again if you update your app.",
+        tips: "100 % optimized, congrats!"
+    },
+    B: { 
+        label: "Your app is nearly optimized.",
+        description: "Well done! You can continue by fixing the recommended rule on the right side. This is the one that currently has the highest impact on your app.",
+        tips: "You have between 1 and 9 minor severities."
+    },
+    C: { 
+        label: "Your app is not fully optimized.",
+        description: "Keep going! You can continue by fixing the recommended rule on the right side. This is the one that currently has the highest impact on your app.", 
+        tips: "You have between 10 and 19 minor severities or you have 1 or many major severity."
+    },
+    D: { 
+        label: "Many elements of your application can be optimized.",
+        description: "Don't worry! You can start by fixing the recommended rule on the right side. This is the one that currently has the highest impact on your app.", 
+        tips: "You have more than 20 minor severities or more than 10 major severities or 1 or many critical severities."
+    },
+    E: {
+        label: "Several elements of your application can be optimized.",
+        description: "Don't worry! You can start by fixing the recommended rule on the right side. This is the one that currently has the highest impact on your app.", 
+        tips: "You have 1 or more than 1 blocker severities."
+    }
+};
+
 /**
  * Calculate an ABCDE score from the sustainability issues related to the project size.
  * @param {Object} config
@@ -35,3 +63,12 @@ export async function calculateProjectScore(config) {
     }
     return 'A';
 }
+
+/**
+ * Returns the texts corresponding to the score.
+ * @param {string} score the value of the project's score.
+ * @returns {Object} texts corresponding to the project score.
+ */
+export function getScoreTexts(score) {
+  return scoreTexts[score]
+}
diff --git a/shared/vue-ui/src/index.js b/shared/vue-ui/src/index.js
index f110a34..4dba2ab 100644
--- a/shared/vue-ui/src/index.js
+++ b/shared/vue-ui/src/index.js
@@ -19,6 +19,8 @@ import SettingsForm from './molecules/SettingsForm/SettingsForm.vue'
 // Organisms
 import ScoreBlock from './organisms/ScoreBlock/ScoreBlock.vue'
 import TagCard from './organisms/TagCard/TagCard.vue'
+// Page Templates
+import DashboardPageTemplate from './page-templates/DashboardPageTemplate.vue'
 
 // Design Tokens
 export { IconArrowRight, IconBug, IconCpu, IconDisk, IconMaintenance, IconNetwork, IconRam }
@@ -28,3 +30,5 @@ export { ImpactTag }
 export { AbcdeScore, BulletCriticities, PieChart, RuleIconTag, RuleCriticities, SettingsForm, TooltipBox }
 // Organisms
 export { ScoreBlock, TagCard }
+// Page Templates
+export { DashboardPageTemplate }
diff --git a/shared/vue-ui/src/organisms/ScoreBlock/ScoreBlock.vue b/shared/vue-ui/src/organisms/ScoreBlock/ScoreBlock.vue
index 7c971e9..0bc1059 100644
--- a/shared/vue-ui/src/organisms/ScoreBlock/ScoreBlock.vue
+++ b/shared/vue-ui/src/organisms/ScoreBlock/ScoreBlock.vue
@@ -62,11 +62,15 @@ const projectLink = computed(() => {
 </template>
 
 <style scoped>
+h2 {
+  margin-top: 30px;
+}
 .rate-description {
   padding-top: 20px;
 }
 .tooltip-calc {
   margin-top: 20px;
+  margin-bottom: 1.25rem;
   text-decoration: underline;
   display: inline-block;
 }
diff --git a/shared/vue-ui/src/page-templates/DashboardPageTemplate.stories.js b/shared/vue-ui/src/page-templates/DashboardPageTemplate.stories.js
new file mode 100644
index 0000000..999ebfa
--- /dev/null
+++ b/shared/vue-ui/src/page-templates/DashboardPageTemplate.stories.js
@@ -0,0 +1,155 @@
+import DashboardPageTemplate from "./DashboardPageTemplate.vue";
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+export default {
+ title: 'Page Templates/DashboardPageTemplate',
+ component: DashboardPageTemplate,
+ tags: ['autodocs'],
+ argTypes: {
+   score: {
+     control: {
+       type: 'object'
+     },
+     required: true
+   },
+   rule: {
+     control: {
+       type: 'object'
+     },
+     required: true
+   },
+   metricTags: {
+     control: {
+       type: 'array'
+     },
+     required: true
+   }
+  }
+};
+
+const score = {
+  value: "C",
+      label: "Your app is not fully optimized.",
+      description: "Keep going! You can continue by fixing the recommended rule on the right side. This is the one that currently has the highest impact on your app.", 
+      tips: "You have between 10 and 19 minor severities or you have 1 or many major severity.",
+      projectKey: 'FOO',
+      branch: 'main',
+      minorSeverities: 15,
+      majorSeverities: 3,
+      criticalSeverities: 0
+}
+
+const priorityRule = {
+  percentage: 25,
+  ruleKey: "typescript:S1774",
+  ruleName: "Avoid Using Ternary Operator",
+  ruleHtmlDesc: `
+      Ternary expressions, while concise, can often lead to code that is difficult 
+      to read and understand, especially when they are nested or complex. 
+      Prioritizing readability fosters maintainability and reduces the likelihood of bugs.
+      Therefore, they should be removed in favor of more explicit control structures,
+      such as if/else statements, to improve the clarity and readability of the code.
+  `,
+  ruleImpact: "High",
+  ruleMetricTags: ["Maintenance"]
+}
+
+const cpuTag = {
+  name: "CPU",
+  nbRules: 19,
+  optimizedRules: 12, 
+  minorIssues: 40,
+  majorIssues: 19,
+  criticalIssues: 0,
+  projectKey: 'foo',
+  branch: 'main'
+}
+
+const ramTag = {
+  name: "RAM",
+  nbRules: 17,
+  optimizedRules: 11, 
+  minorIssues: 40,
+  majorIssues: 17,
+  criticalIssues: 0,
+  projectKey: 'foo',
+  branch: 'main'
+}
+
+const networkTag = {
+  name: "Network",
+  nbRules: 1,
+  optimizedRules: 1,
+  minorIssues: 0,
+  majorIssues: 0,
+  criticalIssues: 0,
+  projectKey: 'foo',
+  branch: 'main'
+}
+
+const diskTag = {
+  name: "Disk",
+  nbRules: 1,
+  optimizedRules: 1, 
+  minorIssues: 0,
+  majorIssues: 0,
+  criticalIssues: 0,
+  projectKey: 'foo',
+  branch: 'main'
+}
+
+export const CompleteDashboard = {
+  args: {
+    score,
+    priorityRule,
+    metricTags: [
+      cpuTag,
+      ramTag,
+      networkTag,
+      diskTag
+    ]
+  }
+};
+
+export const WithoutNetworkAndDiskTags = {
+  args: {
+    score,
+    priorityRule,
+    metricTags: [
+      cpuTag,
+      ramTag
+    ]
+  }
+};
+
+export const WithoutScore = {
+  args: {
+    priorityRule,
+    metricTags: [
+      cpuTag,
+      ramTag,
+      networkTag,
+      diskTag
+    ]
+  }
+};
+
+export const WithoutPriorityRule = {
+  args: {
+    score,
+    metricTags: [
+      cpuTag,
+      ramTag,
+      networkTag,
+      diskTag
+    ]
+  }
+};
+
+export const WithoutMetricTags = {
+  args: {
+    score,
+    priorityRule,
+    metricTags: []
+  }
+};
diff --git a/shared/vue-ui/src/page-templates/DashboardPageTemplate.vue b/shared/vue-ui/src/page-templates/DashboardPageTemplate.vue
new file mode 100644
index 0000000..cdb98bb
--- /dev/null
+++ b/shared/vue-ui/src/page-templates/DashboardPageTemplate.vue
@@ -0,0 +1,239 @@
+<script setup>
+import TagCard from '../organisms/TagCard/TagCard.vue';
+import ScoreBlock from '../organisms/ScoreBlock/ScoreBlock.vue';
+
+const props = defineProps({
+  score: {
+    type: Object,
+    required: true,
+    validator: (obj) =>
+      obj &&
+      typeof obj.value === 'string' &&
+      typeof obj.label === 'string' &&
+      typeof obj.description === 'string' &&
+      typeof obj.tips === 'string' &&
+      typeof obj.projectKey === 'string' &&
+      typeof obj.branch === 'string' &&
+      typeof obj.minorSeverities === 'number' &&
+      typeof obj.majorSeverities === 'number' &&
+      typeof obj.criticalSeverities === 'number'
+  },
+  priorityRule: {
+    type: Object,
+    required: true,
+    validator: (obj) =>
+      obj &&
+      typeof obj.percentage === 'number' &&
+      typeof obj.ruleKey === 'string' &&
+      typeof obj.ruleName === 'string' &&
+      typeof obj.ruleHtmlDesc === 'string' &&
+      typeof obj.ruleImpact === 'string' &&
+      typeof obj.ruleMetricTags === 'object' &&
+      Array.isArray(obj.ruleMetricTags)
+  },
+  metricTags: {
+    type: Array,
+    required: true,
+    validator: (arr) => arr.every(metricTag => 
+      metricTag &&
+      typeof metricTag.name === 'string' &&
+      typeof metricTag.nbRules === 'number' &&
+      typeof metricTag.optimizedRules === 'number' &&
+      typeof metricTag.minorIssues === 'number' &&
+      typeof metricTag.majorIssues === 'number' &&
+      typeof metricTag.criticalIssues === 'number' &&
+      typeof metricTag.projectKey === 'string' &&
+      typeof metricTag.branch === 'string'
+    )
+  }
+});
+
+</script>
+
+<template>
+  <div class="main-container">
+    <div class="top-card-container">
+      <div
+        v-if="score" 
+        class="score-block"
+      >
+        <ScoreBlock 
+          :value="score.value"
+          :label-bold="score.label"
+          :label="score.description"
+          :label-long="score.tips"
+          :project-key="score.projectKey"
+          :branch="score.branch"
+          :minor-severities="score.minorSeverities"
+          :major-severities="score.majorSeverities"
+          :critical-severities="score.criticalSeverities"
+        />
+      </div>
+      <div 
+        v-if="score && priorityRule" 
+        class="divider-block"
+      >
+      </div>
+      <div 
+        v-if="priorityRule"
+        class="priority-block"
+      >
+        <h2>Priority Rule</h2>
+        <strong>{{ priorityRule.ruleName }}</strong>
+        <p>{{ priorityRule.ruleHtmlDesc }}</p>
+      </div>
+    </div>
+    <div
+      v-if="metricTags"
+      class="tag-card-container"
+    >
+      <div
+        v-for="(metricTag, index) in props.metricTags"
+        :key="index" 
+        v-bind="metricTag"
+        class="tag-card"
+      >
+        <TagCard
+          :metric-tag="metricTag.name"
+          :nb-rules="metricTag.nbRules"
+          :optimized-rules="metricTag.optimizedRules"
+          :minor-issues="metricTag.minorIssues"
+          :major-issues="metricTag.majorIssues"
+          :critical-issues="metricTag.criticalIssues"
+          :project-key="metricTag.projectKey"
+          :branch="metricTag.branch"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.main-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 1250px;
+  margin: auto;
+}
+
+.divider-block {
+  width: 0.125rem;
+  margin: 2.375rem 0;
+  background: #BBBBBB;
+}
+
+/* SCORE AND PRIORITY RULE CARDS */
+.top-card-container {
+  display: flex;
+  flex-wrap: wrap;
+  background: #FFFFFF;
+  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+}
+
+.score-block {
+  margin: 0 2rem 0 2.625rem;
+  background-color: none;
+  flex: 0 0 38%;
+  height: 320px;
+}
+
+.priority-block {
+  margin: 0 2.625rem 0 3rem;
+  background-color: none;
+  flex: 1;
+  height: 320px;
+}
+
+/* TAG CARDS */
+.tag-card-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.tag-card {
+  background-color: none;
+  flex: 1 1 48%;
+  min-width: 250px;
+  height: 271px;
+}
+
+@media (max-width: 500px)  {
+  .main-container {
+    max-width: 100%;
+    padding: 0.5rem;
+  }
+  .top-card-container {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .tag-card-container {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .score-block,
+  .priority-block,
+  .tag-card {
+    min-width: unset;
+    flex: none;
+    height: auto;
+  }
+  .score-block,
+  .priority-block {
+    margin: 0 1.125rem;
+  }
+  .divider-block {
+    width: calc(100% - 5rem);
+    height: 0.125rem;
+    margin: 0.5rem 2.5rem;
+  }
+}
+
+@media (min-width: 500px) and (max-width: 1024px)  {
+  .main-container {
+    max-width: 100%;
+    padding: 0.5rem;
+  }
+  .top-card-container {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .tag-card-container {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  .score-block,
+  .priority-block,
+  .tag-card {
+    min-width: unset;
+    flex: none;
+    height: auto;
+  }
+  .score-block,
+  .priority-block {
+    margin: 0 3rem;
+  }
+  .divider-block {
+    width: calc(100% - 10rem);
+    height: 0.125rem;
+    margin: 1rem 5rem;
+  }
+}
+
+@media (min-width: 1025px) {
+  .main-container {
+    margin: 0 0.5rem;
+  }
+  .top-card-container {
+    flex-direction: row;
+  }
+  .tag-card-container {
+    justify-content: flex-start;
+  }
+}
+
+</style>