diff --git a/angular.json b/angular.json
index 64862315..d656f578 100644
--- a/angular.json
+++ b/angular.json
@@ -141,7 +141,7 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "cp",
-      "style": "css"
+      "style": "scss"
     },
     "@schematics/angular:directive": {
       "prefix": "cp"
diff --git a/src/app/app.component.css b/src/app/app.component.scss
similarity index 100%
rename from src/app/app.component.css
rename to src/app/app.component.scss
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 60fab9a7..34656f85 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -11,7 +11,7 @@ const environmentName: string = environment.evn;
 @Component({
   selector: 'cp-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit, AfterViewInit {
   private _version: string;
diff --git a/src/app/basket/basket.component.css b/src/app/basket/basket.component.scss
similarity index 100%
rename from src/app/basket/basket.component.css
rename to src/app/basket/basket.component.scss
diff --git a/src/app/basket/basket.component.ts b/src/app/basket/basket.component.ts
index dbcf3fe7..bf1a9ad0 100644
--- a/src/app/basket/basket.component.ts
+++ b/src/app/basket/basket.component.ts
@@ -17,7 +17,7 @@ import {
 @Component({
   selector: 'cp-basket',
   templateUrl: './basket.component.html',
-  styleUrls: ['./basket.component.css']
+  styleUrls: ['./basket.component.scss']
 })
 export class BasketComponent implements OnInit, AfterViewInit {
   private _complexBasket: { [name: string]: BasketItem };
diff --git a/src/app/complex/complex-details/complex-details.component.css b/src/app/complex/complex-details/complex-details.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-details.component.css
rename to src/app/complex/complex-details/complex-details.component.scss
diff --git a/src/app/complex/complex-details/complex-details.component.ts b/src/app/complex/complex-details/complex-details.component.ts
index cf273570..dea78c87 100644
--- a/src/app/complex/complex-details/complex-details.component.ts
+++ b/src/app/complex/complex-details/complex-details.component.ts
@@ -15,7 +15,7 @@ declare const expressionAtlasHeatmapHighcharts: any;
 @Component({
   selector: 'cp-complex-details',
   templateUrl: './complex-details.component.html',
-  styleUrls: ['./complex-details.component.css']
+  styleUrls: ['./complex-details.component.scss']
 })
 export class ComplexDetailsComponent implements OnInit, AfterViewInit, OnDestroy {
 
diff --git a/src/app/complex/complex-details/complex-disease/chembl-crossreference/chembl-crossreference.component.css b/src/app/complex/complex-details/complex-disease/chembl-crossreference/chembl-crossreference.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-disease/chembl-crossreference/chembl-crossreference.component.css
rename to src/app/complex/complex-details/complex-disease/chembl-crossreference/chembl-crossreference.component.scss
diff --git a/src/app/complex/complex-details/complex-disease/chembl-crossreference/chembl-crossreference.component.ts b/src/app/complex/complex-details/complex-disease/chembl-crossreference/chembl-crossreference.component.ts
index c4e4f344..7f54fb16 100644
--- a/src/app/complex/complex-details/complex-disease/chembl-crossreference/chembl-crossreference.component.ts
+++ b/src/app/complex/complex-details/complex-disease/chembl-crossreference/chembl-crossreference.component.ts
@@ -4,7 +4,7 @@ import {CrossReference} from '../../../shared/model/complex-details/cross-refere
 @Component({
   selector: 'cp-chembl-crossreference',
   templateUrl: './chembl-crossreference.component.html',
-  styleUrls: ['./chembl-crossreference.component.css']
+  styleUrls: ['./chembl-crossreference.component.scss']
 })
 export class ChemblCrossreferenceComponent implements OnInit {
   private _crossReferences: CrossReference[];
diff --git a/src/app/complex/complex-details/complex-disease/complex-disease.component.css b/src/app/complex/complex-details/complex-disease/complex-disease.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-disease/complex-disease.component.css
rename to src/app/complex/complex-details/complex-disease/complex-disease.component.scss
diff --git a/src/app/complex/complex-details/complex-disease/complex-disease.component.ts b/src/app/complex/complex-details/complex-disease/complex-disease.component.ts
index 61e47eea..1ba5ffc9 100644
--- a/src/app/complex/complex-details/complex-disease/complex-disease.component.ts
+++ b/src/app/complex/complex-details/complex-disease/complex-disease.component.ts
@@ -5,7 +5,7 @@ import {CrossReference} from '../../shared/model/complex-details/cross-reference
 @Component({
   selector: 'cp-complex-disease',
   templateUrl: './complex-disease.component.html',
-  styleUrls: ['./complex-disease.component.css']
+  styleUrls: ['./complex-disease.component.scss']
 })
 
 export class ComplexDiseaseComponent implements OnInit {
diff --git a/src/app/complex/complex-details/complex-disease/efo-crossreferences/efo-crossreferences.component.css b/src/app/complex/complex-details/complex-disease/efo-crossreferences/efo-crossreferences.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-disease/efo-crossreferences/efo-crossreferences.component.css
rename to src/app/complex/complex-details/complex-disease/efo-crossreferences/efo-crossreferences.component.scss
diff --git a/src/app/complex/complex-details/complex-disease/efo-crossreferences/efo-crossreferences.component.ts b/src/app/complex/complex-details/complex-disease/efo-crossreferences/efo-crossreferences.component.ts
index 3e324f96..b5c2fc95 100644
--- a/src/app/complex/complex-details/complex-disease/efo-crossreferences/efo-crossreferences.component.ts
+++ b/src/app/complex/complex-details/complex-disease/efo-crossreferences/efo-crossreferences.component.ts
@@ -8,7 +8,7 @@ import {Category} from '../../../../shared/google-analytics/types/category.enum'
 @Component({
   selector: 'cp-efo-crossreferences',
   templateUrl: './efo-crossreferences.component.html',
-  styleUrls: ['./efo-crossreferences.component.css']
+  styleUrls: ['./efo-crossreferences.component.scss']
 })
 export class EfoCrossreferencesComponent implements OnInit {
   private _crossReferences: CrossReference[];
diff --git a/src/app/complex/complex-details/complex-evidence/complex-evidence.component.css b/src/app/complex/complex-details/complex-evidence/complex-evidence.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-evidence/complex-evidence.component.css
rename to src/app/complex/complex-details/complex-evidence/complex-evidence.component.scss
diff --git a/src/app/complex/complex-details/complex-evidence/complex-evidence.component.ts b/src/app/complex/complex-details/complex-evidence/complex-evidence.component.ts
index efde51df..9dbed118 100644
--- a/src/app/complex/complex-details/complex-evidence/complex-evidence.component.ts
+++ b/src/app/complex/complex-details/complex-evidence/complex-evidence.component.ts
@@ -6,7 +6,7 @@ import {humapUrl} from '../../complex-portal-utils';
 @Component({
   selector: 'cp-complex-evidence',
   templateUrl: './complex-evidence.component.html',
-  styleUrls: ['./complex-evidence.component.css']
+  styleUrls: ['./complex-evidence.component.scss']
 })
 export class ComplexEvidenceComponent implements OnInit {
 
diff --git a/src/app/complex/complex-details/complex-expression/complex-expression.component.css b/src/app/complex/complex-details/complex-expression/complex-expression.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-expression/complex-expression.component.css
rename to src/app/complex/complex-details/complex-expression/complex-expression.component.scss
diff --git a/src/app/complex/complex-details/complex-expression/complex-expression.component.ts b/src/app/complex/complex-details/complex-expression/complex-expression.component.ts
index dd6d19b5..f89be61e 100644
--- a/src/app/complex/complex-details/complex-expression/complex-expression.component.ts
+++ b/src/app/complex/complex-details/complex-expression/complex-expression.component.ts
@@ -6,7 +6,7 @@ import {MIJson} from 'complexviewer';
 @Component({
   selector: 'cp-complex-expression',
   templateUrl: './complex-expression.component.html',
-  styleUrls: ['./complex-expression.component.css']
+  styleUrls: ['./complex-expression.component.scss']
 })
 export class ComplexExpressionComponent implements OnInit {
   private _gxa = null;
diff --git a/src/app/complex/complex-details/complex-expression/go-celluar-crossreference/go-celluar-crossreference.component.css b/src/app/complex/complex-details/complex-expression/go-celluar-crossreference/go-celluar-crossreference.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-expression/go-celluar-crossreference/go-celluar-crossreference.component.css
rename to src/app/complex/complex-details/complex-expression/go-celluar-crossreference/go-celluar-crossreference.component.scss
diff --git a/src/app/complex/complex-details/complex-expression/go-celluar-crossreference/go-celluar-crossreference.component.ts b/src/app/complex/complex-details/complex-expression/go-celluar-crossreference/go-celluar-crossreference.component.ts
index cb2c3a77..ec4de3b7 100644
--- a/src/app/complex/complex-details/complex-expression/go-celluar-crossreference/go-celluar-crossreference.component.ts
+++ b/src/app/complex/complex-details/complex-expression/go-celluar-crossreference/go-celluar-crossreference.component.ts
@@ -4,7 +4,7 @@ import {CrossReference} from '../../../shared/model/complex-details/cross-refere
 @Component({
   selector: 'cp-go-celluar-crossreference',
   templateUrl: './go-celluar-crossreference.component.html',
-  styleUrls: ['./go-celluar-crossreference.component.css']
+  styleUrls: ['./go-celluar-crossreference.component.scss']
 })
 export class GoCelluarCrossreferenceComponent implements OnInit {
   private _crossReferences: CrossReference[];
diff --git a/src/app/complex/complex-details/complex-footer/complex-footer.component.css b/src/app/complex/complex-details/complex-footer/complex-footer.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-footer/complex-footer.component.css
rename to src/app/complex/complex-details/complex-footer/complex-footer.component.scss
diff --git a/src/app/complex/complex-details/complex-footer/complex-footer.component.ts b/src/app/complex/complex-details/complex-footer/complex-footer.component.ts
index 47f15ef0..d32a774e 100644
--- a/src/app/complex/complex-details/complex-footer/complex-footer.component.ts
+++ b/src/app/complex/complex-details/complex-footer/complex-footer.component.ts
@@ -3,7 +3,7 @@ import {Component, OnInit, input } from '@angular/core';
 @Component({
   selector: 'cp-complex-footer',
   templateUrl: './complex-footer.component.html',
-  styleUrls: ['./complex-footer.component.css']
+  styleUrls: ['./complex-footer.component.scss']
 })
 export class ComplexFooterComponent implements OnInit {
   institute = input<string>();
diff --git a/src/app/complex/complex-details/complex-function/agonists/agonists.component.css b/src/app/complex/complex-details/complex-function/agonists/agonists.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-function/agonists/agonists.component.css
rename to src/app/complex/complex-details/complex-function/agonists/agonists.component.scss
diff --git a/src/app/complex/complex-details/complex-function/agonists/agonists.component.ts b/src/app/complex/complex-details/complex-function/agonists/agonists.component.ts
index 5a2146a1..d3f11011 100644
--- a/src/app/complex/complex-details/complex-function/agonists/agonists.component.ts
+++ b/src/app/complex/complex-details/complex-function/agonists/agonists.component.ts
@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-agonists',
   templateUrl: './agonists.component.html',
-  styleUrls: ['./agonists.component.css']
+  styleUrls: ['./agonists.component.scss']
 })
 export class AgonistsComponent implements OnInit {
   private _agonists: string[];
diff --git a/src/app/complex/complex-details/complex-function/antagonists/antagonists.component.css b/src/app/complex/complex-details/complex-function/antagonists/antagonists.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-function/antagonists/antagonists.component.css
rename to src/app/complex/complex-details/complex-function/antagonists/antagonists.component.scss
diff --git a/src/app/complex/complex-details/complex-function/antagonists/antagonists.component.ts b/src/app/complex/complex-details/complex-function/antagonists/antagonists.component.ts
index 45fa625f..ca59b226 100644
--- a/src/app/complex/complex-details/complex-function/antagonists/antagonists.component.ts
+++ b/src/app/complex/complex-details/complex-function/antagonists/antagonists.component.ts
@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-antagonists',
   templateUrl: './antagonists.component.html',
-  styleUrls: ['./antagonists.component.css']
+  styleUrls: ['./antagonists.component.scss']
 })
 export class AntagonistsComponent implements OnInit {
   private _antagonists: string[];
diff --git a/src/app/complex/complex-details/complex-function/catalytic-activity/catalytic-activity.component.css b/src/app/complex/complex-details/complex-function/catalytic-activity/catalytic-activity.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-function/catalytic-activity/catalytic-activity.component.css
rename to src/app/complex/complex-details/complex-function/catalytic-activity/catalytic-activity.component.scss
diff --git a/src/app/complex/complex-details/complex-function/catalytic-activity/catalytic-activity.component.ts b/src/app/complex/complex-details/complex-function/catalytic-activity/catalytic-activity.component.ts
index 8d21ff72..192c6f83 100644
--- a/src/app/complex/complex-details/complex-function/catalytic-activity/catalytic-activity.component.ts
+++ b/src/app/complex/complex-details/complex-function/catalytic-activity/catalytic-activity.component.ts
@@ -7,7 +7,7 @@ import '../../../../../../node_modules/@swissprot/rhea-reaction-visualizer';
 @Component({
   selector: 'cp-catalytic-activity',
   templateUrl: './catalytic-activity.component.html',
-  styleUrls: ['./catalytic-activity.component.css']
+  styleUrls: ['./catalytic-activity.component.scss']
 })
 export class CatalyticActivityComponent implements OnInit {
   private _intenzCrossReferences: IntEnzCrossReference[];
diff --git a/src/app/complex/complex-details/complex-function/complex-function.component.css b/src/app/complex/complex-details/complex-function/complex-function.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-function/complex-function.component.css
rename to src/app/complex/complex-details/complex-function/complex-function.component.scss
diff --git a/src/app/complex/complex-details/complex-function/complex-function.component.ts b/src/app/complex/complex-details/complex-function/complex-function.component.ts
index c382cb5b..f7cdb833 100644
--- a/src/app/complex/complex-details/complex-function/complex-function.component.ts
+++ b/src/app/complex/complex-details/complex-function/complex-function.component.ts
@@ -6,7 +6,7 @@ import {IntEnzCrossReference} from '../../shared/model/complex-details/intenz-cr
 @Component({
   selector: 'cp-complex-function',
   templateUrl: './complex-function.component.html',
-  styleUrls: ['./complex-function.component.css']
+  styleUrls: ['./complex-function.component.scss']
 })
 export class ComplexFunctionComponent implements OnInit, AfterViewInit {
   private _crossReferences: CrossReference[];
diff --git a/src/app/complex/complex-details/complex-function/go-crossreferences/go-biological-process/go-biological-process.component.css b/src/app/complex/complex-details/complex-function/go-crossreferences/go-biological-process/go-biological-process.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-function/go-crossreferences/go-biological-process/go-biological-process.component.css
rename to src/app/complex/complex-details/complex-function/go-crossreferences/go-biological-process/go-biological-process.component.scss
diff --git a/src/app/complex/complex-details/complex-function/go-crossreferences/go-biological-process/go-biological-process.component.ts b/src/app/complex/complex-details/complex-function/go-crossreferences/go-biological-process/go-biological-process.component.ts
index f5c01f6c..59440772 100644
--- a/src/app/complex/complex-details/complex-function/go-crossreferences/go-biological-process/go-biological-process.component.ts
+++ b/src/app/complex/complex-details/complex-function/go-crossreferences/go-biological-process/go-biological-process.component.ts
@@ -4,7 +4,7 @@ import {CrossReference} from '../../../../shared/model/complex-details/cross-ref
 @Component({
   selector: 'cp-go-biological-process',
   templateUrl: 'go-biological-process.component.html',
-  styleUrls: ['go-biological-process.component.css']
+  styleUrls: ['go-biological-process.component.scss']
 })
 export class GoBiologicalProcessComponent implements OnInit {
   private _crossReferences: CrossReference[];
diff --git a/src/app/complex/complex-details/complex-function/go-crossreferences/go-crossreferences.component.css b/src/app/complex/complex-details/complex-function/go-crossreferences/go-crossreferences.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-function/go-crossreferences/go-crossreferences.component.css
rename to src/app/complex/complex-details/complex-function/go-crossreferences/go-crossreferences.component.scss
diff --git a/src/app/complex/complex-details/complex-function/go-crossreferences/go-crossreferences.component.ts b/src/app/complex/complex-details/complex-function/go-crossreferences/go-crossreferences.component.ts
index 0c1dbc27..e7d09f50 100644
--- a/src/app/complex/complex-details/complex-function/go-crossreferences/go-crossreferences.component.ts
+++ b/src/app/complex/complex-details/complex-function/go-crossreferences/go-crossreferences.component.ts
@@ -4,7 +4,7 @@ import {CrossReference} from '../../../shared/model/complex-details/cross-refere
 @Component({
   selector: 'cp-go-crossreferences',
   templateUrl: './go-crossreferences.component.html',
-  styleUrls: ['./go-crossreferences.component.css']
+  styleUrls: ['./go-crossreferences.component.scss']
 })
 export class GoCrossreferencesComponent implements OnInit {
   private _crossReferences: CrossReference[];
diff --git a/src/app/complex/complex-details/complex-function/go-crossreferences/go-molecular-function/go-molecular-function.component.css b/src/app/complex/complex-details/complex-function/go-crossreferences/go-molecular-function/go-molecular-function.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-function/go-crossreferences/go-molecular-function/go-molecular-function.component.css
rename to src/app/complex/complex-details/complex-function/go-crossreferences/go-molecular-function/go-molecular-function.component.scss
diff --git a/src/app/complex/complex-details/complex-function/go-crossreferences/go-molecular-function/go-molecular-function.component.ts b/src/app/complex/complex-details/complex-function/go-crossreferences/go-molecular-function/go-molecular-function.component.ts
index adbadd91..59be787d 100644
--- a/src/app/complex/complex-details/complex-function/go-crossreferences/go-molecular-function/go-molecular-function.component.ts
+++ b/src/app/complex/complex-details/complex-function/go-crossreferences/go-molecular-function/go-molecular-function.component.ts
@@ -4,7 +4,7 @@ import {CrossReference} from '../../../../shared/model/complex-details/cross-ref
 @Component({
   selector: 'cp-go-molecular-function',
   templateUrl: 'go-molecular-function.component.html',
-  styleUrls: ['go-molecular-function.component.css']
+  styleUrls: ['go-molecular-function.component.scss']
 })
 export class GoMolecularFunctionComponent implements OnInit {
   private _crossReferences: CrossReference[];
diff --git a/src/app/complex/complex-details/complex-function/ligands/ligands.component.css b/src/app/complex/complex-details/complex-function/ligands/ligands.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-function/ligands/ligands.component.css
rename to src/app/complex/complex-details/complex-function/ligands/ligands.component.scss
diff --git a/src/app/complex/complex-details/complex-function/ligands/ligands.component.ts b/src/app/complex/complex-details/complex-function/ligands/ligands.component.ts
index 476b6e29..8a9728b4 100644
--- a/src/app/complex/complex-details/complex-function/ligands/ligands.component.ts
+++ b/src/app/complex/complex-details/complex-function/ligands/ligands.component.ts
@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-ligands',
   templateUrl: './ligands.component.html',
-  styleUrls: ['./ligands.component.css']
+  styleUrls: ['./ligands.component.scss']
 })
 export class LigandsComponent implements OnInit {
   private _ligands: string[];
diff --git a/src/app/complex/complex-details/complex-function/reactome-crossreferences/reactome-cross-references.component.css b/src/app/complex/complex-details/complex-function/reactome-crossreferences/reactome-cross-references.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-function/reactome-crossreferences/reactome-cross-references.component.css
rename to src/app/complex/complex-details/complex-function/reactome-crossreferences/reactome-cross-references.component.scss
diff --git a/src/app/complex/complex-details/complex-function/reactome-crossreferences/reactome-cross-references.component.ts b/src/app/complex/complex-details/complex-function/reactome-crossreferences/reactome-cross-references.component.ts
index c9a08abf..2d06843c 100644
--- a/src/app/complex/complex-details/complex-function/reactome-crossreferences/reactome-cross-references.component.ts
+++ b/src/app/complex/complex-details/complex-function/reactome-crossreferences/reactome-cross-references.component.ts
@@ -12,7 +12,7 @@ import {forkJoin} from 'rxjs';
 @Component({
   selector: 'cp-reactome-cross-references',
   templateUrl: './reactome-cross-references.component.html',
-  styleUrls: ['./reactome-cross-references.component.css']
+  styleUrls: ['./reactome-cross-references.component.scss']
 })
 
 export class ReactomeCrossReferencesComponent implements OnInit {
diff --git a/src/app/complex/complex-details/complex-header/complex-header.component.css b/src/app/complex/complex-details/complex-header/complex-header.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-header/complex-header.component.css
rename to src/app/complex/complex-details/complex-header/complex-header.component.scss
diff --git a/src/app/complex/complex-details/complex-header/complex-header.component.ts b/src/app/complex/complex-details/complex-header/complex-header.component.ts
index 3315b56e..c006464a 100644
--- a/src/app/complex/complex-details/complex-header/complex-header.component.ts
+++ b/src/app/complex/complex-details/complex-header/complex-header.component.ts
@@ -8,7 +8,7 @@ import {ComplexDetails} from '../../shared/model/complex-details/complex-details
 @Component({
   selector: 'cp-complex-header',
   templateUrl: './complex-header.component.html',
-  styleUrls: ['./complex-header.component.css']
+  styleUrls: ['./complex-header.component.scss']
 })
 export class ComplexHeaderComponent implements OnInit, AfterViewInit {
 
diff --git a/src/app/complex/complex-details/complex-header/download-modal/download-modal.component.css b/src/app/complex/complex-details/complex-header/download-modal/download-modal.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-header/download-modal/download-modal.component.css
rename to src/app/complex/complex-details/complex-header/download-modal/download-modal.component.scss
diff --git a/src/app/complex/complex-details/complex-header/download-modal/download-modal.component.ts b/src/app/complex/complex-details/complex-header/download-modal/download-modal.component.ts
index 843f260f..08b0bd31 100644
--- a/src/app/complex/complex-details/complex-header/download-modal/download-modal.component.ts
+++ b/src/app/complex/complex-details/complex-header/download-modal/download-modal.component.ts
@@ -15,7 +15,7 @@ interface Format {
 @Component({
   selector: 'cp-download-modal',
   templateUrl: './download-modal.component.html',
-  styleUrls: ['./download-modal.component.css']
+  styleUrls: ['./download-modal.component.scss']
 })
 export class DownloadModalComponent implements OnInit {
   complexAC = input.required<string>();
diff --git a/src/app/complex/complex-details/complex-participants/complex-participant-legend/complex-participant-legend.component.css b/src/app/complex/complex-details/complex-participants/complex-participant-legend/complex-participant-legend.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-participants/complex-participant-legend/complex-participant-legend.component.css
rename to src/app/complex/complex-details/complex-participants/complex-participant-legend/complex-participant-legend.component.scss
diff --git a/src/app/complex/complex-details/complex-participants/complex-participant-legend/complex-participant-legend.component.ts b/src/app/complex/complex-details/complex-participants/complex-participant-legend/complex-participant-legend.component.ts
index d0d098e2..0498ae85 100644
--- a/src/app/complex/complex-details/complex-participants/complex-participant-legend/complex-participant-legend.component.ts
+++ b/src/app/complex/complex-details/complex-participants/complex-participant-legend/complex-participant-legend.component.ts
@@ -5,7 +5,7 @@ import {ComplexParticipant} from '../complex-participants.component';
 @Component({
   selector: 'cp-complex-participant-legend',
   templateUrl: './complex-participant-legend.component.html',
-  styleUrls: ['./complex-participant-legend.component.css'],
+  styleUrls: ['./complex-participant-legend.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class ComplexParticipantLegendComponent {
diff --git a/src/app/complex/complex-details/complex-participants/complex-participants.component.css b/src/app/complex/complex-details/complex-participants/complex-participants.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-participants/complex-participants.component.css
rename to src/app/complex/complex-details/complex-participants/complex-participants.component.scss
diff --git a/src/app/complex/complex-details/complex-participants/complex-participants.component.ts b/src/app/complex/complex-details/complex-participants/complex-participants.component.ts
index f2eec666..82ab7771 100644
--- a/src/app/complex/complex-details/complex-participants/complex-participants.component.ts
+++ b/src/app/complex/complex-details/complex-participants/complex-participants.component.ts
@@ -22,7 +22,7 @@ export class ComplexParticipant {
 @Component({
   selector: 'cp-complex-participants',
   templateUrl: './complex-participants.component.html',
-  styleUrls: ['./complex-participants.component.css'],
+  styleUrls: ['./complex-participants.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class ComplexParticipantsComponent implements OnInit, AfterViewInit {
diff --git a/src/app/complex/complex-details/complex-properties/assemblies/assemblies.component.css b/src/app/complex/complex-details/complex-properties/assemblies/assemblies.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-properties/assemblies/assemblies.component.css
rename to src/app/complex/complex-details/complex-properties/assemblies/assemblies.component.scss
diff --git a/src/app/complex/complex-details/complex-properties/assemblies/assemblies.component.ts b/src/app/complex/complex-details/complex-properties/assemblies/assemblies.component.ts
index 60c61dbb..5816600d 100644
--- a/src/app/complex/complex-details/complex-properties/assemblies/assemblies.component.ts
+++ b/src/app/complex/complex-details/complex-properties/assemblies/assemblies.component.ts
@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-assemblies',
   templateUrl: './assemblies.component.html',
-  styleUrls: ['./assemblies.component.css']
+  styleUrls: ['./assemblies.component.scss']
 })
 export class AssembliesComponent implements OnInit {
   private _assemblies: string[];
diff --git a/src/app/complex/complex-details/complex-properties/complex-properties.component.css b/src/app/complex/complex-details/complex-properties/complex-properties.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-properties/complex-properties.component.css
rename to src/app/complex/complex-details/complex-properties/complex-properties.component.scss
diff --git a/src/app/complex/complex-details/complex-properties/complex-properties.component.ts b/src/app/complex/complex-details/complex-properties/complex-properties.component.ts
index 151e66e6..ea2a6b67 100644
--- a/src/app/complex/complex-details/complex-properties/complex-properties.component.ts
+++ b/src/app/complex/complex-details/complex-properties/complex-properties.component.ts
@@ -4,7 +4,7 @@ import {CrossReference} from '../../shared/model/complex-details/cross-reference
 @Component({
   selector: 'cp-complex-properties',
   templateUrl: './complex-properties.component.html',
-  styleUrls: ['./complex-properties.component.css']
+  styleUrls: ['./complex-properties.component.scss']
 })
 export class ComplexPropertiesComponent implements OnInit {
   private _propertiesDescription: string[];
diff --git a/src/app/complex/complex-details/complex-properties/emdb-crossreferences/emdb-crossreferences.component.css b/src/app/complex/complex-details/complex-properties/emdb-crossreferences/emdb-crossreferences.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-properties/emdb-crossreferences/emdb-crossreferences.component.css
rename to src/app/complex/complex-details/complex-properties/emdb-crossreferences/emdb-crossreferences.component.scss
diff --git a/src/app/complex/complex-details/complex-properties/emdb-crossreferences/emdb-crossreferences.component.ts b/src/app/complex/complex-details/complex-properties/emdb-crossreferences/emdb-crossreferences.component.ts
index a60cd973..b7d5e053 100644
--- a/src/app/complex/complex-details/complex-properties/emdb-crossreferences/emdb-crossreferences.component.ts
+++ b/src/app/complex/complex-details/complex-properties/emdb-crossreferences/emdb-crossreferences.component.ts
@@ -4,7 +4,7 @@ import {CrossReference} from '../../../shared/model/complex-details/cross-refere
 @Component({
   selector: 'cp-emdb-crossreferences',
   templateUrl: './emdb-crossreferences.component.html',
-  styleUrls: ['./emdb-crossreferences.component.css']
+  styleUrls: ['./emdb-crossreferences.component.scss']
 })
 export class EmdbCrossreferencesComponent implements OnInit {
   private _crossReferences: CrossReference[];
diff --git a/src/app/complex/complex-details/complex-properties/pdb-crossreferences/pdb-crossreferences.component.css b/src/app/complex/complex-details/complex-properties/pdb-crossreferences/pdb-crossreferences.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-properties/pdb-crossreferences/pdb-crossreferences.component.css
rename to src/app/complex/complex-details/complex-properties/pdb-crossreferences/pdb-crossreferences.component.scss
diff --git a/src/app/complex/complex-details/complex-properties/pdb-crossreferences/pdb-crossreferences.component.ts b/src/app/complex/complex-details/complex-properties/pdb-crossreferences/pdb-crossreferences.component.ts
index b7c9e657..170fb654 100644
--- a/src/app/complex/complex-details/complex-properties/pdb-crossreferences/pdb-crossreferences.component.ts
+++ b/src/app/complex/complex-details/complex-properties/pdb-crossreferences/pdb-crossreferences.component.ts
@@ -4,7 +4,7 @@ import {CrossReference} from '../../../shared/model/complex-details/cross-refere
 @Component({
   selector: 'cp-pdb-crossreferences',
   templateUrl: './pdb-crossreferences.component.html',
-  styleUrls: ['./pdb-crossreferences.component.css']
+  styleUrls: ['./pdb-crossreferences.component.scss']
 })
 export class PdbCrossreferencesComponent implements OnInit {
   private _crossReferences: CrossReference[];
diff --git a/src/app/complex/complex-details/complex-references/complex-references.component.css b/src/app/complex/complex-details/complex-references/complex-references.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-references/complex-references.component.css
rename to src/app/complex/complex-details/complex-references/complex-references.component.scss
diff --git a/src/app/complex/complex-details/complex-references/complex-references.component.ts b/src/app/complex/complex-details/complex-references/complex-references.component.ts
index 97814590..c41c38d4 100644
--- a/src/app/complex/complex-details/complex-references/complex-references.component.ts
+++ b/src/app/complex/complex-details/complex-references/complex-references.component.ts
@@ -4,7 +4,7 @@ import {CrossReference} from '../../shared/model/complex-details/cross-reference
 @Component({
   selector: 'cp-complex-references',
   templateUrl: './complex-references.component.html',
-  styleUrls: ['./complex-references.component.css']
+  styleUrls: ['./complex-references.component.scss']
 })
 export class ComplexReferencesComponent implements OnInit {
   private _crossReferences: CrossReference[];
diff --git a/src/app/complex/complex-details/complex-references/euro-pmc-crossreferences/euro-pmc-crossreferences.component.css b/src/app/complex/complex-details/complex-references/euro-pmc-crossreferences/euro-pmc-crossreferences.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-references/euro-pmc-crossreferences/euro-pmc-crossreferences.component.css
rename to src/app/complex/complex-details/complex-references/euro-pmc-crossreferences/euro-pmc-crossreferences.component.scss
diff --git a/src/app/complex/complex-details/complex-references/euro-pmc-crossreferences/euro-pmc-crossreferences.component.ts b/src/app/complex/complex-details/complex-references/euro-pmc-crossreferences/euro-pmc-crossreferences.component.ts
index 612150c1..0280116b 100644
--- a/src/app/complex/complex-details/complex-references/euro-pmc-crossreferences/euro-pmc-crossreferences.component.ts
+++ b/src/app/complex/complex-details/complex-references/euro-pmc-crossreferences/euro-pmc-crossreferences.component.ts
@@ -17,7 +17,7 @@ interface Publication {
 @Component({
   selector: 'cp-euro-pmc-crossreferences',
   templateUrl: 'euro-pmc-crossreferences.component.html',
-  styleUrls: ['euro-pmc-crossreferences.component.css']
+  styleUrls: ['euro-pmc-crossreferences.component.scss']
 })
 
 export class EuroPmcCrossreferencesComponent implements OnInit {
diff --git a/src/app/complex/complex-details/complex-references/external-resources/external-resources.component.css b/src/app/complex/complex-details/complex-references/external-resources/external-resources.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-references/external-resources/external-resources.component.css
rename to src/app/complex/complex-details/complex-references/external-resources/external-resources.component.scss
diff --git a/src/app/complex/complex-details/complex-references/external-resources/external-resources.component.ts b/src/app/complex/complex-details/complex-references/external-resources/external-resources.component.ts
index fba5e4e0..59771cb1 100644
--- a/src/app/complex/complex-details/complex-references/external-resources/external-resources.component.ts
+++ b/src/app/complex/complex-details/complex-references/external-resources/external-resources.component.ts
@@ -5,7 +5,7 @@ import {humapUrl} from '../../../complex-portal-utils';
 @Component({
   selector: 'cp-external-resources',
   templateUrl: './external-resources.component.html',
-  styleUrls: ['./external-resources.component.css']
+  styleUrls: ['./external-resources.component.scss']
 })
 export class ExternalResourcesComponent implements OnInit {
   private _crossReferences: CrossReference[];
diff --git a/src/app/complex/complex-details/complex-references/synonyms/synonyms.component.css b/src/app/complex/complex-details/complex-references/synonyms/synonyms.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-references/synonyms/synonyms.component.css
rename to src/app/complex/complex-details/complex-references/synonyms/synonyms.component.scss
diff --git a/src/app/complex/complex-details/complex-references/synonyms/synonyms.component.ts b/src/app/complex/complex-details/complex-references/synonyms/synonyms.component.ts
index 2adfc4c3..348bf3e2 100644
--- a/src/app/complex/complex-details/complex-references/synonyms/synonyms.component.ts
+++ b/src/app/complex/complex-details/complex-references/synonyms/synonyms.component.ts
@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-synonyms',
   templateUrl: 'synonyms.component.html',
-  styleUrls: ['synonyms.component.css']
+  styleUrls: ['synonyms.component.scss']
 })
 export class SynonymsComponent implements OnInit {
   private _synonyms: string[];
diff --git a/src/app/complex/complex-details/complex-references/systematic-name/systematic-name.component.css b/src/app/complex/complex-details/complex-references/systematic-name/systematic-name.component.scss
similarity index 100%
rename from src/app/complex/complex-details/complex-references/systematic-name/systematic-name.component.css
rename to src/app/complex/complex-details/complex-references/systematic-name/systematic-name.component.scss
diff --git a/src/app/complex/complex-details/complex-references/systematic-name/systematic-name.component.ts b/src/app/complex/complex-details/complex-references/systematic-name/systematic-name.component.ts
index d66cc0cf..6ead3c06 100644
--- a/src/app/complex/complex-details/complex-references/systematic-name/systematic-name.component.ts
+++ b/src/app/complex/complex-details/complex-references/systematic-name/systematic-name.component.ts
@@ -3,7 +3,7 @@ import {Component, Input, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-systematic-name',
   templateUrl: 'systematic-name.component.html',
-  styleUrls: ['systematic-name.component.css']
+  styleUrls: ['systematic-name.component.scss']
 })
 export class SystematicNameComponent implements OnInit {
   private _systematicName: string;
diff --git a/src/app/complex/complex-details/shared/go-to/go-to.component.css b/src/app/complex/complex-details/shared/go-to/go-to.component.scss
similarity index 100%
rename from src/app/complex/complex-details/shared/go-to/go-to.component.css
rename to src/app/complex/complex-details/shared/go-to/go-to.component.scss
diff --git a/src/app/complex/complex-details/shared/go-to/go-to.component.ts b/src/app/complex/complex-details/shared/go-to/go-to.component.ts
index 731940c7..ac4c8c21 100644
--- a/src/app/complex/complex-details/shared/go-to/go-to.component.ts
+++ b/src/app/complex/complex-details/shared/go-to/go-to.component.ts
@@ -7,7 +7,7 @@ import {PageScrollService} from 'ngx-page-scroll-core';
 @Component({
   selector: 'cp-go-to',
   templateUrl: './go-to.component.html',
-  styleUrls: ['./go-to.component.css'],
+  styleUrls: ['./go-to.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class GoToComponent implements OnInit, AfterViewInit {
diff --git a/src/app/complex/complex-details/shared/visualisation/gxa-heatmap/gxa-heatmap.component.css b/src/app/complex/complex-details/shared/visualisation/gxa-heatmap/gxa-heatmap.component.scss
similarity index 100%
rename from src/app/complex/complex-details/shared/visualisation/gxa-heatmap/gxa-heatmap.component.css
rename to src/app/complex/complex-details/shared/visualisation/gxa-heatmap/gxa-heatmap.component.scss
diff --git a/src/app/complex/complex-details/shared/visualisation/gxa-heatmap/gxa-heatmap.component.ts b/src/app/complex/complex-details/shared/visualisation/gxa-heatmap/gxa-heatmap.component.ts
index 5d7c5caa..c291c0bb 100644
--- a/src/app/complex/complex-details/shared/visualisation/gxa-heatmap/gxa-heatmap.component.ts
+++ b/src/app/complex/complex-details/shared/visualisation/gxa-heatmap/gxa-heatmap.component.ts
@@ -5,7 +5,7 @@ import {SpeciesPipe} from '../../../../shared/pipe/species.pipe';
 @Component({
   selector: 'cp-gxa-heatmap',
   templateUrl: 'gxa-heatmap.component.html',
-  styleUrls: ['gxa-heatmap.component.css']
+  styleUrls: ['gxa-heatmap.component.scss']
 })
 export class GxaHeatmapComponent implements OnInit {
   private _gxa;
diff --git a/src/app/complex/complex-details/shared/visualisation/litmol-viewer/litmol-viewer.component.css b/src/app/complex/complex-details/shared/visualisation/litmol-viewer/litmol-viewer.component.scss
similarity index 100%
rename from src/app/complex/complex-details/shared/visualisation/litmol-viewer/litmol-viewer.component.css
rename to src/app/complex/complex-details/shared/visualisation/litmol-viewer/litmol-viewer.component.scss
diff --git a/src/app/complex/complex-details/shared/visualisation/litmol-viewer/litmol-viewer.component.ts b/src/app/complex/complex-details/shared/visualisation/litmol-viewer/litmol-viewer.component.ts
index f8bba9f8..e2e73ee9 100644
--- a/src/app/complex/complex-details/shared/visualisation/litmol-viewer/litmol-viewer.component.ts
+++ b/src/app/complex/complex-details/shared/visualisation/litmol-viewer/litmol-viewer.component.ts
@@ -9,7 +9,7 @@ const baseURL = environment.pdb_base_url;
 @Component({
   selector: 'cp-litmol-viewer',
   templateUrl: 'litmol-viewer.component.html',
-  styleUrls: ['litmol-viewer.component.css']
+  styleUrls: ['litmol-viewer.component.scss']
 })
 export class LitmolViewerComponent implements OnInit, OnChanges {
   private _plugin: any;
diff --git a/src/app/complex/complex-details/shared/visualisation/node-diagram/node-diagram.component.css b/src/app/complex/complex-details/shared/visualisation/node-diagram/node-diagram.component.scss
similarity index 100%
rename from src/app/complex/complex-details/shared/visualisation/node-diagram/node-diagram.component.css
rename to src/app/complex/complex-details/shared/visualisation/node-diagram/node-diagram.component.scss
diff --git a/src/app/complex/complex-details/shared/visualisation/node-diagram/node-diagram.component.ts b/src/app/complex/complex-details/shared/visualisation/node-diagram/node-diagram.component.ts
index b6accd17..7d1fa4f4 100644
--- a/src/app/complex/complex-details/shared/visualisation/node-diagram/node-diagram.component.ts
+++ b/src/app/complex/complex-details/shared/visualisation/node-diagram/node-diagram.component.ts
@@ -3,7 +3,7 @@ import {AfterViewInit, Component, ElementRef, input, OnChanges, SimpleChanges, V
 @Component({
   selector: 'cp-node-diagram',
   templateUrl: './node-diagram.component.html',
-  styleUrls: ['./node-diagram.component.css']
+  styleUrls: ['./node-diagram.component.scss']
 })
 export class NodeDiagramComponent implements AfterViewInit, OnChanges {
   shape = input<NodeShape>(NodeShape.ELLIPSE);
diff --git a/src/app/complex/complex-details/shared/visualisation/reactome-diagram/reactome-diagram.component.css b/src/app/complex/complex-details/shared/visualisation/reactome-diagram/reactome-diagram.component.scss
similarity index 100%
rename from src/app/complex/complex-details/shared/visualisation/reactome-diagram/reactome-diagram.component.css
rename to src/app/complex/complex-details/shared/visualisation/reactome-diagram/reactome-diagram.component.scss
diff --git a/src/app/complex/complex-details/shared/visualisation/reactome-diagram/reactome-diagram.component.ts b/src/app/complex/complex-details/shared/visualisation/reactome-diagram/reactome-diagram.component.ts
index aa2a5e9c..b22274d7 100644
--- a/src/app/complex/complex-details/shared/visualisation/reactome-diagram/reactome-diagram.component.ts
+++ b/src/app/complex/complex-details/shared/visualisation/reactome-diagram/reactome-diagram.component.ts
@@ -8,7 +8,7 @@ const baseURL = environment.reactome_base_url;
 @Component({
   selector: 'cp-reactome-diagram',
   templateUrl: 'reactome-diagram.component.html',
-  styleUrls: ['reactome-diagram.component.css']
+  styleUrls: ['reactome-diagram.component.scss']
 })
 export class ReactomeDiagramComponent implements OnInit, OnChanges {
   private diagramContext: any;
diff --git a/src/app/complex/complex-organisms/complex-organism/complex-organism.component.css b/src/app/complex/complex-organisms/complex-organism/complex-organism.component.scss
similarity index 100%
rename from src/app/complex/complex-organisms/complex-organism/complex-organism.component.css
rename to src/app/complex/complex-organisms/complex-organism/complex-organism.component.scss
diff --git a/src/app/complex/complex-organisms/complex-organism/complex-organism.component.ts b/src/app/complex/complex-organisms/complex-organism/complex-organism.component.ts
index 41c8560b..bdb54e97 100644
--- a/src/app/complex/complex-organisms/complex-organism/complex-organism.component.ts
+++ b/src/app/complex/complex-organisms/complex-organism/complex-organism.component.ts
@@ -9,7 +9,7 @@ import {APP_BASE_HREF} from '@angular/common';
 @Component({
   selector: 'cp-complex-organism',
   templateUrl: './complex-organism.component.html',
-  styleUrls: ['./complex-organism.component.css']
+  styleUrls: ['./complex-organism.component.scss']
 })
 export class ComplexOrganismComponent implements OnInit {
   private _organism: ComplexOrganisms;
diff --git a/src/app/complex/complex-organisms/complex-organisms.component.css b/src/app/complex/complex-organisms/complex-organisms.component.scss
similarity index 100%
rename from src/app/complex/complex-organisms/complex-organisms.component.css
rename to src/app/complex/complex-organisms/complex-organisms.component.scss
diff --git a/src/app/complex/complex-organisms/complex-organisms.component.ts b/src/app/complex/complex-organisms/complex-organisms.component.ts
index 5ace9513..6ea3b2a6 100644
--- a/src/app/complex/complex-organisms/complex-organisms.component.ts
+++ b/src/app/complex/complex-organisms/complex-organisms.component.ts
@@ -8,7 +8,7 @@ import {Facet} from '../shared/model/complex-results/facet.model';
 @Component({
   selector: 'cp-complex-organisms',
   templateUrl: './complex-organisms.component.html',
-  styleUrls: ['./complex-organisms.component.css']
+  styleUrls: ['./complex-organisms.component.scss']
 })
 export class ComplexOrganismsComponent implements OnInit, AfterViewInit {
   private _organisms: ComplexOrganisms[];
diff --git a/src/app/complex/complex-results/complex-filter/complex-filter.component.css b/src/app/complex/complex-results/complex-filter/complex-filter.component.scss
similarity index 100%
rename from src/app/complex/complex-results/complex-filter/complex-filter.component.css
rename to src/app/complex/complex-results/complex-filter/complex-filter.component.scss
diff --git a/src/app/complex/complex-results/complex-filter/complex-filter.component.ts b/src/app/complex/complex-results/complex-filter/complex-filter.component.ts
index afbe63d3..872194dd 100644
--- a/src/app/complex/complex-results/complex-filter/complex-filter.component.ts
+++ b/src/app/complex/complex-results/complex-filter/complex-filter.component.ts
@@ -14,7 +14,7 @@ interface Confidence {
 @Component({
   selector: 'cp-complex-filter',
   templateUrl: './complex-filter.component.html',
-  styleUrls: ['./complex-filter.component.css']
+  styleUrls: ['./complex-filter.component.scss']
 })
 export class ComplexFilterComponent implements OnInit {
 
diff --git a/src/app/complex/complex-results/complex-list/complex-list.component.css b/src/app/complex/complex-results/complex-list/complex-list.component.scss
similarity index 100%
rename from src/app/complex/complex-results/complex-list/complex-list.component.css
rename to src/app/complex/complex-results/complex-list/complex-list.component.scss
diff --git a/src/app/complex/complex-results/complex-list/complex-list.component.ts b/src/app/complex/complex-results/complex-list/complex-list.component.ts
index b45b4495..03fe45e2 100644
--- a/src/app/complex/complex-results/complex-list/complex-list.component.ts
+++ b/src/app/complex/complex-results/complex-list/complex-list.component.ts
@@ -6,7 +6,7 @@ import {Complex} from '../../shared/model/complex-results/complex.model';
 @Component({
   selector: 'cp-complex-list',
   templateUrl: './complex-list.component.html',
-  styleUrls: ['./complex-list.component.css']
+  styleUrls: ['./complex-list.component.scss']
 })
 export class ComplexListComponent implements OnInit {
   complexSearch = input<ComplexSearchResult>();
diff --git a/src/app/complex/complex-results/complex-navigator/complex-navigator-buttons/complex-navigator-buttons.component.css b/src/app/complex/complex-results/complex-navigator/complex-navigator-buttons/complex-navigator-buttons.component.scss
similarity index 100%
rename from src/app/complex/complex-results/complex-navigator/complex-navigator-buttons/complex-navigator-buttons.component.css
rename to src/app/complex/complex-results/complex-navigator/complex-navigator-buttons/complex-navigator-buttons.component.scss
diff --git a/src/app/complex/complex-results/complex-navigator/complex-navigator-buttons/complex-navigator-buttons.component.ts b/src/app/complex/complex-results/complex-navigator/complex-navigator-buttons/complex-navigator-buttons.component.ts
index e8865a20..7b044477 100644
--- a/src/app/complex/complex-results/complex-navigator/complex-navigator-buttons/complex-navigator-buttons.component.ts
+++ b/src/app/complex/complex-results/complex-navigator/complex-navigator-buttons/complex-navigator-buttons.component.ts
@@ -9,7 +9,7 @@ import {Action} from '../../../../shared/google-analytics/types/action.enum';
 @Component({
   selector: 'cp-complex-navigator-buttons',
   templateUrl: './complex-navigator-buttons.component.html',
-  styleUrls: ['./complex-navigator-buttons.component.css']
+  styleUrls: ['./complex-navigator-buttons.component.scss']
 })
 export class ComplexNavigatorButtonsComponent {
 
diff --git a/src/app/complex/complex-results/complex-navigator/complex-navigator-rating/complex-navigator-rating.component.css b/src/app/complex/complex-results/complex-navigator/complex-navigator-rating/complex-navigator-rating.component.scss
similarity index 100%
rename from src/app/complex/complex-results/complex-navigator/complex-navigator-rating/complex-navigator-rating.component.css
rename to src/app/complex/complex-results/complex-navigator/complex-navigator-rating/complex-navigator-rating.component.scss
diff --git a/src/app/complex/complex-results/complex-navigator/complex-navigator-rating/complex-navigator-rating.component.ts b/src/app/complex/complex-results/complex-navigator/complex-navigator-rating/complex-navigator-rating.component.ts
index b668acd7..2203c134 100644
--- a/src/app/complex/complex-results/complex-navigator/complex-navigator-rating/complex-navigator-rating.component.ts
+++ b/src/app/complex/complex-results/complex-navigator/complex-navigator-rating/complex-navigator-rating.component.ts
@@ -6,7 +6,7 @@ const COMPLEX_NAVIGATOR_RATING = 'already_rated';
 @Component({
   selector: 'cp-complex-navigator-rating',
   templateUrl: './complex-navigator-rating.component.html',
-  styleUrls: ['./complex-navigator-rating.component.css']
+  styleUrls: ['./complex-navigator-rating.component.scss']
 })
 export class ComplexNavigatorRatingComponent implements OnInit {
   selectedRating: number;
diff --git a/src/app/complex/complex-results/complex-navigator/complex-navigator.component.css b/src/app/complex/complex-results/complex-navigator/complex-navigator.component.css
deleted file mode 100644
index 8b137891..00000000
--- a/src/app/complex/complex-results/complex-navigator/complex-navigator.component.css
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/app/complex/complex-results/complex-navigator/complex-navigator.component.html b/src/app/complex/complex-results/complex-navigator/complex-navigator.component.html
index 7cd1a7fb..836da484 100644
--- a/src/app/complex/complex-results/complex-navigator/complex-navigator.component.html
+++ b/src/app/complex/complex-results/complex-navigator/complex-navigator.component.html
@@ -1,5 +1,8 @@
-<div class="ComplexNavigator">
-  <div class="Buttons" [ngClass]="complexSearch().totalNumberOfResults <=6 ? 'smallCNButtons' : ''">
+<div class="ComplexNavigator"
+     [style.--cols]="complexSearch().elements.length"
+     [class.horizontal]="complexSearch().elements.length <= 6"
+     [class.sorted]="isSorted()">
+  <div class="buttons">
     <cp-complex-navigator-buttons [orthologsGroupsAvailable]="orthologGroupsAvailable()"/>
   </div>
   <cp-table-structure [complexSearch]="complexSearch()"
diff --git a/src/app/complex/complex-results/complex-navigator/complex-navigator.component.scss b/src/app/complex/complex-results/complex-navigator/complex-navigator.component.scss
new file mode 100644
index 00000000..5b4fc0e0
--- /dev/null
+++ b/src/app/complex/complex-results/complex-navigator/complex-navigator.component.scss
@@ -0,0 +1,22 @@
+.ComplexNavigator {
+  --cols: 1;
+  --componentSize: 230px;
+  --sortingGroupSize: 0px;
+  --colSize: 70px;
+  --sizeSpaceHolder: 185px;
+  --intHeader: calc(var(--componentSize) + var(--sortingGroupSize));
+  --totalWidth: calc(var(--intHeader) + var(--cols) * var(--colSize) + var(--sizeSpaceHolder));
+  max-width: var(--totalWidth);
+
+  margin: auto;
+
+  &.horizontal {
+    max-width: none;
+  }
+
+  &.sorted {
+    --sortingGroupSize: 3ch;
+  }
+
+}
+
diff --git a/src/app/complex/complex-results/complex-navigator/complex-navigator.component.ts b/src/app/complex/complex-results/complex-navigator/complex-navigator.component.ts
index 144590e5..484ff9f2 100644
--- a/src/app/complex/complex-results/complex-navigator/complex-navigator.component.ts
+++ b/src/app/complex/complex-results/complex-navigator/complex-navigator.component.ts
@@ -9,12 +9,12 @@ import {Observable, of} from 'rxjs';
 import {ComplexComponent} from '../../shared/model/complex-results/complex-component.model';
 import {map} from 'rxjs/operators';
 import {ComplexPortalService} from '../../shared/service/complex-portal.service';
-import {NavigatorStateService} from './service/state/complex-navigator-display.service';
+import {NavigatorComponentSorting, NavigatorStateService} from './service/state/complex-navigator-display.service';
 
 @Component({
   selector: 'cp-complex-navigator',
   templateUrl: './complex-navigator.component.html',
-  styleUrls: ['./complex-navigator.component.css']
+  styleUrls: ['./complex-navigator.component.scss']
 })
 
 export class ComplexNavigatorComponent {
@@ -28,6 +28,7 @@ export class ComplexNavigatorComponent {
   navigatorComponentsWithoutGrouping = computed(() => this.createNavigatorComplexes(this.complexSearch().elements, this.interactors()));
   navigatorComponentsGroupedByOrthologs = computed(() => this.createOrthologGroups(this.navigatorComponentsWithoutGrouping()));
   orthologGroupsAvailable = computed(() => this.navigatorComponentsGroupedByOrthologs().some(c => c instanceof NavigatorOrthologGroup));
+  isSorted = computed(() => this.state.componentsSorting() !== NavigatorComponentSorting.DEFAULT);
   navigatorComponents: INavigatorComponent[] = [];
 
   constructor(private complexPortalService: ComplexPortalService, private state: NavigatorStateService) {
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.css b/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.css
deleted file mode 100644
index 2e8a775f..00000000
--- a/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.css
+++ /dev/null
@@ -1,169 +0,0 @@
-.CN-table {
-  transform: rotateX(180deg); /* rotate the header's content to make it it the right sense (when removes, it is upside down) */
-  clip-path: fill-box;
-  margin-bottom: 0;
-}
-
-thead {
-  border: 0;
-  background-color: white;
-  border-right: 0 solid white;
-}
-
-.spaceHolderSorting {
-  width: 3ch;
-}
-
-/* Rotated complexes names */
-
-.spaceHolderHeaderOverflow {
-  min-width: 230px;
-  max-width: 230px;
-  position: sticky;
-  left: 0;
-  z-index: 4;
-  color: var(--primary);
-  background-color: var(--on-primary);
-  padding-top: 173px;
-  text-align: right;
-}
-
-.iconOrganism {
-  position: sticky;
-  text-align: center;
-  background-color: var(--primary);
-  color: var(--on-primary);
-  border-left: 1px solid white;
-  font-size: medium;
-  height: 60px;
-}
-
-.tilted-label {
-  text-overflow: ellipsis;
-  width: 28ch;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.CN-table .tableHeadOverflow tr {
-  --cols: 1;
-  --intHeader: 230px;
-  --parentWidth: 100%;
-  --sizeSpaceHolder: calc(var(--parentWidth) - 70px * var(--cols) - var(--intHeader));
-  display: grid;
-  grid-template-columns: var(--intHeader) repeat(auto-fit, 70px);
-  width: calc(var(--intHeader) + 70px * var(--cols) + var(--sizeSpaceHolder));
-  overflow: clip;
-}
-
-.CN-table .tableHeadOverflowWithSorting tr {
-  --cols: 1;
-  --intHeader: 230px;
-  --parentWidth: 100%;
-  --sizeSpaceHolder: calc(var(--parentWidth) - 70px * var(--cols) - var(--intHeader));
-  display: grid;
-  grid-template-columns: var(--intHeader) repeat(auto-fit, 70px);
-  width: calc(var(--intHeader) + 70px * var(--cols) + var(--sizeSpaceHolder));
-  overflow: visible;
-}
-
-.CN-table .tableHeadOverflow th.rotate {
-  position: relative;
-  width: 350px;
-  height: 51px !important;
-  color: var(--on-primary);
-  font-size: 14px;
-  text-align: left;
-  border: 1px solid white;
-  top: 70px;
-  left: -52px;
-  display: flex;
-  align-items: center;
-  align-content: center;
-  padding: 0;
-  transform: rotate(-45deg);
-  border-collapse: collapse;
-}
-
-.CN-table .tableHeadOverflow th.rotate a {
-  width: 100%;
-  height: 100%;
-  align-content: center;
-  background-color: var(--primary);
-  padding: 0 0 0 70px;
-  border: none;
-}
-
-.spaceHolder {
-  width: 185px;
-  background-color: var(--primary);
-  border-left: 1px solid white;
-}
-
-.interactorsHeader.overflow {
-  min-width: 230px;
-  max-width: 230px;
-  width: 230px;
-  position: sticky;
-  left: 0;
-  z-index: 4;
-  background-color: var(--on-primary);
-  height: 60px;
-  line-height: 70px;
-  text-align: right;
-  color: var(--primary);
-}
-
-/* Horizontal complexes name */
-
-.CN-table th.horizontal.interactorsHeader {
-  padding: 5px;
-  min-width: 130px;
-  max-width: 130px;
-  font-size: medium;
-  border-left: none;
-  text-align: right;
-  color: var(--primary);
-  background-color: var(--on-primary);
-}
-
-.horizontal-label {
-  text-align: center;
-  text-overflow: ellipsis;
-  width: 90%;
-  white-space: nowrap;
-  overflow: hidden;
-  margin: auto;
-  display: block;
-}
-
-.CN-table th.horizontal {
-  color: white;
-  background-color: var(--primary);
-  border-left: 1px solid white;
-  min-width: 80px;
-  max-width: 80px;
-  height: 35px;
-  font-size: 15px;
-}
-
-a:visited {
-  color: var(--on-primary);
-}
-
-a {
-  color: var(--on-primary);
-}
-
-.button {
-  padding: 0;
-  margin: 0;
-}
-
-.basketButton {
-  text-align: center;
-}
-
-.iconOrganismImg {
-  filter: var(--svg-colour-invert);
-}
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.html b/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.html
index d96b67a4..e05e55d4 100644
--- a/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.html
+++ b/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.html
@@ -5,15 +5,12 @@
     @if (complexes().length <= 6) {
       <thead class="tableHead">
       <tr>
-        @if (isSorted()) {
-          <th class="spaceHolderSorting"></th>
-        }
-        <th class="interactorsHeader horizontal">
+        <th class="interactorsHeader">
           Components
           <div class="shadow right" [class.visible]="shadowVisible()"></div>
         </th>
         @for (complex of complexes(); track complex.complexAC) {
-          <th class="horizontal" [class.predicted]="complex.predictedComplex">
+          <th [class.predicted]="complex.predictedComplex" class="horizontal">
             <div>
               <a [routerLink]="['/complex', complex.complexAC]"
                  target="_blank">
@@ -46,18 +43,14 @@
     }
     <!-- When table is overflowing -->
     @if (complexes().length > 6) {
-      <thead class="tableHeadOverflow"
-             [ngClass]="isSorted() ? 'tableHeadOverflowWithSorting' : 'tableHeadOverflow'">
-      <tr [style.--cols]="complexes().length"
-          [style.--intHeader]="isSorted() ? '256px':''"
-          [style.--sizeSpaceHolder]="'185px'">
-        <th class="spaceHolderHeaderOverflow" [style]="isSorted()? 'min-width: 256px; max-width: 256px;':''">
+      <thead class="tableHeadOverflow">
+      <tr>
+        <th class="spaceHolderHeaderOverflow">
             <div class="shadow right" [class.visible]="shadowVisible()"></div>
         </th>
         @for (complex of complexes(); track complex.complexAC) {
           <th class="rotate"
-              [class.predicted]="complex.predictedComplex"
-              [style.--cols]="complexes().length">
+              [class.predicted]="complex.predictedComplex">
             <a [routerLink]="['/complex', complex.complexAC]"
                [matTooltip]="complex.complexName+ ' - '+ complex.complexAC"
                target="_blank">
@@ -75,11 +68,8 @@
         <div class="spaceHolder" [class.predicted]="anyPredictedComplex()"></div>
       </tr>
       <!-- icons row -->
-      <tr [style.--cols]="complexes().length"
-          [style.--intHeader]="isSorted() ? '256px':''"
-          [style.--sizeSpaceHolder]="'185px'">
-        <th class="interactorsHeader overflow"
-            [style]="isSorted() ? 'min-width: 256px; max-width: 256px;':''">
+      <tr>
+        <th class="interactorsHeader overflow">
           Components
           <div class="shadow right" [class.visible]="shadowVisible()"></div>
         </th>
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.scss b/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.scss
new file mode 100644
index 00000000..41f4e92e
--- /dev/null
+++ b/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.scss
@@ -0,0 +1,147 @@
+.CN-table {
+  transform: rotateX(180deg); /* rotate the header's content to make it it the right sense (when removes, it is upside down) */
+  clip-path: fill-box;
+  margin: 0 !important;
+}
+
+thead {
+  border: 0;
+  background-color: white;
+  border-right: 0 solid white;
+}
+
+/* Rotated complexes names */
+
+.spaceHolderHeaderOverflow {
+  min-width: var(--intHeader);
+  max-width: var(--intHeader);
+  width: var(--intHeader);
+  position: sticky;
+  left: 0;
+  z-index: 4;
+  color: var(--primary);
+  background-color: var(--on-primary);
+  padding-top: 173px;
+  text-align: right;
+}
+
+.iconOrganism {
+  position: sticky;
+  text-align: center;
+  background-color: var(--primary);
+  color: var(--on-primary);
+  border-left: 1px solid white;
+  font-size: medium;
+  height: 60px;
+}
+
+.tilted-label {
+  text-overflow: ellipsis;
+  width: 28ch;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+
+.CN-table .tableHeadOverflow {
+  tr {
+    --parentWidth: 100%;
+    display: grid;
+    grid-template-columns: var(--intHeader) repeat(auto-fit, var(--colSize));
+    width: var(--totalWidth);
+  }
+
+  th.rotate {
+    position: relative;
+    width: 338px;
+    height: 51px !important;
+    color: var(--on-primary);
+    font-size: 14px;
+    text-align: left;
+    border: 1px solid white;
+    top: 76px;
+    left: -52px;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    padding: 0;
+    transform: rotate(-45deg);
+    border-collapse: collapse;
+
+    a {
+      width: 100%;
+      height: 100%;
+      align-content: center;
+      background-color: var(--primary);
+      padding: 0 0 0 var(--colSize);
+      border: none;
+    }
+  }
+}
+
+.spaceHolder {
+  width: var(--sizeSpaceHolder);
+  background-color: var(--primary);
+  border-left: 1px solid white;
+}
+
+.interactorsHeader {
+  min-width: var(--intHeader);
+  max-width: var(--intHeader);
+  width: var(--intHeader);
+  position: sticky;
+  left: 0;
+  z-index: 4;
+  background-color: var(--on-primary);
+  height: 60px;
+  line-height: var(--colSize);
+  text-align: right;
+  color: var(--primary);
+  padding: 5px;
+
+  font-size: medium;
+  border-left: none;
+}
+
+.horizontal-label {
+  text-align: center;
+  text-overflow: ellipsis;
+  width: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  margin: auto;
+  display: block;
+}
+
+.CN-table th.horizontal {
+  color: white;
+  background-color: var(--primary);
+  border-left: 1px solid white;
+  min-width: 80px;
+  max-width: 80px;
+  height: 35px;
+  font-size: 15px;
+}
+
+a:visited {
+  color: var(--on-primary);
+}
+
+a {
+  color: var(--on-primary);
+}
+
+.button {
+  padding: 0;
+  margin: 0;
+}
+
+.basketButton {
+  text-align: center;
+}
+
+.iconOrganismImg {
+  filter: var(--svg-colour-invert);
+}
+
+
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.ts b/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.ts
index 4c45b352..8b1e5d24 100644
--- a/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.ts
+++ b/src/app/complex/complex-results/complex-navigator/table-structure/table-header/table-header.component.ts
@@ -7,7 +7,7 @@ import {NavigatorComponentSorting, NavigatorStateService} from '../../service/st
 @Component({
   selector: 'cp-table-header',
   templateUrl: './table-header.component.html',
-  styleUrls: ['./table-header.component.css'],
+  styleUrls: ['./table-header.component.scss'],
 })
 
 export class TableHeaderComponent {
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.html b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.html
index b7a94abf..0081b38c 100644
--- a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.html
+++ b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.html
@@ -1,16 +1,15 @@
 <div class="Complex-navigator">
   <table class="interactors-table"
-         [ngClass]="{'inheritedWidth': complexes().length > 6}"
-         [style.--cols]="complexes().length">
+         [ngClass]="{'inheritedWidth': complexes().length > 6}">
     @for (interactor of navigatorComponents(); track i; let i = $index) {
       @if (!interactor.hidden) {
         <tr [class.ortholog]="!!interactor.isOrthologGroup && state.mergeOrthologs">
           @for (range of ranges; track range.value) {
             @if (range.start === i) {
               <td [attr.rowspan]="range.length" class="interactorSeparation"
-                  [matTooltip]="state.componentsSorting() === NavigatorComponentSorting.ORGANISM ? (range.value | species) : range.value">
+                  [matTooltip]="isOrganismSorting() ? (range.value | species) : range.value">
                 <div class="interactorNameContainer" [style.--rowspanSize]="range.length">
-                  @if (state.componentsSorting() === NavigatorComponentSorting.ORGANISM) {
+                  @if (isOrganismSorting()) {
                     {{ range.value | species:true }}
                   } @else {
                     {{ range.value }}
@@ -19,11 +18,8 @@
               </td>
             }
           }
-          <td class="interactorsColumn horizontalHeader"
-              [class.fixedWidth]="fixedWidth()"
-              [style]="ranges.length!=0 ? 'left:3ch':''">
-            <cp-table-interactor-name [interactor]="interactor">
-            </cp-table-interactor-name>
+          <td class="interactorsColumn">
+            <cp-table-interactor-name [interactor]="interactor"/>
             <!-- Icon for the expandable -->
             @if (interactor.hasSubComponents) {
               <div class="container">
@@ -41,7 +37,6 @@
           <!-- Interactors' stoichiometry -->
           @for (complex of navigatorComplexes; track complex.complex.complexAC) {
             <td class="intStoich"
-                [class.fixedWidth]="fixedWidth()"
                 [class.predicted]="complex.complex.predictedComplex">
               <cp-table-main-interactor
                 [complex]="complex"
@@ -71,25 +66,20 @@
                   </div>
                 </td>
               }
-              <td class="subComponentColumn horizontalHeader"
-                  [class.fixedWidth]="fixedWidth()"
+              <td class="subComponentColumn"
                   [style]="ranges.length!=0 ? 'left:3ch':''">
                 <div>
-                  <cp-table-interactor-name
-                    [interactor]="subComponent"
-                  ></cp-table-interactor-name>
+                  <cp-table-interactor-name [interactor]="subComponent"/>
                 </div>
               </td>
               @for (complex of navigatorComplexes; track complex.complex.complexAC) {
                 <td class="intStoich"
-                    [class.fixedWidth]="fixedWidth()"
                     [class.predicted]="complex.complex.predictedComplex">
                   <cp-table-subcomponent-interactor
                     [complex]="complex"
                     [i]="i"
                     [j]="j"
-                    [navigatorComponents]="navigatorComponents()"
-                  ></cp-table-subcomponent-interactor>
+                    [navigatorComponents]="navigatorComponents()"/>
                 </td>
               }
               @if (navigatorComplexes.length > 6) {
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.css b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.scss
similarity index 78%
rename from src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.css
rename to src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.scss
index 39141e3a..0e13e6dc 100644
--- a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.css
+++ b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.scss
@@ -1,60 +1,58 @@
 table {
-  --cols: 1;
   height: 1px;
   overflow: scroll;
   margin-bottom: 0;
 }
 
 .inheritedWidth {
-  width: calc(230px + var(--cols) * 70px + 183px);
+  width: var(--totalWidth)
 }
 
 /* interactors column */
 .interactorsColumn {
   position: sticky;
-  left: 0;
+  left: var(--sortingGroupSize);
   z-index: 5;
   height: 45px;
-  min-width: 114px;
-  max-width: 114px;
   padding: 5px;
   text-align: end;
   color: #0e6f76;
   font-weight: bold;
   background: inherit;
-}
 
-.interactorsColumn.fixedWidth {
-  min-width: 230px;
-  max-width: 230px;
+  width: var(--componentSize);
+  min-width: var(--componentSize);
+  max-width: var(--componentSize);
 }
 
+
 .interactorsColumn a {
   font-weight: normal;
 }
 
 .intStoich {
   height: 100%;
-  max-width: 70px;
-  min-width: 70px;
+  width: var(--colSize);
+  min-width: var(--colSize);
+  max-width: var(--colSize);
   font-size: medium;
   text-align: end;
   z-index: 1;
 }
 
-.intStoich.fixedWidth {
-  width: 70px;
-}
+
+
+
 
 i:not(.small) {
   font-size: large;
 }
 
-tr:nth-child(even) {
+tr:nth-child(odd) {
   background-color: #f7f7f7;
 }
 
-tr:nth-child(odd) {
+tr:nth-child(even) {
   background-color: #fff;
 }
 
@@ -63,15 +61,15 @@ a, a:visited {
 }
 
 .spaceHolder {
-  width: 183px;
+  width: var(--sizeSpaceHolder);
 }
 
 .subComponentColumn {
   left: 0;
   z-index: 30;
   height: 45px;
-  min-width: 230px;
-  max-width: 230px;
+  min-width: var(--intHeader);
+  max-width: var(--intHeader);
   padding: 5px;
   text-align: end;
   color: #0e6f76;
@@ -115,12 +113,13 @@ a, a:visited {
 /* Interactors sorting label*/
 
 .interactorSeparation {
-  max-width: 3ch;
-  min-width: 3ch;
+  max-width: var(--sortingGroupSize);
+  min-width: var(--sortingGroupSize);
+  width: var(--sortingGroupSize);
   background-color: #0e6f76;
   border: 1px solid white;
   overflow: hidden;
-  width: 1%;
+
   text-align: -webkit-center;
   position: sticky;
   z-index: 31;
@@ -141,24 +140,30 @@ a, a:visited {
   height: calc(var(--rowspanSize) * 48px);
   white-space: nowrap;
   overflow: hidden;
+  position: relative;
+
+  .sticky-span {
+    position: sticky;
+    top: 50%
+  }
 
 }
 
+
 .container {
   font-size: 14px;
 }
 
-.horizontalHeader {
-  min-width: 114px;
-  max-width: 114px;
-}
 
-.horizontalHeader.fixedWidth {
-  width: 230px;
-  min-width: 230px;
-  max-width: 230px;
+::ng-deep.horizontal {
+
+  .intStoich {
+    width: auto;
+    max-width: none;
+  }
 }
 
+
 /*/* NEEDED FOR SAFARI BROWSER*/
 @supports (-webkit-hyphens:none) {
   .interactorsColumn {
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.ts b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.ts
index 248a6f4b..f553f281 100644
--- a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.ts
+++ b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-column.component.ts
@@ -17,7 +17,7 @@ interface Range {
 @Component({
   selector: 'cp-table-interactor-column',
   templateUrl: './table-interactor-column.component.html',
-  styleUrls: ['./table-interactor-column.component.css']
+  styleUrls: ['./table-interactor-column.component.scss']
 })
 export class TableInteractorColumnComponent {
   complexes = input<Complex[]>([]);
@@ -25,7 +25,7 @@ export class TableInteractorColumnComponent {
   shadowVisible = input<boolean>(false);
 
   isSorting = computed(() => this.state.componentsSorting() !== NavigatorComponentSorting.DEFAULT);
-  fixedWidth = computed(() => this.complexes().length > 6);
+  isOrganismSorting = computed(() => this.state.componentsSorting() === NavigatorComponentSorting.ORGANISM);
 
   navigatorComplexes: NavigatorComplex[];
   ranges: Range[] = [];
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-external-link/table-interactor-external-link.component.css b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-external-link/table-interactor-external-link.component.scss
similarity index 100%
rename from src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-external-link/table-interactor-external-link.component.css
rename to src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-external-link/table-interactor-external-link.component.scss
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-external-link/table-interactor-external-link.component.ts b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-external-link/table-interactor-external-link.component.ts
index 3ffad4b4..0513cdd7 100644
--- a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-external-link/table-interactor-external-link.component.ts
+++ b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-external-link/table-interactor-external-link.component.ts
@@ -4,7 +4,7 @@ import {INavigatorComponent} from '../../model/navigator-component.model';
 @Component({
   selector: 'cp-table-interactor-external-link',
   templateUrl: './table-interactor-external-link.component.html',
-  styleUrls: ['./table-interactor-external-link.component.css']
+  styleUrls: ['./table-interactor-external-link.component.scss']
 })
 export class TableInteractorExternalLinkComponent implements OnInit {
   interactor = input.required<INavigatorComponent>();
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-name/table-interactor-name.component.css b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-name/table-interactor-name.component.scss
similarity index 100%
rename from src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-name/table-interactor-name.component.css
rename to src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-name/table-interactor-name.component.scss
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-name/table-interactor-name.component.ts b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-name/table-interactor-name.component.ts
index 0ad1b6f3..e82d5463 100644
--- a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-name/table-interactor-name.component.ts
+++ b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-name/table-interactor-name.component.ts
@@ -7,7 +7,7 @@ import {NavigatorStateService} from '../../../service/state/complex-navigator-di
 @Component({
   selector: 'cp-table-interactor-name',
   templateUrl: './table-interactor-name.component.html',
-  styleUrls: ['./table-interactor-name.component.css']
+  styleUrls: ['./table-interactor-name.component.scss']
 })
 export class TableInteractorNameComponent {
 
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-stoichiometry/table-interactor-stoichiometry.component.css b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-stoichiometry/table-interactor-stoichiometry.component.scss
similarity index 100%
rename from src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-stoichiometry/table-interactor-stoichiometry.component.css
rename to src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-stoichiometry/table-interactor-stoichiometry.component.scss
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-stoichiometry/table-interactor-stoichiometry.component.ts b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-stoichiometry/table-interactor-stoichiometry.component.ts
index 91f6eb55..1dd7d9f1 100644
--- a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-stoichiometry/table-interactor-stoichiometry.component.ts
+++ b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-interactor-stoichiometry/table-interactor-stoichiometry.component.ts
@@ -3,7 +3,7 @@ import {Component, input} from '@angular/core';
 @Component({
   selector: 'cp-table-interactor-stoichiometry',
   templateUrl: './table-interactor-stoichiometry.component.html',
-  styleUrls: ['./table-interactor-stoichiometry.component.css']
+  styleUrls: ['./table-interactor-stoichiometry.component.scss']
 })
 export class TableInteractorStoichiometryComponent {
   stoichiometryText = input<string>();
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-main-interactor/table-main-interactor.component.css b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-main-interactor/table-main-interactor.component.scss
similarity index 100%
rename from src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-main-interactor/table-main-interactor.component.css
rename to src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-main-interactor/table-main-interactor.component.scss
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-main-interactor/table-main-interactor.component.ts b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-main-interactor/table-main-interactor.component.ts
index 4217414f..e418dac7 100644
--- a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-main-interactor/table-main-interactor.component.ts
+++ b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-main-interactor/table-main-interactor.component.ts
@@ -6,7 +6,7 @@ import {INavigatorComponent} from '../../model/navigator-component.model';
 @Component({
   selector: 'cp-table-main-interactor',
   templateUrl: './table-main-interactor.component.html',
-  styleUrls: ['./table-main-interactor.component.css']
+  styleUrls: ['./table-main-interactor.component.scss']
 })
 export class TableMainInteractorComponent {
   complex = input<NavigatorComplex>();
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-subcomponent-interactor/table-subcomponent-interactor.component.css b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-subcomponent-interactor/table-subcomponent-interactor.component.scss
similarity index 100%
rename from src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-subcomponent-interactor/table-subcomponent-interactor.component.css
rename to src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-subcomponent-interactor/table-subcomponent-interactor.component.scss
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-subcomponent-interactor/table-subcomponent-interactor.component.ts b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-subcomponent-interactor/table-subcomponent-interactor.component.ts
index 36444a2e..5071d294 100644
--- a/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-subcomponent-interactor/table-subcomponent-interactor.component.ts
+++ b/src/app/complex/complex-results/complex-navigator/table-structure/table-interactor-column/table-subcomponent-interactor/table-subcomponent-interactor.component.ts
@@ -6,7 +6,7 @@ import {INavigatorComponent, INavigatorSubComponent} from '../../model/navigator
 @Component({
   selector: 'cp-table-subcomponent-interactor',
   templateUrl: './table-subcomponent-interactor.component.html',
-  styleUrls: ['./table-subcomponent-interactor.component.css']
+  styleUrls: ['./table-subcomponent-interactor.component.scss']
 })
 
 export class TableSubcomponentInteractorComponent {
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-structure.component.css b/src/app/complex/complex-results/complex-navigator/table-structure/table-structure.component.scss
similarity index 92%
rename from src/app/complex/complex-results/complex-navigator/table-structure/table-structure.component.css
rename to src/app/complex/complex-results/complex-navigator/table-structure/table-structure.component.scss
index 875562ab..e4bb0127 100644
--- a/src/app/complex/complex-results/complex-navigator/table-structure/table-structure.component.css
+++ b/src/app/complex/complex-results/complex-navigator/table-structure/table-structure.component.scss
@@ -11,7 +11,7 @@
 }
 
 .scroller {
-  overflow-x: scroll;
+  overflow-x: auto;
   overflow-y: hidden;
 }
 
diff --git a/src/app/complex/complex-results/complex-navigator/table-structure/table-structure.component.ts b/src/app/complex/complex-results/complex-navigator/table-structure/table-structure.component.ts
index c488b9f4..6df637ea 100644
--- a/src/app/complex/complex-results/complex-navigator/table-structure/table-structure.component.ts
+++ b/src/app/complex/complex-results/complex-navigator/table-structure/table-structure.component.ts
@@ -10,7 +10,7 @@ import {NavigatorComponentSorting, NavigatorStateService} from '../service/state
 @Component({
   selector: 'cp-table-structure',
   templateUrl: './table-structure.component.html',
-  styleUrls: ['./table-structure.component.css']
+  styleUrls: ['./table-structure.component.scss']
 })
 export class TableStructureComponent implements AfterViewInit {
   complexSearch = input<ComplexSearchResult>();
@@ -25,13 +25,12 @@ export class TableStructureComponent implements AfterViewInit {
   scrollStart = input<number>(39);
 
   @ViewChild('header') headerDiv: ElementRef<HTMLDivElement>;
-  shadowTopVisible = true;
+  shadowTopVisible = false;
   shadowRightVisible = true;
   shadowLeftVisible = false;
 
   sortedComplexes = computed(() =>
     this.sortComplexBySimilarityClustering(this.complexSearch().elements, this.navigatorComponents()));
-  isSorting = computed(() => this.state.componentsSorting() !== NavigatorComponentSorting.DEFAULT);
 
   constructor(public state: NavigatorStateService) {
   }
@@ -39,6 +38,7 @@ export class TableStructureComponent implements AfterViewInit {
   ngAfterViewInit(): void {
     const header = this.headerDiv.nativeElement;
     this.setHorizontalShadowVisibility(header);
+    window.addEventListener('scroll', () => this.shadowTopVisible = header.getBoundingClientRect().top === this.scrollStart());
   }
 
   private calculateSimilarity(complex1: Complex, complex2: Complex, navigatorComponents: INavigatorComponent[]) {
diff --git a/src/app/complex/complex-results/complex-paginator/complex-paginator.component.css b/src/app/complex/complex-results/complex-paginator/complex-paginator.component.scss
similarity index 100%
rename from src/app/complex/complex-results/complex-paginator/complex-paginator.component.css
rename to src/app/complex/complex-results/complex-paginator/complex-paginator.component.scss
diff --git a/src/app/complex/complex-results/complex-paginator/complex-paginator.component.ts b/src/app/complex/complex-results/complex-paginator/complex-paginator.component.ts
index a057d400..0fd0e107 100644
--- a/src/app/complex/complex-results/complex-paginator/complex-paginator.component.ts
+++ b/src/app/complex/complex-results/complex-paginator/complex-paginator.component.ts
@@ -3,7 +3,7 @@ import {Component, Input, OnChanges, OnInit, output} from '@angular/core';
 @Component({
   selector: 'cp-complex-paginator',
   templateUrl: './complex-paginator.component.html',
-  styleUrls: ['./complex-paginator.component.css']
+  styleUrls: ['./complex-paginator.component.scss']
 })
 export class ComplexPaginatorComponent implements OnInit, OnChanges {
   private _lastPageIndex: number;
diff --git a/src/app/complex/complex-results/complex-results.component.css b/src/app/complex/complex-results/complex-results.component.scss
similarity index 100%
rename from src/app/complex/complex-results/complex-results.component.css
rename to src/app/complex/complex-results/complex-results.component.scss
diff --git a/src/app/complex/complex-results/complex-results.component.ts b/src/app/complex/complex-results/complex-results.component.ts
index af984eb9..96310eae 100644
--- a/src/app/complex/complex-results/complex-results.component.ts
+++ b/src/app/complex/complex-results/complex-results.component.ts
@@ -13,7 +13,7 @@ import {MatTab, MatTabChangeEvent} from '@angular/material/tabs';
 @Component({
   selector: 'cp-complex-results',
   templateUrl: './complex-results.component.html',
-  styleUrls: ['./complex-results.component.css'],
+  styleUrls: ['./complex-results.component.scss'],
 })
 export class ComplexResultsComponent implements OnInit, AfterViewInit {
   query: string;
@@ -88,13 +88,13 @@ export class ComplexResultsComponent implements OnInit, AfterViewInit {
    * Prepare query params to build new URL after filter or pagination has changed
    */
   reloadPage(): void {
-    const queryParams = {...this.state.params()};
-    console.log(queryParams);
-    queryParams['query'] = this.query;
-    queryParams['page'] = this.currentPageIndex;
-    queryParams['minConfidence'] = this.confidenceFilter;
-    queryParams['displayMode'] = this._displayType;
-
+    const queryParams = {
+      query: this.query,
+      page: this.currentPageIndex,
+      minConfidence: this.confidenceFilter,
+      displayMode: this._displayType,
+      ...this.state.params()
+    };
     Object.keys(this.filters).forEach(filter => this.encodeURL(this.filters[filter], filter, queryParams));
     console.log('navigate from results');
     this.router.navigate([], {queryParams});
diff --git a/src/app/complex/shared/pipe/species.pipe.ts b/src/app/complex/shared/pipe/species.pipe.ts
index 7c68b08d..d30a944d 100644
--- a/src/app/complex/shared/pipe/species.pipe.ts
+++ b/src/app/complex/shared/pipe/species.pipe.ts
@@ -15,6 +15,7 @@ export class SpeciesPipe implements PipeTransform {
   ]);
 
   transform(value: string, short = false): string {
+    if (!value) return value;
     const words = value.replace(';', '').split(' ');
     return this.exceptions.get(value) || (
       short ?
diff --git a/src/app/download/download.component.css b/src/app/download/download.component.scss
similarity index 100%
rename from src/app/download/download.component.css
rename to src/app/download/download.component.scss
diff --git a/src/app/download/download.component.ts b/src/app/download/download.component.ts
index 8320c5d7..60fbc9e0 100644
--- a/src/app/download/download.component.ts
+++ b/src/app/download/download.component.ts
@@ -8,7 +8,7 @@ import {Title} from '@angular/platform-browser';
 @Component({
   selector: 'cp-download',
   templateUrl: './download.component.html',
-  styleUrls: ['./download.component.css']
+  styleUrls: ['./download.component.scss']
 })
 export class DownloadComponent implements OnInit, AfterViewInit {
 
diff --git a/src/app/footer/footer.component.css b/src/app/footer/footer.component.scss
similarity index 100%
rename from src/app/footer/footer.component.css
rename to src/app/footer/footer.component.scss
diff --git a/src/app/footer/footer.component.ts b/src/app/footer/footer.component.ts
index 296e5015..d2b7024e 100644
--- a/src/app/footer/footer.component.ts
+++ b/src/app/footer/footer.component.ts
@@ -4,7 +4,7 @@ import {Component, input, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-local-footer',
   templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.css']
+  styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent implements OnInit {
 
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.scss
similarity index 100%
rename from src/app/home/home.component.css
rename to src/app/home/home.component.scss
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 40dcc74f..b4d2de7a 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -9,7 +9,7 @@ import {environment} from '../../environments/environment';
 @Component({
   selector: 'cp-home',
   templateUrl: './home.component.html',
-  styleUrls: ['./home.component.css']
+  styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit, AfterViewInit {
 
diff --git a/src/app/home/newsletter-subscription/newsletter-subscription.component.css b/src/app/home/newsletter-subscription/newsletter-subscription.component.scss
similarity index 86%
rename from src/app/home/newsletter-subscription/newsletter-subscription.component.css
rename to src/app/home/newsletter-subscription/newsletter-subscription.component.scss
index 3e46d6c2..6b7411e8 100644
--- a/src/app/home/newsletter-subscription/newsletter-subscription.component.css
+++ b/src/app/home/newsletter-subscription/newsletter-subscription.component.scss
@@ -1,5 +1,5 @@
 /*noinspection CssUnknownTarget*/
-@import "//cdn-images.mailchimp.com/embedcode/slim-10_7.css";
+@import "//cdn-images.mailchimp.com/embedcode/slim-10_7.scss";
 
 h3 {
   border-bottom:solid;
diff --git a/src/app/home/newsletter-subscription/newsletter-subscription.component.ts b/src/app/home/newsletter-subscription/newsletter-subscription.component.ts
index 6c1b88bc..29bc56e0 100644
--- a/src/app/home/newsletter-subscription/newsletter-subscription.component.ts
+++ b/src/app/home/newsletter-subscription/newsletter-subscription.component.ts
@@ -3,7 +3,7 @@ import {Component, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-newsletter-subscription',
   templateUrl: './newsletter-subscription.component.html',
-  styleUrls: ['./newsletter-subscription.component.css']
+  styleUrls: ['./newsletter-subscription.component.scss']
 })
 export class NewsletterSubscriptionComponent implements OnInit {
 
diff --git a/src/app/home/tile-menu/tile-menu.component.css b/src/app/home/tile-menu/tile-menu.component.scss
similarity index 100%
rename from src/app/home/tile-menu/tile-menu.component.css
rename to src/app/home/tile-menu/tile-menu.component.scss
diff --git a/src/app/home/tile-menu/tile-menu.component.ts b/src/app/home/tile-menu/tile-menu.component.ts
index 95aa4861..39629beb 100644
--- a/src/app/home/tile-menu/tile-menu.component.ts
+++ b/src/app/home/tile-menu/tile-menu.component.ts
@@ -7,7 +7,7 @@ import {AnalyticsService} from '../../shared/google-analytics/service/analytics.
 @ Component({
   selector: 'cp-tile-menu',
   templateUrl: './tile-menu.component.html',
-  styleUrls: ['./tile-menu.component.css']
+  styleUrls: ['./tile-menu.component.scss']
 })
 export class TileMenuComponent implements AfterViewInit {
 
diff --git a/src/app/home/twitter-display/twitter-display.component.css b/src/app/home/twitter-display/twitter-display.component.scss
similarity index 100%
rename from src/app/home/twitter-display/twitter-display.component.css
rename to src/app/home/twitter-display/twitter-display.component.scss
diff --git a/src/app/home/twitter-display/twitter-display.component.ts b/src/app/home/twitter-display/twitter-display.component.ts
index e86b700c..8457b56b 100644
--- a/src/app/home/twitter-display/twitter-display.component.ts
+++ b/src/app/home/twitter-display/twitter-display.component.ts
@@ -10,7 +10,7 @@ declare global {
 @Component({
   selector: 'cp-twitter-display',
   templateUrl: './twitter-display.component.html',
-  styleUrls: ['./twitter-display.component.css']
+  styleUrls: ['./twitter-display.component.scss']
 })
 export class TwitterDisplayComponent implements OnInit {
 
diff --git a/src/app/navigation/about/about.component.css b/src/app/navigation/about/about.component.scss
similarity index 100%
rename from src/app/navigation/about/about.component.css
rename to src/app/navigation/about/about.component.scss
diff --git a/src/app/navigation/about/about.component.ts b/src/app/navigation/about/about.component.ts
index 7f8c1e60..55b140ed 100644
--- a/src/app/navigation/about/about.component.ts
+++ b/src/app/navigation/about/about.component.ts
@@ -7,7 +7,7 @@ import {Router} from '@angular/router';
 @Component({
   selector: 'cp-about',
   templateUrl: './about.component.html',
-  styleUrls: ['./about.component.css']
+  styleUrls: ['./about.component.scss']
 })
 export class AboutComponent implements OnInit {
 
diff --git a/src/app/navigation/documentation/documentation.component.css b/src/app/navigation/documentation/documentation.component.scss
similarity index 100%
rename from src/app/navigation/documentation/documentation.component.css
rename to src/app/navigation/documentation/documentation.component.scss
diff --git a/src/app/navigation/documentation/documentation.component.ts b/src/app/navigation/documentation/documentation.component.ts
index 6833541f..d893489f 100644
--- a/src/app/navigation/documentation/documentation.component.ts
+++ b/src/app/navigation/documentation/documentation.component.ts
@@ -6,7 +6,7 @@ import {environment} from '../../../environments/environment';
 @Component({
   selector: 'cp-documentation',
   templateUrl: './documentation.component.html',
-  styleUrls: ['./documentation.component.css']
+  styleUrls: ['./documentation.component.scss']
 })
 export class DocumentationComponent implements OnInit {
 
diff --git a/src/app/ontologies/ontologies.component.css b/src/app/ontologies/ontologies.component.scss
similarity index 100%
rename from src/app/ontologies/ontologies.component.css
rename to src/app/ontologies/ontologies.component.scss
diff --git a/src/app/ontologies/ontologies.component.ts b/src/app/ontologies/ontologies.component.ts
index 8143442c..ad22745a 100644
--- a/src/app/ontologies/ontologies.component.ts
+++ b/src/app/ontologies/ontologies.component.ts
@@ -6,7 +6,7 @@ import {Title} from '@angular/platform-browser';
 @Component({
   selector: 'cp-ontologies',
   templateUrl: './ontologies.component.html',
-  styleUrls: ['./ontologies.component.css']
+  styleUrls: ['./ontologies.component.scss']
 })
 export class OntologiesComponent implements OnInit {
 
diff --git a/src/app/search/home-search/search.component.css b/src/app/search/home-search/search.component.scss
similarity index 100%
rename from src/app/search/home-search/search.component.css
rename to src/app/search/home-search/search.component.scss
diff --git a/src/app/search/home-search/search.component.ts b/src/app/search/home-search/search.component.ts
index ffdf48a8..ac15e04e 100644
--- a/src/app/search/home-search/search.component.ts
+++ b/src/app/search/home-search/search.component.ts
@@ -5,7 +5,7 @@ import {SearchService} from '../service/search.service';
 @Component({
   selector: 'cp-search',
   templateUrl: './search.component.html',
-  styleUrls: ['./search.component.css']
+  styleUrls: ['./search.component.scss']
 })
 export class SearchComponent implements OnInit {
 
diff --git a/src/app/search/local-search/local-search.component.css b/src/app/search/local-search/local-search.component.scss
similarity index 100%
rename from src/app/search/local-search/local-search.component.css
rename to src/app/search/local-search/local-search.component.scss
diff --git a/src/app/search/local-search/local-search.component.ts b/src/app/search/local-search/local-search.component.ts
index ae637c83..b4ed257e 100644
--- a/src/app/search/local-search/local-search.component.ts
+++ b/src/app/search/local-search/local-search.component.ts
@@ -8,7 +8,7 @@ import {SearchService} from '../service/search.service';
 @Component({
   selector: 'cp-local-search',
   templateUrl: './local-search.component.html',
-  styleUrls: ['./local-search.component.css']
+  styleUrls: ['./local-search.component.scss']
 })
 export class LocalSearchComponent implements OnInit {
   private _display: boolean;
diff --git a/src/app/shared/loading-indicators/progress-bar/progress-bar.component.css b/src/app/shared/loading-indicators/progress-bar/progress-bar.component.scss
similarity index 100%
rename from src/app/shared/loading-indicators/progress-bar/progress-bar.component.css
rename to src/app/shared/loading-indicators/progress-bar/progress-bar.component.scss
diff --git a/src/app/shared/loading-indicators/progress-bar/progress-bar.component.ts b/src/app/shared/loading-indicators/progress-bar/progress-bar.component.ts
index c6544aed..15c815a6 100644
--- a/src/app/shared/loading-indicators/progress-bar/progress-bar.component.ts
+++ b/src/app/shared/loading-indicators/progress-bar/progress-bar.component.ts
@@ -3,7 +3,7 @@ import {Component, OnInit} from '@angular/core';
 @Component({
   selector: 'cp-progress-bar',
   templateUrl: './progress-bar.component.html',
-  styleUrls: ['./progress-bar.component.css']
+  styleUrls: ['./progress-bar.component.scss']
 })
 export class ProgressBarComponent implements OnInit {
   private static show: boolean;
diff --git a/src/app/shared/loading-indicators/progress-spinner/progress-spinner.component.css b/src/app/shared/loading-indicators/progress-spinner/progress-spinner.component.scss
similarity index 100%
rename from src/app/shared/loading-indicators/progress-spinner/progress-spinner.component.css
rename to src/app/shared/loading-indicators/progress-spinner/progress-spinner.component.scss
diff --git a/src/app/shared/loading-indicators/progress-spinner/progress-spinner.component.ts b/src/app/shared/loading-indicators/progress-spinner/progress-spinner.component.ts
index e8548935..1e91b7e7 100644
--- a/src/app/shared/loading-indicators/progress-spinner/progress-spinner.component.ts
+++ b/src/app/shared/loading-indicators/progress-spinner/progress-spinner.component.ts
@@ -7,7 +7,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
   imports: [MatProgressSpinnerModule],
   selector: 'cp-progress-spinner',
   templateUrl: './progress-spinner.component.html',
-  styleUrls: ['./progress-spinner.component.css']
+  styleUrls: ['./progress-spinner.component.scss']
 })
 export class ProgressSpinnerComponent implements OnInit {
   private static show: boolean;