diff --git a/angular-primeng-app/src/app/components/posts/posts.component.html b/angular-primeng-app/src/app/components/posts/posts.component.html
index cb80b9d..012e601 100644
--- a/angular-primeng-app/src/app/components/posts/posts.component.html
+++ b/angular-primeng-app/src/app/components/posts/posts.component.html
@@ -2,7 +2,7 @@
   <div class="cards-wrapper grid">
     @for (post of posts; track post) {
       <a [routerLink]="['post', post.slug]">
-        <p-card class="post-card" header="{{ post.title }}">
+        <p-card class="post-card" header="{{ post.title.length > 70 ? (post.title | slice:0:70) + '...' : (post.title) }}">
           <ng-template pTemplate="header">
             <img class="card-image" [src]="post.coverImage.url" [alt]="post.title + ' image'"/>
           </ng-template>
diff --git a/angular-primeng-app/src/app/components/posts/posts.component.ts b/angular-primeng-app/src/app/components/posts/posts.component.ts
index 097aeb2..05b1026 100644
--- a/angular-primeng-app/src/app/components/posts/posts.component.ts
+++ b/angular-primeng-app/src/app/components/posts/posts.component.ts
@@ -1,7 +1,7 @@
 import { Component, inject, OnInit } from '@angular/core';
 import { BlogService } from '../../services/blog.service';
 import { RouterLink } from '@angular/router';
-import { AsyncPipe } from '@angular/common';
+import { AsyncPipe, CommonModule } from '@angular/common';
 import { CardModule } from 'primeng/card';
 import { PageInfo, Post } from '../../models/post';
 import { InfiniteScrollDirective } from "../../directives/infinite-scroll.directive";
@@ -10,7 +10,7 @@ import { ButtonModule } from "primeng/button";
 @Component({
   selector: 'app-posts',
   standalone: true,
-  imports: [AsyncPipe, RouterLink, CardModule, InfiniteScrollDirective, ButtonModule],
+  imports: [AsyncPipe, RouterLink, CardModule, InfiniteScrollDirective, ButtonModule,CommonModule],
   templateUrl: './posts.component.html',
   styleUrl: './posts.component.scss'
 })
diff --git a/angular-primeng-app/src/app/components/series/series.component.html b/angular-primeng-app/src/app/components/series/series.component.html
index 3607db7..ba1900c 100644
--- a/angular-primeng-app/src/app/components/series/series.component.html
+++ b/angular-primeng-app/src/app/components/series/series.component.html
@@ -3,7 +3,7 @@
   <div class="cards-wrapper grid">
     @for (post of postsInSeries; track post) {
       <a [routerLink]="['/post', post.slug]">
-        <p-card class="post-card" header="{{ post.title }}">
+        <p-card class="post-card" header="{{ post.title.length > 70 ? (post.title | slice:0:70) + '...' : (post.title) }}">
           <ng-template pTemplate="header">
             <img class="card-image" [src]="post.coverImage.url" [alt]="post.title + ' image'" />
           </ng-template>
diff --git a/angular-primeng-app/src/app/components/series/series.component.ts b/angular-primeng-app/src/app/components/series/series.component.ts
index 137a460..58384bf 100644
--- a/angular-primeng-app/src/app/components/series/series.component.ts
+++ b/angular-primeng-app/src/app/components/series/series.component.ts
@@ -1,7 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { PageInfo, Post } from '../../models/post';
-import { AsyncPipe } from "@angular/common";
+import { AsyncPipe, CommonModule } from "@angular/common";
 import { BlogService } from '../../services/blog.service';
 import { CardModule } from 'primeng/card';
 import { InfiniteScrollDirective } from "../../directives/infinite-scroll.directive";
@@ -10,7 +10,7 @@ import { ButtonModule } from "primeng/button";
 @Component({
   selector: 'app-series',
   standalone: true,
-  imports: [RouterLink, AsyncPipe, CardModule, InfiniteScrollDirective, ButtonModule],
+  imports: [RouterLink, AsyncPipe, CardModule, InfiniteScrollDirective, ButtonModule,CommonModule],
   templateUrl: './series.component.html',
   styleUrl: './series.component.scss'
 })