diff --git a/src/app/core/services/api.service.ts b/src/app/core/services/api.service.ts
index 401098ef..0420af61 100644
--- a/src/app/core/services/api.service.ts
+++ b/src/app/core/services/api.service.ts
@@ -50,7 +50,7 @@ export class ApiService {
     return url;
   }
 
-  getGene(id: string): Observable<Gene> {
+  getGene(id: string): Observable<Gene | null> {
     return this.http.get<Gene>(this.getBaseUrl() + '/api/genes/' + id, {
       headers: new HttpHeaders(defaultHeaders),
     });
diff --git a/src/app/features/genes/components/gene-details/gene-details.component.ts b/src/app/features/genes/components/gene-details/gene-details.component.ts
index d4b03a22..a37476d9 100644
--- a/src/app/features/genes/components/gene-details/gene-details.component.ts
+++ b/src/app/features/genes/components/gene-details/gene-details.component.ts
@@ -135,40 +135,45 @@ export class GeneDetailsComponent implements OnInit, AfterViewInit {
       if (params.get('id')) {
         this.geneService
           .getGene(params.get('id') as string)
-          .subscribe((gene: Gene) => {
-            this.gene = gene;
-
-            this.panels.forEach((p: Panel) => {
-              if (p.name == 'nominations' && !this.gene?.total_nominations) {
-                p.disabled = true;
-              } else if (
-                p.name == 'experimental-validation' &&
-                !this.gene?.experimental_validation?.length
-              ) {
-                p.disabled = true;
-              } else {
-                p.disabled = false;
+          .subscribe((gene) => {
+            if (!gene) {
+              this.helperService.setLoading(false);
+              this.router.navigateByUrl('/404-not-found', { skipLocationChange: true });
+            } else {
+              this.gene = gene;
+
+              this.panels.forEach((p: Panel) => {
+                if (p.name == 'nominations' && !this.gene?.total_nominations) {
+                  p.disabled = true;
+                } else if (
+                  p.name == 'experimental-validation' &&
+                  !this.gene?.experimental_validation?.length
+                ) {
+                  p.disabled = true;
+                } else {
+                  p.disabled = false;
+                }
+              });
+
+              const nominationsPanel = this.panels.find(
+                (p) => p.name == 'nominations'
+              );
+              if (nominationsPanel) {
+                nominationsPanel.disabled = !this.gene.total_nominations ? true : false;
               }
-            });
 
-            const nominationsPanel = this.panels.find(
-              (p) => p.name == 'nominations'
-            );
-            if (nominationsPanel) {
-              nominationsPanel.disabled = !this.gene.total_nominations ? true : false;
-            }
+              const experimentalValidationPanel = this.panels.find(
+                (p) => p.name == 'experimental-validation'
+              );
+              if (experimentalValidationPanel) {
+                experimentalValidationPanel.disabled = !this.gene
+                  .experimental_validation?.length
+                  ? true
+                  : false;
+              }
 
-            const experimentalValidationPanel = this.panels.find(
-              (p) => p.name == 'experimental-validation'
-            );
-            if (experimentalValidationPanel) {
-              experimentalValidationPanel.disabled = !this.gene
-                .experimental_validation?.length
-                ? true
-                : false;
+              this.helperService.setLoading(false);
             }
-
-            this.helperService.setLoading(false);
           });
       }
 
diff --git a/src/app/features/genes/components/gene-similar/gene-similar.component.ts b/src/app/features/genes/components/gene-similar/gene-similar.component.ts
index 8414a5ad..a8be4ea3 100644
--- a/src/app/features/genes/components/gene-similar/gene-similar.component.ts
+++ b/src/app/features/genes/components/gene-similar/gene-similar.component.ts
@@ -69,9 +69,14 @@ export class GeneSimilarComponent implements OnInit {
         this.helperService.setLoading(true);
         this.geneService
           .getGene(params.get('id') as string)
-          .subscribe((gene: Gene) => {
-            this.gene = gene;
-            this.init();
+          .subscribe((gene: Gene | null) => {
+            if (!gene) {
+              this.helperService.setLoading(false);
+              this.router.navigateByUrl('/404-not-found', { skipLocationChange: true });
+            } else {
+              this.gene = gene;
+              this.init();
+            }
           });
       }
     });
diff --git a/src/app/features/genes/services/gene.service.ts b/src/app/features/genes/services/gene.service.ts
index 01889bff..d6ffc12e 100644
--- a/src/app/features/genes/services/gene.service.ts
+++ b/src/app/features/genes/services/gene.service.ts
@@ -27,13 +27,15 @@ export class GeneService {
 
   // ------------------------------------------------------------------------ //
 
-  getGene(id: string): Observable<Gene> {
+  getGene(id: string): Observable<Gene | null> {
     if (this.genes[id]) {
       return of(this.genes[id]);
     }
-
+    
     return this.apiService.getGene(id).pipe(
-      map((gene: Gene) => {
+      map((gene: Gene | null) => {
+        if (!gene)
+          return null;
         gene.similar_genes_network = this.getSimilarGenesNetwork(gene);
         return (this.genes[id] = gene);
       })
diff --git a/src/app/testing/api-service-stub.ts b/src/app/testing/api-service-stub.ts
index cc94237d..a7491cb5 100644
--- a/src/app/testing/api-service-stub.ts
+++ b/src/app/testing/api-service-stub.ts
@@ -20,7 +20,7 @@ import {
 
 @Injectable()
 export class ApiServiceStub {
-  getGene(id: string): Observable<Gene> {
+  getGene(id: string): Observable<Gene | null> {
     return of(geneMock1);
   }
 
diff --git a/src/app/testing/gene-service-stub.ts b/src/app/testing/gene-service-stub.ts
index c70dbf18..295b37bd 100644
--- a/src/app/testing/gene-service-stub.ts
+++ b/src/app/testing/gene-service-stub.ts
@@ -30,7 +30,7 @@ export class GeneServiceStub {
     this.geneService = new GeneService(new ApiServiceStub() as ApiService);
   }
 
-  getGene(id: string): Observable<Gene> {
+  getGene(id: string): Observable<Gene | null> {
     return this.geneService.getGene(id);
   }
 
diff --git a/tests/gene-details.spec.ts b/tests/gene-details.spec.ts
new file mode 100644
index 00000000..31883aac
--- /dev/null
+++ b/tests/gene-details.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('specific viewport block', () => {
+  test.slow();
+  test.use({ viewport: { width: 1600, height: 1200 } });
+
+  test('invalid gene results in a 404 redirect', async ({ page }) => {
+    // go to invalid ENSG page
+    await page.goto('/genes/ENSG00000000000');
+
+    // expect a title "to contain" a substring.
+    await expect(page).toHaveTitle('Agora');
+
+    // expect div for page not found content to be visible
+    expect(page.locator('.page-not-found')).toBeVisible();
+  });
+});
\ No newline at end of file
diff --git a/tests/gene-similar.spec.ts b/tests/gene-similar.spec.ts
new file mode 100644
index 00000000..29341bb4
--- /dev/null
+++ b/tests/gene-similar.spec.ts
@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('specific viewport block', () => {
+  test.slow();
+  test.use({ viewport: { width: 1600, height: 1200 } });
+
+  test('invalid gene results in a 404 redirect', async ({ page }) => {
+    // go to invalid ENSG page
+    await page.goto('/genes/ENSG00000000000/similar');
+
+    // expect a title "to contain" a substring.
+    await expect(page).toHaveTitle('Agora');
+
+    // expect div for page not found content to be visible
+    expect(page.locator('.page-not-found')).toBeVisible();
+  });
+});
\ No newline at end of file