diff --git a/Interface/src/Components/dashboard/dashboard.component.ts b/Interface/src/Components/dashboard/dashboard.component.ts
index 60ea0a90..f23a0429 100644
--- a/Interface/src/Components/dashboard/dashboard.component.ts
+++ b/Interface/src/Components/dashboard/dashboard.component.ts
@@ -160,9 +160,10 @@ export class DashboardComponent implements OnInit{
 
   goToAnalytics(page: FacebookPage) {
     const facebookId = page.id;
+    const pageName = page.name;
     console.log('Navigating to page-analytics with ID:', facebookId);
     this.router.navigate(['/page-analytics'], {
-      queryParams: { facebookId }
+      queryParams: { facebookId, pageName }
     });
   }
 
diff --git a/Interface/src/Components/page-analytics/page-analytics.component.css b/Interface/src/Components/page-analytics/page-analytics.component.css
index bdfd28d0..255f439d 100644
--- a/Interface/src/Components/page-analytics/page-analytics.component.css
+++ b/Interface/src/Components/page-analytics/page-analytics.component.css
@@ -37,7 +37,7 @@
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   text-align: center;
-  margin-top: 80px; /* Pushes the whole section down from the navbar */
+  margin-top: 80px;
   padding-bottom: 0;
 }
 
@@ -52,9 +52,6 @@ h2 {
   display: flex;
   gap: 20px;
   margin-bottom: 20px;
-    /*display: flex;
-    justify-content: space-between;
-    margin-bottom: 20px;*/
 }
 
 input[type="date"] {
@@ -62,32 +59,26 @@ input[type="date"] {
   padding: 10px;
   margin-top: 5px;
   border: 1px solid #ccc;
-  border-radius: 5px;
+  border-radius: 5px !important;
 
   font-size: 1rem;
   color: #666;
-    /*width: 45%;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    font-size: 1rem;*/
 }
 
 input[type="date"]::-webkit-calendar-picker-indicator {
   opacity: 1;
   filter: invert(46%) sepia(42%) saturate(748%) hue-rotate(135deg) brightness(95%) contrast(95%);
   cursor: pointer;
-
 }
 
 input:focus, textarea:focus, select:focus {
-    border-color: #20c0bd; /* your custom border color */
-    outline: none; /* remove extra outline if any */
+  border-color: #20c0bd;
+  outline: none;
 }
 
 .input-group{
-    flex: 1; /* Each date input will take 50% */
-    display: flex;
+  flex: 1; /* Each date input will take 50% */
+  display: flex;
 }
 
 .input-group label{
@@ -132,7 +123,6 @@ input:focus, textarea:focus, select:focus {
 
 .report{
   margin-top: 30px;
-  padding: 20px;
   background: #f7f8fc;
   border-radius: 10px;
 }
@@ -142,22 +132,42 @@ input:focus, textarea:focus, select:focus {
   margin-bottom: 20px;
 }
 
+.report .date-style{
+  color: #4a4c6c;
+  /*font-style: italic;*/
+  font-size: smaller;
+}
+
+.custom-list {
+  list-style: none;
+  border-left: 4px solid #20c0bd;
+  background-color: #f9fefe;
+  padding: 10px 15px;
+  margin-top: 15px;
+  color: #0a2640;
+  font-size: 16px;
+}
+
+.custom-list::before {
+  content: '\2022';
+  color: #20c0bd;
+  font-size: 20px;
+  position: absolute;
+  left: 15px;
+  top: 0;
+}
+
 .goals-section, .images-section {
   margin-top: 30px;
-  text-align: left; /* left-align content inside sections */
+  text-align: left;
 }
 
 .goals-section h4, .images-section h4 {
-  color: #20c0bd;
+  color: #4a4c6c;
   margin-bottom: 15px;
+  font-weight: bold;
 }
 
-  /*h4 {
-    font-size: 1.5rem;
-    margin-bottom: 15px;
-    color: #333;
-  }*/
-
 ul {
   list-style-type: disc;
   padding-left: 20px;
@@ -183,24 +193,18 @@ li {
 }
 
 .image-wrapper {
-    /*max-width: 300px;*/
-
-  width: 100%; /* Full width of container */
-  max-width: 500px; /* Set a bigger max width */
+  width: 100%;
+  max-width: 500px;
   height: auto;
   border: 1px solid #ccc;
   border-radius: 10px;
   overflow: hidden;
   background: #f9f9f9;
   padding: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .analytics-image {
-    /*width: 100%;
-    height: auto;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);*/
-
   width: 100%;
   height: auto;
   object-fit: contain;
@@ -265,40 +269,78 @@ SECTION 2
 
 table {
   width: 100%;
-  margin: 30px auto;
   border-collapse: collapse;
-  border-radius: 10px;
+  font-size: 14px;
+  margin-bottom: 20px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  border-radius: 6px;
   overflow: hidden;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  background-color: #ffffff;
+  background-color: #f3f9fb;
 }
 
 th {
-  background-color: #0a2640;
+  background-color: #20c0bd;
   color: white;
-  padding: 12px;
+  padding: 8px 12px;
+  /*border: 1px solid #ddd;*/
   text-align: left;
-  font-weight: bold;
+  font-weight: 600;
 }
 
 td {
-  padding: 12px;
-  color: #333;
-  border-top: 1px solid #eee;
+  padding: 10px 15px;
+  border-bottom: 1px solid #eaeaea;
+  /*border: 1px solid #ddd;*/
 }
 
 tr:nth-child(even) {
-  background-color: #f7f8fc;
+  background-color: #f9ffff;
 }
 
 tr:hover {
-  background-color: #e0f7f6;
+  background-color: #ddecec;
+}
+
+.table-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.table-container {
+  flex: 1;
+  min-width: 300px;
+}
+
+.badge {
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  display: inline-block;
+}
+
+.mini-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.mini-list li {
+  padding: 6px 0;
+  border-bottom: 1px solid #eee;
 }
 
 h5 {
-  color: #20c0bd;
+  color: #4a4c6c;
   margin: 20px 0 10px;
   font-size: 1.3rem;
+  font-weight: bold;
+}
+
+hr {
+  /*border: none;*/
+  border-top: 2px solid #e0f7f6;
+  margin: 20px 0;
+  color: #20c0bd;
 }
 
 @media (max-width: 768px) {
diff --git a/Interface/src/Components/page-analytics/page-analytics.component.html b/Interface/src/Components/page-analytics/page-analytics.component.html
index 6fbbd73f..4f18d16b 100644
--- a/Interface/src/Components/page-analytics/page-analytics.component.html
+++ b/Interface/src/Components/page-analytics/page-analytics.component.html
@@ -26,16 +26,30 @@ <h2>{{ 'ANALYTICS_PAGE_DESCRIPTION' | translate }}</h2>
     </div>
 
     <div class="report">
+      
       <div *ngIf="goals.length > 0" class="goals-section">
-        <h3>{{ 'REPORT_FROM' | translate }} {{ startDate }} {{ 'TO' | translate }} {{ endDate }}</h3>
-        <h4>{{ 'GOALS' | translate }}:</h4>
+
+        <!--Report Header-->
+        <h3 style="text-align: center; font-weight: bold; margin-top: 50px;">{{pageName}} {{'IMPACT_REPORT' | translate}}</h3>
+        <h3 style="text-align: center; font-weight: bold;">
+          {{ 'REPORT_FROM' | translate }} 
+          <span class="date-style">{{ startDate }}</span>
+          {{ 'TO' | translate }} 
+          <span class="date-style">{{ endDate }}</span>  
+        </h3>
+
+        <!--Goals section-->
+        <h4><img src="assets/icons/dot-arrow.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px;">{{ 'GOALS' | translate }}:</h4>
         <ul>
-          <li *ngFor="let goal of goals">{{ goal }}</li>
+          <li *ngFor="let goal of goals" class="custom-list">{{ goal }}</li>
         </ul>
       </div>
 
+      <hr>
+
+      <!--Images Section-->
       <div *ngIf="chartImages.length > 0" class="images-section">
-        <h4>{{ 'ANALYTICS_IMAGES' | translate }}:</h4>
+        <h4><img src="assets/icons/dot-arrow.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px;">{{ 'ANALYTICS_IMAGES' | translate }}:</h4>
         <div class="images-container">
           <div *ngFor="let img of chartImages" class="image-wrapper">
             <img [src]="img" alt="Analytics Chart" class="analytics-image" />
@@ -43,54 +57,66 @@ <h4>{{ 'ANALYTICS_IMAGES' | translate }}:</h4>
         </div>
       </div>
 
+      <hr>
+
+      <!--Tables-->
+
       <div *ngIf="metrics" class="goals-section">
-        <h4>{{ 'METRICS' | translate }}:</h4>
+        <h4><img src="assets/icons/dot-arrow.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px;">{{ 'METRICS' | translate }}:</h4>
 
         <!-- Sentiment Counts -->
-        <h5>{{ 'SENTIMENT_COUNTS' | translate }}</h5>
+        <h5><img src="assets/icons/try.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px; margin-left: 10px;">{{ 'SENTIMENT_COUNTS' | translate }}</h5>
         <table>
           <tr>
-            <th>{{ 'SENTIMENT' | translate }}</th>
-            <th>{{ 'COUNT' | translate }}</th>
-          </tr>
-          <tr *ngFor="let sentiment of getMetricKeys('sentiment_counts')">
-            <td>{{ sentiment.charAt(0).toUpperCase() + sentiment.slice(1) }}</td>
-            <td>{{ metrics.sentiment_counts[sentiment] }}</td>
+            <th>{{ 'NEGATIVE' | translate }}</th>
+            <th>{{ 'POSITIVE' | translate }}</th>
+            <th>{{ 'NEUTRAL' | translate }}</th>
           </tr>
-        </table>
-
-        <!-- Topic Counts -->
-        <h5>{{ 'TOPIC_COUNTS' | translate }}</h5>
-        <table>
           <tr>
-            <th>{{ 'TOPIC' | translate }}</th>
-            <th>{{ 'COUNT' | translate }}</th>
-          </tr>
-          <tr *ngFor="let topic of getMetricKeys('topic_counts')">
-            <ng-container *ngIf="topic !== 'NONE'">
-              <td>{{ formatValue(topic) }}</td>
-              <td>{{ metrics.topic_counts[topic] }}</td>
-            </ng-container>
+            <td>{{ metrics.sentiment_counts.negative }}</td>
+            <td>{{ metrics.sentiment_counts.positive }}</td>
+            <td>{{ metrics.sentiment_counts.neutral }}</td>
           </tr>
         </table>
 
-        <!-- Top 5 Topics -->
-        <h5>{{ 'TOP_5_TOPICS' | translate }}</h5>
-        <table>
-          <tr>
-            <th>{{ 'TOPIC' | translate }}</th>
-            <th>{{ 'COUNT' | translate }}</th>
-          </tr>
-          <tr *ngFor="let topic of getMetricKeys('top_5_topics')">
-            <ng-container *ngIf="topic !== 'NONE'">
-              <td>{{ formatValue(topic) }}</td>
-              <td>{{ metrics.top_5_topics[topic] }}</td>
-            </ng-container>
-          </tr>
-        </table>
+        <!-- Grid Layout for Topics -->
+        <div class="table-grid">
+          <div class="table-container">
+            <!-- Topic Counts -->
+            <h5><img src="assets/icons/try.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px; margin-left: 10px;">{{ 'TOPIC_COUNTS' | translate }}</h5>
+            <table>
+              <tr>
+                <th>{{ 'TOPIC' | translate }}</th>
+                <th>{{ 'COUNT' | translate }}</th>
+              </tr>
+              <tr *ngFor="let topic of getMetricKeys('topic_counts')">
+                <ng-container *ngIf="topic !== 'NONE'">
+                  <td>{{ formatValue(topic) }}</td>
+                  <td>{{ metrics.topic_counts[topic] }}</td>
+                </ng-container>
+              </tr>
+            </table>
+          </div>
+          <div class="table-container">
+            <!-- Top 5 Topics -->
+            <h5><img src="assets/icons/try.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px; margin-left: 10px;">{{ 'TOP_5_TOPICS' | translate }}</h5>
+            <table>
+              <tr>
+                <th>{{ 'TOPIC' | translate }}</th>
+                <th>{{ 'COUNT' | translate }}</th>
+              </tr>
+              <tr *ngFor="let topic of getMetricKeys('top_5_topics')">
+                <ng-container *ngIf="topic !== 'NONE'">
+                  <td>{{ formatValue(topic) }}</td>
+                  <td>{{ metrics.top_5_topics[topic] }}</td>
+                </ng-container>
+              </tr>
+            </table>
+          </div>
+        </div>
 
         <!-- Most Frequent Sentiment Per Topic -->
-        <h5>{{ 'MOST_FREQ_SENTIMENT_PER_TOPIC' | translate }}</h5>
+        <h5><img src="assets/icons/try.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px; margin-left: 10px;">{{ 'MOST_FREQ_SENTIMENT_PER_TOPIC' | translate }}</h5>
         <table>
           <tr>
             <th>{{ 'TOPIC' | translate }}</th>
@@ -100,12 +126,12 @@ <h5>{{ 'MOST_FREQ_SENTIMENT_PER_TOPIC' | translate }}</h5>
             <ng-container *ngIf="topic !== 'NONE'">
               <td>{{ formatValue(topic) }}</td>
               <td>{{ metrics.most_freq_sentiment_per_topic[topic].charAt(0).toUpperCase() + metrics.most_freq_sentiment_per_topic[topic].slice(1)}}</td>
+              <!--<td>{{ metrics.most_freq_sentiment_per_topic[topic] | titlecase }}</td>-->
             </ng-container>
           </tr>
         </table>
 
-        <!-- Most Frequent Topic Per Sentiment -->
-        <h5>{{ 'MOST_FREQ_TOPIC_PER_SENTIMENT' | translate }}</h5>
+        <h5 style="margin-top: 40px;"><img src="assets/icons/try.png" alt="icon" style="width: 24px; height: 24px; margin-right: 10px; margin-left: 10px;">{{ 'MOST_FREQ_TOPIC_PER_SENTIMENT' | translate }}</h5>
         <table>
           <tr>
             <th>{{ 'SENTIMENT' | translate }}</th>
@@ -113,7 +139,7 @@ <h5>{{ 'MOST_FREQ_TOPIC_PER_SENTIMENT' | translate }}</h5>
           </tr>
           <ng-container *ngFor="let sentiment of getMetricKeys('most_freq_topic_per_sentiment')">
             <tr *ngIf="metrics.most_freq_topic_per_sentiment[sentiment] !== 'NONE'">
-              <td>{{ sentiment.charAt(0).toUpperCase() + sentiment.slice(1) }}</td>
+              <td>{{ sentiment | titlecase }}</td>
               <td>{{ formatValue(metrics.most_freq_topic_per_sentiment[sentiment]) }}</td>
             </tr>
           </ng-container>
diff --git a/Interface/src/Components/page-analytics/page-analytics.component.ts b/Interface/src/Components/page-analytics/page-analytics.component.ts
index 70c742b1..69d5ecaf 100644
--- a/Interface/src/Components/page-analytics/page-analytics.component.ts
+++ b/Interface/src/Components/page-analytics/page-analytics.component.ts
@@ -28,6 +28,7 @@ export class PageAnalyticsComponent implements OnInit {
   endDate = '';
   chartImages: SafeUrl[] = [];
   goals: string[] = [];
+  pageName = '';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   metrics: any;
   constructor(private route: ActivatedRoute,
@@ -38,6 +39,7 @@ export class PageAnalyticsComponent implements OnInit {
   ngOnInit(): void {
     this.route.queryParams.subscribe(params => {
       this.facebookId = params['facebookId'];
+      this.pageName = params['pageName'];
     });
   }
 
diff --git a/Interface/src/assets/i18n/ar.json b/Interface/src/assets/i18n/ar.json
index 2341d7d1..5e53bbaa 100644
--- a/Interface/src/assets/i18n/ar.json
+++ b/Interface/src/assets/i18n/ar.json
@@ -113,7 +113,7 @@
   "END_DATE": "تاريخ الانتهاء",
   "SEE_INSIGHTS": "عرض التحليلات",
   "SELECT_DATES_WARNING": "يرجى تحديد كل من تاريخ البدء والانتهاء للمتابعة.",
-  "REPORT_FROM": "تقرير من",
+  "REPORT_FROM": "من",
   "TO": "إلى",
   "GOALS": "الأهداف",
   "ANALYTICS_IMAGES": "صور التحليلات",
@@ -135,5 +135,9 @@
   "WELCOME_BACK": "مرحبًا بعودتك!",
   "LOGIN_FAILED": "فشل تسجيل الدخول",
   "INVALID_CREDENTIALS": "بيانات الاعتماد غير صحيحة",
-  "OK": "حسنًا"
+  "OK": "حسنًا",
+  "IMPACT_REPORT": "تقرير تأثير",
+  "NEGATIVE": "سلبي",
+  "POSITIVE": "إيجابي",
+  "NEUTRAL": "محايد"
 }
diff --git a/Interface/src/assets/i18n/en.json b/Interface/src/assets/i18n/en.json
index b7406553..e01bc9df 100644
--- a/Interface/src/assets/i18n/en.json
+++ b/Interface/src/assets/i18n/en.json
@@ -113,8 +113,8 @@
   "END_DATE": "End Date",
   "SEE_INSIGHTS": "See Insights",
   "SELECT_DATES_WARNING": "Please select both start and end dates to proceed.",
-  "REPORT_FROM": "Report from",
-  "TO": "to",
+  "REPORT_FROM": "From",
+  "TO": "To",
   "GOALS": "Goals",
   "ANALYTICS_IMAGES": "Analytics Images",
   "METRICS": "Metrics",
@@ -135,5 +135,9 @@
   "WELCOME_BACK": "Welcome back!",
   "LOGIN_FAILED": "Login Failed",
   "INVALID_CREDENTIALS": "Invalid credentials",
-  "OK": "Ok"
+  "OK": "Ok",
+  "IMPACT_REPORT": "Impact Report",
+  "NEGATIVE": "Negative",
+  "POSITIVE": "Positive",
+  "NEUTRAL": "Neutral"
 }
diff --git a/Interface/src/assets/i18n/es.json b/Interface/src/assets/i18n/es.json
index 0cda524a..11ae4953 100644
--- a/Interface/src/assets/i18n/es.json
+++ b/Interface/src/assets/i18n/es.json
@@ -113,7 +113,7 @@
   "END_DATE": "Fecha de Fin",
   "SEE_INSIGHTS": "Ver Análisis",
   "SELECT_DATES_WARNING": "Por favor, selecciona una fecha de inicio y una fecha de fin para continuar.",
-  "REPORT_FROM": "Informe del",
+  "REPORT_FROM": "del",
   "TO": "al",
   "GOALS": "Objetivos",
   "ANALYTICS_IMAGES": "Imágenes de Análisis",
@@ -135,5 +135,9 @@
   "WELCOME_BACK": "¡Bienvenido de nuevo!",
   "LOGIN_FAILED": "Error al Iniciar Sesión",
   "INVALID_CREDENTIALS": "Credenciales inválidas",
-  "OK": "Aceptar"
+  "OK": "Aceptar",
+  "IMPACT_REPORT": "INFORME DE IMPACTO",
+  "NEGATIVE": "Negativo",
+  "POSITIVE": "Positiva",
+  "NEUTRAL": "Neutro"
 }
diff --git a/Interface/src/assets/i18n/fr.json b/Interface/src/assets/i18n/fr.json
index a453a428..11670edd 100644
--- a/Interface/src/assets/i18n/fr.json
+++ b/Interface/src/assets/i18n/fr.json
@@ -113,7 +113,7 @@
   "END_DATE": "Date de Fin",
   "SEE_INSIGHTS": "Voir les Analyses",
   "SELECT_DATES_WARNING": "Veuillez sélectionner une date de début et une date de fin pour continuer.",
-  "REPORT_FROM": "Rapport du",
+  "REPORT_FROM": "du",
   "TO": "au",
   "GOALS": "Objectifs",
   "ANALYTICS_IMAGES": "Images d'Analyses",
@@ -135,5 +135,9 @@
   "WELCOME_BACK": "Content de vous revoir !",
   "LOGIN_FAILED": "Échec de la Connexion",
   "INVALID_CREDENTIALS": "Identifiants invalides",
-  "OK": "Ok"
+  "OK": "Ok",
+  "IMPACT_REPORT": "RAPPORT D'IMPACT",
+  "NEGATIVE": "Négatif",
+  "POSITIVE": "Positive",
+  "NEUTRAL": "Neutre"
 }
diff --git a/Interface/src/assets/icons/dot-arrow.png b/Interface/src/assets/icons/dot-arrow.png
new file mode 100644
index 00000000..e26935c5
Binary files /dev/null and b/Interface/src/assets/icons/dot-arrow.png differ
diff --git a/Interface/src/assets/icons/dots.png b/Interface/src/assets/icons/dots.png
new file mode 100644
index 00000000..e67bf40f
Binary files /dev/null and b/Interface/src/assets/icons/dots.png differ
diff --git a/Interface/src/assets/icons/right-arrow.png b/Interface/src/assets/icons/right-arrow.png
new file mode 100644
index 00000000..7c9aae59
Binary files /dev/null and b/Interface/src/assets/icons/right-arrow.png differ
diff --git a/Interface/src/assets/icons/try.png b/Interface/src/assets/icons/try.png
new file mode 100644
index 00000000..b3e1184a
Binary files /dev/null and b/Interface/src/assets/icons/try.png differ