diff --git a/angular-apollo-tailwind/projects/shared/src/lib/pipes/generate-url-with-protocol/generate-url-with-protocol.pipe.spec.ts b/angular-apollo-tailwind/projects/shared/src/lib/pipes/generate-url-with-protocol/generate-url-with-protocol.pipe.spec.ts
new file mode 100644
index 000000000..69f477571
--- /dev/null
+++ b/angular-apollo-tailwind/projects/shared/src/lib/pipes/generate-url-with-protocol/generate-url-with-protocol.pipe.spec.ts
@@ -0,0 +1,23 @@
+import { GenerateUrlWithProtocolPipe } from './generate-url-with-protocol.pipe';
+
+describe('GenerateUrlWithProtocolPipe', () => {
+  it('create an instance', () => {
+    const pipe = new GenerateUrlWithProtocolPipe();
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should append https to url with no protocol', () => {
+    const pipe = new GenerateUrlWithProtocolPipe();
+    expect(pipe.transform('test.com')).toBe('https://test.com');
+  });
+
+  it('should return url untouched if it has protocol appended', () => {
+    const pipe = new GenerateUrlWithProtocolPipe();
+    expect(pipe.transform('https://test.com')).toBe('https://test.com');
+  });
+
+  it('should not attempt to change url with http to https', () => {
+    const pipe = new GenerateUrlWithProtocolPipe();
+    expect(pipe.transform('http://test.com')).toBe('http://test.com');
+  });
+});
diff --git a/angular-apollo-tailwind/projects/shared/src/lib/pipes/generate-url-with-protocol/generate-url-with-protocol.pipe.ts b/angular-apollo-tailwind/projects/shared/src/lib/pipes/generate-url-with-protocol/generate-url-with-protocol.pipe.ts
new file mode 100644
index 000000000..59d64a10b
--- /dev/null
+++ b/angular-apollo-tailwind/projects/shared/src/lib/pipes/generate-url-with-protocol/generate-url-with-protocol.pipe.ts
@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'generateUrlWithProtocol',
+})
+export class GenerateUrlWithProtocolPipe implements PipeTransform {
+  transform(value: string): string {
+    return ['http://', 'https://'].some((protocol) =>
+      value.startsWith(protocol),
+    )
+      ? value
+      : `https://${value}`;
+  }
+}
diff --git a/angular-apollo-tailwind/projects/shared/src/lib/pipes/index.ts b/angular-apollo-tailwind/projects/shared/src/lib/pipes/index.ts
index f4b8fae78..05ca12cf1 100644
--- a/angular-apollo-tailwind/projects/shared/src/lib/pipes/index.ts
+++ b/angular-apollo-tailwind/projects/shared/src/lib/pipes/index.ts
@@ -1,4 +1,5 @@
 export * from './dfns/format-distance.pipe';
 export * from './number/round-up.pipe';
 export * from './markdown/markdown.pipe';
+export * from './generate-url-with-protocol/generate-url-with-protocol.pipe';
 export * from './pipes.module';
diff --git a/angular-apollo-tailwind/projects/shared/src/lib/pipes/pipes.module.ts b/angular-apollo-tailwind/projects/shared/src/lib/pipes/pipes.module.ts
index 4c147f37a..5d33273fb 100644
--- a/angular-apollo-tailwind/projects/shared/src/lib/pipes/pipes.module.ts
+++ b/angular-apollo-tailwind/projects/shared/src/lib/pipes/pipes.module.ts
@@ -2,9 +2,20 @@ import { NgModule } from '@angular/core';
 import { RoundUpPipe } from './number/round-up.pipe';
 import { FormatDistancePipe } from './dfns/format-distance.pipe';
 import { MarkdownPipe } from './markdown/markdown.pipe';
+import { GenerateUrlWithProtocolPipe } from './generate-url-with-protocol/generate-url-with-protocol.pipe';
 
 @NgModule({
-  declarations: [FormatDistancePipe, RoundUpPipe, MarkdownPipe],
-  exports: [FormatDistancePipe, RoundUpPipe, MarkdownPipe],
+  declarations: [
+    FormatDistancePipe,
+    RoundUpPipe,
+    MarkdownPipe,
+    GenerateUrlWithProtocolPipe,
+  ],
+  exports: [
+    FormatDistancePipe,
+    RoundUpPipe,
+    MarkdownPipe,
+    GenerateUrlWithProtocolPipe,
+  ],
 })
 export class PipesModule {}
diff --git a/angular-apollo-tailwind/src/app/profile/profile-about/profile-about.component.html b/angular-apollo-tailwind/src/app/profile/profile-about/profile-about.component.html
index 41816dd26..3227dbf14 100644
--- a/angular-apollo-tailwind/src/app/profile/profile-about/profile-about.component.html
+++ b/angular-apollo-tailwind/src/app/profile/profile-about/profile-about.component.html
@@ -74,7 +74,7 @@ <h1 class="mt-2">
           ></hero-icon>
           <a
             class="link"
-            [href]="user.websiteUrl"
+            [href]="user.websiteUrl | generateUrlWithProtocol"
             target="_blank"
             rel="noreferrer"
           >
@@ -88,7 +88,7 @@ <h1 class="mt-2">
           ></sd-twitter-icon>
           <a
             class="link"
-            [href]="'https:/twitter.com/' + user.twitterUsername"
+            [href]="'https://twitter.com/' + user.twitterUsername"
             target="_blank"
             rel="noreferrer"
           >
diff --git a/angular-apollo-tailwind/src/app/profile/profile.module.ts b/angular-apollo-tailwind/src/app/profile/profile.module.ts
index 5d2b307b7..910b8b291 100644
--- a/angular-apollo-tailwind/src/app/profile/profile.module.ts
+++ b/angular-apollo-tailwind/src/app/profile/profile.module.ts
@@ -22,6 +22,7 @@ import {
   ProfileRepoListItemComponent,
   ProfileRepoListItemSkeletonComponent,
 } from './components';
+import { PipesModule } from '@shared';
 
 @NgModule({
   declarations: [
@@ -50,6 +51,7 @@ import {
     ReactiveFormsModule,
     ReposFilterDropdownModule,
     PaginationModule,
+    PipesModule,
   ],
 })
 export class ProfileModule {}