diff --git a/src/app/at.pipe.spec.ts b/src/app/at.pipe.spec.ts
new file mode 100644
index 0000000..cbe76c3
--- /dev/null
+++ b/src/app/at.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { AtPipe } from './at.pipe';
+
+describe('AtPipe', () => {
+  it('create an instance', () => {
+    const pipe = new AtPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/at.pipe.ts b/src/app/at.pipe.ts
new file mode 100644
index 0000000..1655fb4
--- /dev/null
+++ b/src/app/at.pipe.ts
@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'at',
+  standalone: true
+})
+export class AtPipe implements PipeTransform {
+
+  transform(value: unknown, ...args: unknown[]): string {
+    return '@'+value;
+  }
+
+}
diff --git a/src/app/shared/views/large-user/large-user.component.html b/src/app/shared/views/large-user/large-user.component.html
index 7b881af..9e5d2bd 100644
--- a/src/app/shared/views/large-user/large-user.component.html
+++ b/src/app/shared/views/large-user/large-user.component.html
@@ -1,7 +1,7 @@
 <div class="user-container outline">
     <div [routerLink]="'/user/'+user?.username">
         <!-- <img [src]="user?.picture" class="outline"> -->
-        <span>{{user?.username}}</span>
+        <span>{{user?.username|at}}</span>
     </div>
     <!-- <span [classList]="user?.followed ? 'follow followed' : 'follow'"></span> -->
 </div>
\ No newline at end of file
diff --git a/src/app/shared/views/large-user/large-user.component.scss b/src/app/shared/views/large-user/large-user.component.scss
index 985aa3b..319e27a 100644
--- a/src/app/shared/views/large-user/large-user.component.scss
+++ b/src/app/shared/views/large-user/large-user.component.scss
@@ -21,10 +21,6 @@
             width: 100%;
             text-align: center;
         }
-
-        span::before {
-            content: '@';
-        }
     }
     
     .follow {
diff --git a/src/app/shared/views/large-user/large-user.component.ts b/src/app/shared/views/large-user/large-user.component.ts
index c2508ef..789a8eb 100644
--- a/src/app/shared/views/large-user/large-user.component.ts
+++ b/src/app/shared/views/large-user/large-user.component.ts
@@ -1,13 +1,14 @@
 import { Component, Input } from '@angular/core';
 import { User } from '../../../../model/User';
 import { RouterModule } from '@angular/router';
+import { AtPipe } from '../../../at.pipe';
 
 @Component({
     selector: 'app-large-user',
     standalone: true,
     templateUrl: './large-user.component.html',
     styleUrl: './large-user.component.scss',
-    imports: [RouterModule]
+    imports: [RouterModule,AtPipe]
 })
 export class LargeUserComponent {
   @Input() user: User | undefined;
diff --git a/src/app/shared/views/small-user/small-user.component.html b/src/app/shared/views/small-user/small-user.component.html
index 0366cda..f057740 100644
--- a/src/app/shared/views/small-user/small-user.component.html
+++ b/src/app/shared/views/small-user/small-user.component.html
@@ -1,4 +1,4 @@
 <div [routerLink]="'/user/'+user?.username">
     <!-- <img [src]="user?.picture" class="outline"> -->
-    <span>{{user?.username}}</span>
+    <span>{{user?.username|at}}</span>
 </div>
\ No newline at end of file
diff --git a/src/app/shared/views/small-user/small-user.component.scss b/src/app/shared/views/small-user/small-user.component.scss
index 1d0ad07..948e72c 100644
--- a/src/app/shared/views/small-user/small-user.component.scss
+++ b/src/app/shared/views/small-user/small-user.component.scss
@@ -15,8 +15,4 @@ span {
     margin: 20px auto;
     padding-left: 10px;
     transform: translateY(-60%);
-}
-
-span::before {
-    content: '@';
 }
\ No newline at end of file
diff --git a/src/app/shared/views/small-user/small-user.component.ts b/src/app/shared/views/small-user/small-user.component.ts
index d615aba..e299c11 100644
--- a/src/app/shared/views/small-user/small-user.component.ts
+++ b/src/app/shared/views/small-user/small-user.component.ts
@@ -1,11 +1,12 @@
 import { Component, Input } from '@angular/core';
 import { User } from '../../../../model/User';
 import { RouterModule } from '@angular/router';
+import { AtPipe } from '../../../at.pipe';
 
 @Component({
   selector: 'app-small-user',
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule,AtPipe],
   templateUrl: './small-user.component.html',
   styleUrl: './small-user.component.scss'
 })