diff --git a/Dockerfile b/Dockerfile
index e6e823e..62e7515 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -9,6 +9,7 @@ RUN yarn build
 FROM bitnami/nginx:1.24 as production-stage
 WORKDIR /app
 COPY --from=build-stage /app/dist .
+COPY src/assets/scss /app/assets
 COPY nginx.conf /opt/bitnami/nginx/conf/server_blocks/my_server_block.conf
 COPY start.sh .
 USER 0
diff --git a/nginx.conf b/nginx.conf
index 4469e3d..5979eba 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -19,7 +19,7 @@
       add_header X-Content-Type-Options nosniff;
     }
 
-    location ~ \.(css|js)$ {
+    location ~ \.(css|js|scss)$ {
       expires max;
       add_header Cache-Control "public";
       add_header X-Content-Type-Options nosniff;
diff --git a/src/assets/images/logo-negotiator.svg b/src/assets/images/footer-bbmri.svg
similarity index 100%
rename from src/assets/images/logo-negotiator.svg
rename to src/assets/images/footer-bbmri.svg
diff --git a/src/assets/images/footer-eucaim.png b/src/assets/images/footer-eucaim.png
new file mode 100644
index 0000000..2ea97ee
Binary files /dev/null and b/src/assets/images/footer-eucaim.png differ
diff --git a/src/assets/images/bbmri-logo.png b/src/assets/images/home-bbmri.png
similarity index 100%
rename from src/assets/images/bbmri-logo.png
rename to src/assets/images/home-bbmri.png
diff --git a/src/assets/images/home-eucaim.png b/src/assets/images/home-eucaim.png
new file mode 100644
index 0000000..2ea97ee
Binary files /dev/null and b/src/assets/images/home-eucaim.png differ
diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg
deleted file mode 100644
index ce65209..0000000
--- a/src/assets/images/logo.svg
+++ /dev/null
@@ -1,464 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-
-<svg
-   version="1.1"
-   id="Ebene_1"
-   x="0px"
-   y="0px"
-   viewBox="0 0 138.00001 38.000003"
-   xml:space="preserve"
-   sodipodi:docname="logo.svg"
-   width="138"
-   height="38"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-   id="defs175" /><sodipodi:namedview
-   id="namedview173"
-   pagecolor="#ffffff"
-   bordercolor="#666666"
-   borderopacity="1.0"
-   inkscape:showpageshadow="2"
-   inkscape:pageopacity="0.0"
-   inkscape:pagecheckerboard="0"
-   inkscape:deskcolor="#d1d1d1"
-   showgrid="false"
-   inkscape:zoom="2.64574"
-   inkscape:cx="80.317794"
-   inkscape:cy="48.190676"
-   inkscape:window-width="1865"
-   inkscape:window-height="1147"
-   inkscape:window-x="55"
-   inkscape:window-y="29"
-   inkscape:window-maximized="1"
-   inkscape:current-layer="Ebene_1" />
-<style
-   type="text/css"
-   id="style2">
-	.st0{fill:#004481;}
-	.st1{fill:#EB690B;}
-	.st2{fill:#4B4B4D;}
-</style>
-<g
-   id="g24"
-   transform="translate(-11.983399,-27.428264)">
-	<g
-   id="g6">
-		
-			<rect
-   x="23.1"
-   y="57.5"
-   transform="matrix(0.308,-0.9514,0.9514,0.308,-34.9265,67.3876)"
-   class="st0"
-   width="11.5"
-   height="0.40000001"
-   id="rect4" />
-	</g>
-	<g
-   id="g10">
-		<polygon
-   class="st0"
-   points="27.1,42.7 30.4,52.3 30.8,52.2 27.5,42.5 27.3,42.8 38.5,46.9 38.7,47 38.8,46.8 42.1,38.4 41.7,38.2 38.3,46.6 38.6,46.5 27.4,42.4 27,42.2 "
-   id="polygon8" />
-	</g>
-	<g
-   id="g14">
-		
-			<rect
-   x="40.200001"
-   y="46.200001"
-   transform="matrix(0.8978,-0.4403,0.4403,0.8978,-18.0861,22.9421)"
-   class="st0"
-   width="0.40000001"
-   height="8.3999996"
-   id="rect12" />
-	</g>
-	<g
-   id="g18">
-		<polygon
-   class="st0"
-   points="27.1,42.5 27.2,42.4 17,48.8 17.2,49.1 27.5,42.8 27.5,42.7 32.6,31.7 32.2,31.5 "
-   id="polygon16" />
-	</g>
-	<g
-   id="g22">
-		
-			<rect
-   x="21.799999"
-   y="34.599998"
-   transform="matrix(0.3818,-0.9243,0.9243,0.3818,-23.7387,45.2739)"
-   class="st0"
-   width="0.40000001"
-   height="11.6"
-   id="rect20" />
-	</g>
-</g>
-<g
-   id="g48"
-   transform="translate(-11.983399,-27.428264)">
-	<g
-   id="g36">
-		<circle
-   class="st0"
-   cx="27.1"
-   cy="63.200001"
-   r="1.4"
-   id="circle26" />
-		<circle
-   class="st0"
-   cx="41.900002"
-   cy="38.299999"
-   r="3.0999999"
-   id="circle28" />
-		<circle
-   class="st0"
-   cx="42.200001"
-   cy="54.200001"
-   r="1.3"
-   id="circle30" />
-		<circle
-   class="st0"
-   cx="17.1"
-   cy="48.900002"
-   r="1.9"
-   id="circle32" />
-		<circle
-   class="st0"
-   cx="16.6"
-   cy="38.200001"
-   r="2.4000001"
-   id="circle34" />
-	</g>
-	<g
-   id="g46">
-		<rect
-   x="29.799999"
-   y="28.9"
-   class="st1"
-   width="5.1999998"
-   height="5.1999998"
-   id="rect38" />
-		<rect
-   x="37.299999"
-   y="45.400002"
-   class="st1"
-   width="2.5"
-   height="2.5"
-   id="rect40" />
-		<rect
-   x="28.200001"
-   y="49.799999"
-   class="st1"
-   width="4.8000002"
-   height="4.8000002"
-   id="rect42" />
-		<rect
-   x="25.700001"
-   y="41"
-   class="st1"
-   width="3.3"
-   height="3.3"
-   id="rect44" />
-	</g>
-</g>
-<g
-   id="g70"
-   transform="translate(-11.983399,-27.428264)">
-	<g
-   id="g52">
-		
-			<rect
-   x="23.1"
-   y="57.5"
-   transform="matrix(0.308,-0.9514,0.9514,0.308,-34.9119,67.4076)"
-   class="st0"
-   width="11.5"
-   height="0.40000001"
-   id="rect50" />
-	</g>
-	<g
-   id="g56">
-		<polygon
-   class="st0"
-   points="27.2,42.7 30.4,52.3 30.9,52.2 27.6,42.5 27.3,42.8 38.5,46.9 38.7,47 38.8,46.8 42.2,38.4 41.8,38.2 38.4,46.6 38.6,46.5 27.4,42.4 27,42.2 "
-   id="polygon54" />
-	</g>
-	<g
-   id="g60">
-		
-			<rect
-   x="40.200001"
-   y="46.299999"
-   transform="matrix(0.8979,-0.4403,0.4403,0.8979,-18.0852,22.9483)"
-   class="st0"
-   width="0.40000001"
-   height="8.3999996"
-   id="rect58" />
-	</g>
-	<g
-   id="g64">
-		<polygon
-   class="st0"
-   points="17,48.8 17.3,49.1 27.5,42.8 27.5,42.7 27.6,42.7 32.6,31.7 32.2,31.5 27.2,42.5 27.2,42.4 "
-   id="polygon62" />
-	</g>
-	<g
-   id="g68">
-		
-			<rect
-   x="21.799999"
-   y="34.599998"
-   transform="matrix(0.3819,-0.9242,0.9242,0.3819,-23.7267,45.2834)"
-   class="st0"
-   width="0.40000001"
-   height="11.6"
-   id="rect66" />
-	</g>
-</g>
-<g
-   id="g94"
-   transform="translate(-11.983399,-27.428264)">
-	<g
-   id="g82">
-		<circle
-   class="st0"
-   cx="27.1"
-   cy="63.200001"
-   r="1.4"
-   id="circle72" />
-		<path
-   class="st0"
-   d="m 38.9,38.3 c 0,1.7 1.4,3.1 3.1,3.1 1.7,0 3.1,-1.4 3.1,-3.1 0,-1.7 -1.4,-3.1 -3.1,-3.1 -1.7,0 -3.1,1.4 -3.1,3.1 z"
-   id="path74" />
-		<circle
-   class="st0"
-   cx="42.299999"
-   cy="54.200001"
-   r="1.3"
-   id="circle76" />
-		<circle
-   class="st0"
-   cx="17.1"
-   cy="48.900002"
-   r="1.9"
-   id="circle78" />
-		<circle
-   class="st0"
-   cx="16.6"
-   cy="38.200001"
-   r="2.4000001"
-   id="circle80" />
-	</g>
-	<g
-   id="g92">
-		<rect
-   x="29.799999"
-   y="29"
-   class="st1"
-   width="5.1999998"
-   height="5.1999998"
-   id="rect84" />
-		<rect
-   x="37.299999"
-   y="45.400002"
-   class="st1"
-   width="2.5"
-   height="2.5"
-   id="rect86" />
-		<rect
-   x="28.200001"
-   y="49.799999"
-   class="st1"
-   width="4.8000002"
-   height="4.8000002"
-   id="rect88" />
-		<rect
-   x="25.700001"
-   y="41"
-   class="st1"
-   width="3.3"
-   height="3.3"
-   id="rect90" />
-	</g>
-</g>
-<g
-   id="g116"
-   transform="translate(-11.983399,-27.428264)">
-	<g
-   id="g98">
-		
-			<rect
-   x="23.200001"
-   y="57.5"
-   transform="matrix(0.308,-0.9514,0.9514,0.308,-34.8785,67.4519)"
-   class="st0"
-   width="11.5"
-   height="0.40000001"
-   id="rect96" />
-	</g>
-	<g
-   id="g102">
-		<polygon
-   class="st0"
-   points="27.2,42.7 30.5,52.3 30.9,52.2 27.6,42.5 27.3,42.8 38.5,46.9 38.7,47 38.8,46.8 42.2,38.4 41.8,38.2 38.4,46.6 38.7,46.5 27.5,42.4 27,42.2 "
-   id="polygon100" />
-	</g>
-	<g
-   id="g106">
-		
-			<rect
-   x="40.200001"
-   y="46.299999"
-   transform="matrix(0.8979,-0.4403,0.4403,0.8979,-18.0804,22.969)"
-   class="st0"
-   width="0.40000001"
-   height="8.3999996"
-   id="rect104" />
-	</g>
-	<g
-   id="g110">
-		<polygon
-   class="st0"
-   points="27.2,42.5 27.3,42.4 17.1,48.8 17.3,49.1 27.5,42.8 27.6,42.7 32.7,31.7 32.3,31.5 "
-   id="polygon108" />
-	</g>
-	<g
-   id="g114">
-		
-			<rect
-   x="21.799999"
-   y="34.599998"
-   transform="matrix(0.3819,-0.9242,0.9242,0.3819,-23.6979,45.3258)"
-   class="st0"
-   width="0.40000001"
-   height="11.6"
-   id="rect112" />
-	</g>
-</g>
-<g
-   id="g140"
-   transform="translate(-11.983399,-27.428264)">
-	<g
-   id="g128">
-		<circle
-   class="st0"
-   cx="27.200001"
-   cy="63.200001"
-   r="1.4"
-   id="circle118" />
-		<path
-   class="st0"
-   d="m 38.9,38.3 c 0,1.7 1.4,3.1 3.1,3.1 1.7,0 3.1,-1.4 3.1,-3.1 0,-1.7 -1.4,-3.1 -3.1,-3.1 -1.7,0 -3.1,1.4 -3.1,3.1 z"
-   id="path120" />
-		<circle
-   class="st0"
-   cx="42.299999"
-   cy="54.200001"
-   r="1.3"
-   id="circle122" />
-		<circle
-   class="st0"
-   cx="17.200001"
-   cy="48.900002"
-   r="1.9"
-   id="circle124" />
-		<circle
-   class="st0"
-   cx="16.700001"
-   cy="38.200001"
-   r="2.4000001"
-   id="circle126" />
-	</g>
-	<g
-   id="g138">
-		<rect
-   x="29.799999"
-   y="29"
-   class="st1"
-   width="5.1999998"
-   height="5.1999998"
-   id="rect130" />
-		<rect
-   x="37.400002"
-   y="45.400002"
-   class="st1"
-   width="2.5"
-   height="2.5"
-   id="rect132" />
-		<rect
-   x="28.299999"
-   y="49.799999"
-   class="st1"
-   width="4.8000002"
-   height="4.8000002"
-   id="rect134" />
-		<rect
-   x="25.799999"
-   y="41"
-   class="st1"
-   width="3.3"
-   height="3.3"
-   id="rect136" />
-	</g>
-</g>
-<g
-   id="g170"
-   transform="translate(-11.424225,-17.140131)">
-	<g
-   id="g164">
-		<g
-   id="g162">
-			<path
-   class="st2"
-   d="m 58.7,41.5 c -0.3,0.5 -0.7,0.9 -1.2,1.1 -0.5,0.3 -1.1,0.4 -1.7,0.5 -0.6,0.1 -1.2,0.1 -1.7,0.1 h -3.9 v -12 h 4.1 c 0.6,0 1.2,0.1 1.7,0.2 0.5,0.1 1,0.3 1.3,0.5 0.4,0.2 0.7,0.5 0.9,0.9 0.2,0.4 0.3,0.8 0.3,1.3 0,0.6 -0.1,1.1 -0.4,1.5 -0.3,0.4 -0.7,0.8 -1.3,1 0.7,0.2 1.3,0.5 1.7,1 0.4,0.5 0.7,1.1 0.7,1.8 0,1 -0.2,1.7 -0.5,2.1 z M 55.4,33.4 C 55,33.2 54.5,33.1 53.9,33.1 h -1.1 v 3 h 1.1 c 0.7,0 1.2,-0.1 1.6,-0.4 C 55.9,35.4 56,35 56,34.5 56,34 55.8,33.7 55.4,33.4 Z m 0.6,5 c -0.4,-0.3 -1,-0.5 -1.7,-0.5 h -1.5 v 3.5 h 1.5 c 0.8,0 1.3,-0.2 1.7,-0.5 0.4,-0.3 0.6,-0.7 0.6,-1.3 0,-0.5 -0.2,-0.9 -0.6,-1.2 z"
-   id="path142" />
-			<path
-   class="st2"
-   d="m 68.8,41.5 c -0.3,0.5 -0.7,0.9 -1.2,1.1 -0.5,0.3 -1.1,0.4 -1.7,0.5 -0.6,0.1 -1.2,0.1 -1.7,0.1 h -3.9 v -12 h 4.1 c 0.6,0 1.2,0.1 1.7,0.2 0.5,0.1 1,0.3 1.3,0.5 0.4,0.2 0.7,0.5 0.9,0.9 0.2,0.4 0.3,0.8 0.3,1.3 0,0.6 -0.1,1.1 -0.4,1.5 -0.3,0.4 -0.7,0.8 -1.3,1 0.7,0.2 1.3,0.5 1.7,1 0.4,0.5 0.7,1.1 0.7,1.8 0,1 -0.2,1.7 -0.5,2.1 z M 65.5,33.4 C 65.1,33.2 64.6,33.1 64,33.1 h -1.1 v 3 H 64 c 0.7,0 1.2,-0.1 1.6,-0.4 C 66,35.4 66.1,35 66.1,34.5 66,34 65.9,33.7 65.5,33.4 Z m 0.6,5 c -0.4,-0.3 -1,-0.5 -1.7,-0.5 h -1.5 v 3.5 h 1.5 c 0.8,0 1.3,-0.2 1.7,-0.5 0.4,-0.3 0.6,-0.7 0.6,-1.3 0,-0.5 -0.2,-0.9 -0.6,-1.2 z"
-   id="path144" />
-			<path
-   class="st2"
-   d="m 82.6,43.3 c 0,-1.6 -0.1,-3.2 -0.1,-4.8 0,-1.6 -0.2,-3.2 -0.2,-4.6 v 0 L 79,43.4 H 76.4 L 73,33.8 v 0 c -0.1,1.4 -0.1,3 -0.2,4.6 -0.1,1.6 -0.1,3.3 -0.1,4.9 h -2.3 c 0,-2 0.1,-4 0.2,-6 0.1,-2 0.3,-4 0.5,-6 h 3.6 l 3.1,9.1 v 0 l 3,-9.1 h 3.6 c 0.2,2 0.4,4.1 0.5,6.1 0.1,2 0.2,4 0.2,6 0,-0.1 -2.5,-0.1 -2.5,-0.1 z"
-   id="path146" />
-			<path
-   class="st2"
-   d="m 93.3,43.3 -3,-5 h -1.2 v 5 h -2.6 v -12 H 91 c 0.7,0 1.3,0.1 1.8,0.2 0.5,0.1 1,0.3 1.4,0.6 0.4,0.3 0.7,0.6 0.9,1 0.2,0.4 0.3,0.9 0.3,1.4 0,0.8 -0.2,1.5 -0.7,2.1 -0.5,0.6 -1.1,1 -2,1.2 l 3.5,5.5 z m -1.1,-9.7 c -0.3,-0.3 -0.8,-0.4 -1.5,-0.4 h -1.6 v 3.2 h 1.3 c 0.7,0 1.3,-0.2 1.7,-0.5 0.4,-0.3 0.6,-0.7 0.6,-1.3 0,-0.4 -0.1,-0.7 -0.5,-1 z"
-   id="path148" />
-			<path
-   class="st2"
-   d="m 97.2,43.3 v -12 h 2.6 v 12 z"
-   id="path150" />
-			<path
-   class="st2"
-   d="m 101.1,39.6 v -1.9 h 4.9 v 1.9 z"
-   id="path152" />
-			<path
-   class="st2"
-   d="m 107.2,43.3 v -12 h 7.6 v 1.9 h -5 v 3 h 4.3 V 38 h -4.3 v 3.4 h 5.1 v 1.9 z"
-   id="path154" />
-			<path
-   class="st2"
-   d="m 123.4,43.3 -3,-5 h -1.2 v 5 h -2.6 v -12 h 4.4 c 0.7,0 1.3,0.1 1.8,0.2 0.5,0.1 1,0.3 1.4,0.6 0.4,0.3 0.7,0.6 0.9,1 0.2,0.4 0.3,0.9 0.3,1.4 0,0.8 -0.2,1.5 -0.7,2.1 -0.5,0.6 -1.1,1 -2,1.2 l 3.5,5.5 z m -1.1,-9.7 c -0.3,-0.3 -0.8,-0.4 -1.5,-0.4 h -1.6 v 3.2 h 1.3 c 0.7,0 1.3,-0.2 1.7,-0.5 0.4,-0.3 0.6,-0.7 0.6,-1.3 0,-0.4 -0.1,-0.7 -0.5,-1 z"
-   id="path156" />
-			<path
-   class="st2"
-   d="m 127.3,43.3 v -12 h 2.6 v 12 z"
-   id="path158" />
-			<path
-   class="st2"
-   d="m 139.5,43.3 c -0.6,0.1 -1.2,0.2 -1.8,0.2 -2.1,0 -3.7,-0.5 -4.8,-1.6 -1.1,-1 -1.7,-2.5 -1.7,-4.5 0,-1 0.2,-1.9 0.5,-2.7 0.3,-0.8 0.8,-1.5 1.3,-2 0.6,-0.5 1.3,-1 2.1,-1.2 0.8,-0.3 1.7,-0.4 2.7,-0.4 0.6,0 1.1,0.1 1.7,0.2 0.6,0.1 1.1,0.3 1.6,0.5 l -0.6,1.9 c -0.4,-0.2 -0.9,-0.3 -1.3,-0.5 -0.5,-0.1 -0.9,-0.2 -1.4,-0.2 -0.6,0 -1.2,0.1 -1.7,0.3 -0.5,0.2 -0.9,0.5 -1.2,0.9 -0.3,0.4 -0.6,0.8 -0.7,1.4 -0.2,0.5 -0.2,1.1 -0.2,1.7 0,1.4 0.3,2.4 1,3.2 0.7,0.8 1.7,1.2 3,1.2 0.5,0 0.9,0 1.4,-0.1 0.5,-0.1 0.9,-0.2 1.4,-0.4 l 0.5,1.8 c -0.6,0.1 -1.2,0.2 -1.8,0.3 z"
-   id="path160" />
-		</g>
-	</g>
-	<g
-   id="g168">
-		<path
-   class="st2"
-   d="m 148.4,32.2 c 0,1.2 -1,2.2 -2.3,2.2 -1.3,0 -2.4,-0.9 -2.4,-2.2 0,-1.2 1,-2.1 2.4,-2.1 1.3,0 2.3,0.9 2.3,2.1 z m -4.1,0 c 0,0.9 0.8,1.7 1.8,1.7 1,0 1.7,-0.8 1.7,-1.7 0,-0.9 -0.7,-1.7 -1.8,-1.7 -1.1,0 -1.7,0.8 -1.7,1.7 z m 1.4,1.1 h -0.5 v -2.1 c 0.2,0 0.5,-0.1 0.9,-0.1 0.4,0 0.6,0.1 0.8,0.2 0.1,0.1 0.2,0.3 0.2,0.5 0,0.2 -0.2,0.4 -0.5,0.5 v 0 c 0.2,0.1 0.3,0.2 0.4,0.5 0.1,0.3 0.1,0.5 0.2,0.5 h -0.6 c -0.1,-0.1 -0.1,-0.3 -0.2,-0.5 0,-0.2 -0.2,-0.3 -0.5,-0.3 h -0.3 z m 0,-1.2 h 0.2 c 0.3,0 0.5,-0.1 0.5,-0.3 0,-0.2 -0.2,-0.3 -0.5,-0.3 -0.1,0 -0.2,0 -0.3,0 v 0.6 z"
-   id="path166" />
-	</g>
-</g>
-</svg>
diff --git a/src/assets/images/nav-bar-bbmri.svg b/src/assets/images/nav-bar-bbmri.svg
new file mode 100644
index 0000000..2d1e925
--- /dev/null
+++ b/src/assets/images/nav-bar-bbmri.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="Ebene_1" x="0" y="0" viewBox="0 0 138 38" xml:space="preserve" width="138" height="38" xmlns="http://www.w3.org/2000/svg"><style type="text/css" id="style2">.st0{fill:#004481}.st1{fill:#eb690b}.st2{fill:#4b4b4d}</style><g id="g24" transform="translate(-11.983 -27.428)"><g id="g6"><path transform="rotate(-72.061 28.86 57.702)" class="st0" id="rect4" d="M23.1 57.5h11.5v.4H23.1z"/></g><g id="g10"><path class="st0" id="polygon8" d="m27.1 42.7 3.3 9.6.4-.1-3.3-9.7-.2.3 11.2 4.1.2.1.1-.2 3.3-8.4-.4-.2-3.4 8.4.3-.1-11.2-4.1-.4-.2z"/></g><g id="g14"><path transform="rotate(-26.124 40.4 50.45)" class="st0" id="rect12" d="M40.2 46.2h.4v8.4h-.4z"/></g><g id="g18"><path class="st0" id="polygon16" d="m27.1 42.5.1-.1L17 48.8l.2.3 10.3-6.3v-.1l5.1-11-.4-.2z"/></g><g id="g22"><path transform="rotate(-67.556 21.972 40.38)" class="st0" id="rect20" d="M21.8 34.6h.4v11.6h-.4z"/></g></g><g id="g48" transform="translate(-11.983 -27.428)"><g id="g36"><circle class="st0" cx="27.1" cy="63.2" r="1.4" id="circle26"/><circle class="st0" cx="41.9" cy="38.3" r="3.1" id="circle28"/><circle class="st0" cx="42.2" cy="54.2" r="1.3" id="circle30"/><circle class="st0" cx="17.1" cy="48.9" r="1.9" id="circle32"/><circle class="st0" cx="16.6" cy="38.2" r="2.4" id="circle34"/></g><g id="g46"><path class="st1" id="rect38" d="M29.8 28.9H35v5.2h-5.2z"/><path class="st1" id="rect40" d="M37.3 45.4h2.5v2.5h-2.5z"/><path class="st1" id="rect42" d="M28.2 49.8H33v4.8h-4.8z"/><path class="st1" id="rect44" d="M25.7 41H29v3.3h-3.3z"/></g></g><g id="g70" transform="translate(-11.983 -27.428)"><g id="g52"><path transform="rotate(-72.061 28.881 57.702)" class="st0" id="rect50" d="M23.1 57.5h11.5v.4H23.1z"/></g><g id="g56"><path class="st0" id="polygon54" d="m27.2 42.7 3.2 9.6.5-.1-3.3-9.7-.3.3 11.2 4.1.2.1.1-.2 3.4-8.4-.4-.2-3.4 8.4.2-.1-11.2-4.1-.4-.2z"/></g><g id="g60"><path transform="rotate(-26.122 40.416 50.45)" class="st0" id="rect58" d="M40.2 46.3h.4v8.4h-.4z"/></g><g id="g64"><path class="st0" id="polygon62" d="m17 48.8.3.3 10.2-6.3v-.1h.1l5-11-.4-.2-5 11v-.1z"/></g><g id="g68"><path transform="rotate(-67.549 21.991 40.38)" class="st0" id="rect66" d="M21.8 34.6h.4v11.6h-.4z"/></g></g><g id="g94" transform="translate(-11.983 -27.428)"><g id="g82"><circle class="st0" cx="27.1" cy="63.2" r="1.4" id="circle72"/><path class="st0" d="M38.9 38.3c0 1.7 1.4 3.1 3.1 3.1s3.1-1.4 3.1-3.1-1.4-3.1-3.1-3.1-3.1 1.4-3.1 3.1" id="path74"/><circle class="st0" cx="42.3" cy="54.2" r="1.3" id="circle76"/><circle class="st0" cx="17.1" cy="48.9" r="1.9" id="circle78"/><circle class="st0" cx="16.6" cy="38.2" r="2.4" id="circle80"/></g><g id="g92"><path class="st1" id="rect84" d="M29.8 29H35v5.2h-5.2z"/><path class="st1" id="rect86" d="M37.3 45.4h2.5v2.5h-2.5z"/><path class="st1" id="rect88" d="M28.2 49.8H33v4.8h-4.8z"/><path class="st1" id="rect90" d="M25.7 41H29v3.3h-3.3z"/></g></g><g id="g116" transform="translate(-11.983 -27.428)"><g id="g98"><path transform="rotate(-72.061 28.929 57.701)" class="st0" id="rect96" d="M23.2 57.5h11.5v.4H23.2z"/></g><g id="g102"><path class="st0" id="polygon100" d="m27.2 42.7 3.3 9.6.4-.1-3.3-9.7-.3.3 11.2 4.1.2.1.1-.2 3.4-8.4-.4-.2-3.4 8.4.3-.1-11.2-4.1-.5-.2z"/></g><g id="g106"><path transform="rotate(-26.122 40.463 50.45)" class="st0" id="rect104" d="M40.2 46.3h.4v8.4h-.4z"/></g><g id="g110"><path class="st0" id="polygon108" d="m27.2 42.5.1-.1-10.2 6.4.2.3 10.2-6.3.1-.1 5.1-11-.4-.2z"/></g><g id="g114"><path transform="rotate(-67.549 22.037 40.38)" class="st0" id="rect112" d="M21.8 34.6h.4v11.6h-.4z"/></g></g><g id="g140" transform="translate(-11.983 -27.428)"><g id="g128"><circle class="st0" cx="27.2" cy="63.2" r="1.4" id="circle118"/><path class="st0" d="M38.9 38.3c0 1.7 1.4 3.1 3.1 3.1s3.1-1.4 3.1-3.1-1.4-3.1-3.1-3.1-3.1 1.4-3.1 3.1" id="path120"/><circle class="st0" cx="42.3" cy="54.2" r="1.3" id="circle122"/><circle class="st0" cx="17.2" cy="48.9" r="1.9" id="circle124"/><circle class="st0" cx="16.7" cy="38.2" r="2.4" id="circle126"/></g><g id="g138"><path class="st1" id="rect130" d="M29.8 29H35v5.2h-5.2z"/><path class="st1" id="rect132" d="M37.4 45.4h2.5v2.5h-2.5z"/><path class="st1" id="rect134" d="M28.3 49.8h4.8v4.8h-4.8z"/><path class="st1" id="rect136" d="M25.8 41h3.3v3.3h-3.3z"/></g></g><g id="g170" transform="translate(-11.424 -17.14)"><g id="g164"><g id="g162"><path class="st2" d="M58.7 41.5c-.3.5-.7.9-1.2 1.1-.5.3-1.1.4-1.7.5s-1.2.1-1.7.1h-3.9v-12h4.1c.6 0 1.2.1 1.7.2s1 .3 1.3.5q.6.3.9.9c.2.4.3.8.3 1.3 0 .6-.1 1.1-.4 1.5s-.7.8-1.3 1c.7.2 1.3.5 1.7 1s.7 1.1.7 1.8c0 1-.2 1.7-.5 2.1m-3.3-8.1q-.6-.3-1.5-.3h-1.1v3h1.1c.7 0 1.2-.1 1.6-.4s.5-.7.5-1.2-.2-.8-.6-1.1m.6 5c-.4-.3-1-.5-1.7-.5h-1.5v3.5h1.5c.8 0 1.3-.2 1.7-.5s.6-.7.6-1.3q0-.75-.6-1.2" id="path142"/><path class="st2" d="M68.8 41.5c-.3.5-.7.9-1.2 1.1-.5.3-1.1.4-1.7.5s-1.2.1-1.7.1h-3.9v-12h4.1c.6 0 1.2.1 1.7.2s1 .3 1.3.5q.6.3.9.9c.2.4.3.8.3 1.3 0 .6-.1 1.1-.4 1.5s-.7.8-1.3 1c.7.2 1.3.5 1.7 1s.7 1.1.7 1.8c0 1-.2 1.7-.5 2.1m-3.3-8.1q-.6-.3-1.5-.3h-1.1v3H64c.7 0 1.2-.1 1.6-.4s.5-.7.5-1.2c-.1-.5-.2-.8-.6-1.1m.6 5c-.4-.3-1-.5-1.7-.5h-1.5v3.5h1.5c.8 0 1.3-.2 1.7-.5s.6-.7.6-1.3q0-.75-.6-1.2" id="path144"/><path class="st2" d="M82.6 43.3c0-1.6-.1-3.2-.1-4.8s-.2-3.2-.2-4.6L79 43.4h-2.6L73 33.8c-.1 1.4-.1 3-.2 4.6s-.1 3.3-.1 4.9h-2.3c0-2 .1-4 .2-6s.3-4 .5-6h3.6l3.1 9.1 3-9.1h3.6c.2 2 .4 4.1.5 6.1s.2 4 .2 6c0-.1-2.5-.1-2.5-.1" id="path146"/><path class="st2" d="m93.3 43.3-3-5h-1.2v5h-2.6v-12H91c.7 0 1.3.1 1.8.2s1 .3 1.4.6.7.6.9 1 .3.9.3 1.4c0 .8-.2 1.5-.7 2.1s-1.1 1-2 1.2l3.5 5.5zm-1.1-9.7c-.3-.3-.8-.4-1.5-.4h-1.6v3.2h1.3c.7 0 1.3-.2 1.7-.5s.6-.7.6-1.3c0-.4-.1-.7-.5-1" id="path148"/><path class="st2" d="M97.2 43.3v-12h2.6v12z" id="path150"/><path class="st2" d="M101.1 39.6v-1.9h4.9v1.9z" id="path152"/><path class="st2" d="M107.2 43.3v-12h7.6v1.9h-5v3h4.3V38h-4.3v3.4h5.1v1.9z" id="path154"/><path class="st2" d="m123.4 43.3-3-5h-1.2v5h-2.6v-12h4.4c.7 0 1.3.1 1.8.2s1 .3 1.4.6.7.6.9 1 .3.9.3 1.4c0 .8-.2 1.5-.7 2.1s-1.1 1-2 1.2l3.5 5.5zm-1.1-9.7c-.3-.3-.8-.4-1.5-.4h-1.6v3.2h1.3c.7 0 1.3-.2 1.7-.5s.6-.7.6-1.3c0-.4-.1-.7-.5-1" id="path156"/><path class="st2" d="M127.3 43.3v-12h2.6v12z" id="path158"/><path class="st2" d="M139.5 43.3c-.6.1-1.2.2-1.8.2-2.1 0-3.7-.5-4.8-1.6-1.1-1-1.7-2.5-1.7-4.5 0-1 .2-1.9.5-2.7s.8-1.5 1.3-2c.6-.5 1.3-1 2.1-1.2.8-.3 1.7-.4 2.7-.4.6 0 1.1.1 1.7.2s1.1.3 1.6.5l-.6 1.9c-.4-.2-.9-.3-1.3-.5-.5-.1-.9-.2-1.4-.2-.6 0-1.2.1-1.7.3q-.75.3-1.2.9c-.3.4-.6.8-.7 1.4-.2.5-.2 1.1-.2 1.7 0 1.4.3 2.4 1 3.2q1.05 1.2 3 1.2c.5 0 .9 0 1.4-.1s.9-.2 1.4-.4l.5 1.8z" id="path160"/></g></g><g id="g168"><path class="st2" d="M148.4 32.2c0 1.2-1 2.2-2.3 2.2s-2.4-.9-2.4-2.2c0-1.2 1-2.1 2.4-2.1 1.3 0 2.3.9 2.3 2.1m-4.1 0c0 .9.8 1.7 1.8 1.7s1.7-.8 1.7-1.7-.7-1.7-1.8-1.7-1.7.8-1.7 1.7m1.4 1.1h-.5v-2.1c.2 0 .5-.1.9-.1s.6.1.8.2c.1.1.2.3.2.5s-.2.4-.5.5c.2.1.3.2.4.5s.1.5.2.5h-.6c-.1-.1-.1-.3-.2-.5 0-.2-.2-.3-.5-.3h-.3zm0-1.2h.2c.3 0 .5-.1.5-.3s-.2-.3-.5-.3h-.3v.6z" id="path166"/></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/images/nav-bar-eucaim.png b/src/assets/images/nav-bar-eucaim.png
new file mode 100644
index 0000000..cf53d2e
Binary files /dev/null and b/src/assets/images/nav-bar-eucaim.png differ
diff --git a/src/assets/scss/bbmri.scss b/src/assets/scss/bbmri.scss
deleted file mode 100644
index 975679f..0000000
--- a/src/assets/scss/bbmri.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-$theme-colors: (
-    "primary": #e95713,
-    "primary-light": #f37125,
-    "secondary": #003674,
-    "danger": #dc3545,
-    "warning": #e95713,
-    "info": #7c7c7c,
-    "light": #e7e7e7,
-    "dark": #3c3c3d,
-    "logo-grey": #4d4d4f
-);
-
-$body-color: #3c3c3d;
-
-$default-text-color: white;
-
-@import "node_modules/bootstrap/scss/bootstrap";
-
-body {
-    font-family: Calibri, Arial, sans-serif;
-}
-  
-.btn-primary {
-    color: white;
-}
-
-.btn-outline-light {
-    color: $dark;
-}
-
-.cursor-pointer {
-   cursor: pointer; 
-}
\ No newline at end of file
diff --git a/src/assets/scss/theme-bbmri.scss b/src/assets/scss/theme-bbmri.scss
new file mode 100644
index 0000000..6287918
--- /dev/null
+++ b/src/assets/scss/theme-bbmri.scss
@@ -0,0 +1,60 @@
+$theme-colors: (
+    "primary": #26336B,
+    "secondary": #26336B,
+
+    "primary-text": #3c3c3d,
+    "secondary-text": #3c3c3d,
+    "login-tittle-text": #4d4d4f,
+
+    "navbar-background": #e7e7e7,
+    "navbar-text": #3c3c3d,
+    "navbar-active-text": #e95713,
+    "navbar-welcome-text": #3c3c3d,
+    "navbar-button-outline": #003674,
+
+    "sort-filter-button-outline": #003674,
+    "sort-filter-dropdown-text": #3c3c3d,
+    "sort-filter-clear-button-outline": #dc3545,
+
+    "search-results-text": #3c3c3d,
+    "display-view-button-color": #f37125,
+
+    "card-title-text": #3c3c3d,
+    "table-header-text": #3c3c3d,
+    "table-title-text": #3c3c3d,
+
+    "status-badge": #f37125,
+
+    "danger": #dc3545,
+    "warning": #e95713,
+    "info": #7c7c7c,
+    "light": #e7e7e7,
+    "dark": #3c3c3d,
+
+    // BBMRI-ERIC Color palette
+    "example-1": #003674,
+    "example-2": #e95713,
+    "example-3": #3c3c3d,
+);
+
+$body-color: #3c3c3d;
+
+$default-text-color: white;
+
+@import "node_modules/bootstrap/scss/bootstrap";
+
+body {
+    font-family: Calibri, Arial, sans-serif;
+}
+  
+.btn-primary {
+    color: white;
+}
+
+.btn-outline-light {
+    color: $dark;
+}
+
+.cursor-pointer {
+   cursor: pointer; 
+}
\ No newline at end of file
diff --git a/src/assets/scss/theme-eucaim.scss b/src/assets/scss/theme-eucaim.scss
new file mode 100644
index 0000000..b754b02
--- /dev/null
+++ b/src/assets/scss/theme-eucaim.scss
@@ -0,0 +1,61 @@
+$theme-colors: (
+    "primary": #26336B,
+    "secondary": #416097,
+
+    "primary-text": #26336B,
+    "secondary-text": #416097,
+    "login-tittle-text": #26336B,
+
+    "navbar-background": #416097,
+    "navbar-text": #e7e7e7,
+    "navbar-active-text": #81CDEE,
+    "navbar-welcome-text": #e7e7e7,
+    "navbar-button-outline": #e7e7e7,
+
+    "sort-filter-button-outline": #26336B,
+    "sort-filter-dropdown-text": #26336B,
+    "sort-filter-clear-button-outline": #dc3545,
+
+    "search-results-text": #26336B,
+    "display-view-button-color": #F18918,
+
+    "card-title-text": #26336B,
+    "table-header-text": #26336B,
+    "table-title-text": #416097,
+
+    "status-badge": #F18918,
+
+    "danger": #dc3545,
+    "warning": #e95713,
+    "info": #7c7c7c,
+    "light": #e7e7e7,
+    "dark": #3c3c3d,
+
+    // EUCAIM Color palette
+    "example-1": #81CDEE,
+    "example-2": #416097,
+    "example-3": #F18918,
+    "example-4": #26336B,
+);
+
+$body-color: #3c3c3d;
+
+$default-text-color: white;
+
+@import "node_modules/bootstrap/scss/bootstrap";
+
+body {
+    font-family: Calibri, Arial, sans-serif;
+}
+  
+.btn-primary {
+    color: white;
+}
+
+.btn-outline-light {
+    color: $dark;
+}
+
+.cursor-pointer {
+   cursor: pointer; 
+}
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index b93ccc0..21af9ba 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,6 +1,6 @@
 <template>
     <footer
-        class="bottom-0 p-0 w-100"
+        class="bottom-0 p-0 w-100 text-primary-text"
     >
         <hr class="mt-10 mb-10">
         <div class="row d-flex flex-column flex-md-row">
@@ -9,7 +9,7 @@
                     <img 
                         width="150"
                         height="40"
-                        src="../assets/images/logo-negotiator.svg"
+                        :src="logoSrc"
                         alt="logo negotiator"
                     >
                 </a>
@@ -18,24 +18,24 @@
                 <span>
                     Follow Us:
                 </span>
-                <a href="https://www.linkedin.com/company/bbmri-eric" class="link-dark ms-2">
+                <a v-if="isFooterFollowUsVisible" href="https://www.linkedin.com/company/bbmri-eric" class="link-dark ms-2">
                     <i class="bi bi-linkedin mr-3" />
                 </a>
-                <a href="https://twitter.com/BBMRIERIC" class="link-dark ms-2">
+                <a v-if="isFooterFollowUsVisible" href="https://twitter.com/BBMRIERIC" class="link-dark ms-2">
                     <i class="bi bi-twitter-x" />
                 </a>
-                <a href="https://www.bbmri-eric.eu/bbmri-eric/bbmri-eric-podcast/" class="link-dark ms-2">
+                <a v-if="isFooterFollowUsVisible" href="https://www.bbmri-eric.eu/bbmri-eric/bbmri-eric-podcast/" class="link-dark ms-2">
                     <i class="bi bi-mic-fill"></i>
                 </a>
                 <div class="mt-2 mb-2 mb-md-0">
-                    <a href="https://github.com/BBMRI-ERIC/negotiator-v3-frontend" class="link-dark">  <i class="bi bi-github" />
+                    <a href="https://github.com/BBMRI-ERIC/negotiator-v3-frontend" class="text-primary-text">  <i class="bi bi-github" />
                         GitHub
                     </a>
                 </div>
             </div>
           
             <div class="col text-center">
-                <a class="link-dark" href="https://www.bbmri-eric.eu/wp-content/uploads/BBMRI-ERIC_work-program_2022-2024_DIGITAL.pdf" >
+                <a class="link-dark text-primary-text" href="https://www.bbmri-eric.eu/wp-content/uploads/BBMRI-ERIC_work-program_2022-2024_DIGITAL.pdf" >
                     <img                
                         width="22"
                         height="22"
@@ -45,8 +45,8 @@
                     >
                     Work Programme    
                 </a>
-                <div class="ms-md-3 mt-2"> 
-                    <button type="button" class="btn btn-light ms-md-5" href="https://www.bbmri-eric.eu/news-event/"> Subscribe To Our Newsletter</button>
+                <div v-if="isFooterFollowUsVisible" class="ms-md-3 mt-2"> 
+                    <button type="button" class="btn btn-light ms-md-5 text-primary-text" href="https://www.bbmri-eric.eu/news-event/"> Subscribe To Our Newsletter</button>
                 </div>
             </div>
             <div>
@@ -65,6 +65,22 @@
     </footer>
 </template>
 
+<script>
+import activeTheme from "../config/theme.js" 
+import bbmriLogo from '../assets/images/footer-bbmri.svg'
+import eucaimLogo from '../assets/images/footer-eucaim.png'
+
+export default {
+  name: "FooterPage",
+  data() {
+    return {
+      logoSrc: activeTheme.activeLogosFiles === 'bbmri' ? bbmriLogo : eucaimLogo,
+      isFooterFollowUsVisible: activeTheme.isFooterFollowUsVisible
+    }
+  }
+}
+</script>
+
 <style scoped>
 a {
   text-decoration: none;
diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue
index 26aa83c..b49b174 100644
--- a/src/components/NavigationBar.vue
+++ b/src/components/NavigationBar.vue
@@ -1,13 +1,14 @@
 <template>
   <nav
     v-if="oidcIsAuthenticated"
-    class="navbar fixed-top navbar-expand-lg navbar-light bg-light"
+    class="navbar fixed-top navbar-expand-lg navbar-light bg-navbar-background"
   >
     <div class="container-fluid">
       <img
-        src="../assets/images/logo.svg"
+        :src="logoSrc"
         height="34"
         class="me-2"
+        alt="nav-bar-logo"
       >
       <button
         class="navbar-toggler"
@@ -32,10 +33,10 @@
           >
             <router-link
               class="nav-link active nav-option"
-              :class="$route.path ===  '/admin' ? 'text-primary' : ''"
+              :class="$route.path ===  '/admin' ? 'text-navbar-active-text' : 'text-navbar-text'"
               to="/admin"
             >
-              <i class="bi bi-house-gear" />
+              <i class="bi bi-clipboard-check" />
               Review requests
             </router-link>
           </li>
@@ -45,10 +46,10 @@
           >
             <router-link
               class="nav-link active nav-option"
-              :class="$route.path ===  '/researcher' ? 'text-primary-light' : ''"
+              :class="$route.path ===  '/researcher' ? 'text-navbar-active-text' : 'text-navbar-text'"
               to="/researcher"
             >
-              <i class="bi bi-folder2" />
+              <i class="bi bi-chat-left-dots" />
               Your negotiations
             </router-link>
           </li>
@@ -58,23 +59,23 @@
           >
             <router-link
               class="nav-link active nav-option"
-              :class="$route.path ===  '/biobanker' ? 'text-primary-light' : ''"
+              :class="$route.path ===  '/biobanker' ? 'text-navbar-active-text' : 'text-navbar-text'"
               to="/biobanker"
             >
-              <i class="bi bi-hospital" />
+              <i class="bi bi-bank" />
               Your biobank
             </router-link>
           </li>
         </ul>
         <span
           v-if="oidcIsAuthenticated"
-          class="navbar-text me-2 "
+          class="navbar-text me-2 text-navbar-welcome-text"
         >
           Welcome back {{ oidcUser.name }}
         </span>
         <button
           v-if="oidcIsAuthenticated"
-          class="btn btn-outline-secondary me-2"
+          class="btn btn-outline-navbar-button-outline me-2"
           aria-current="page"
           @click.stop.prevent="signOutOidc"
         >
@@ -88,12 +89,16 @@
 <script>
 import { mapActions, mapGetters } from "vuex"
 import { ROLES } from "@/config/consts"
+import activeTheme from "../config/theme.js" 
+import bbmriLogo from '../assets/images/nav-bar-bbmri.svg'
+import eucaimLogo from '../assets/images/nav-bar-eucaim.png'
 
 export default {
   name: "NavigationBar",
   data() {
     return {
-      roles: []
+      roles: [],
+      logoSrc: activeTheme.activeLogosFiles === 'bbmri' ? bbmriLogo : eucaimLogo,
     }
   },
   computed: {
diff --git a/src/components/NegotiationCard.vue b/src/components/NegotiationCard.vue
index 5479570..5357476 100644
--- a/src/components/NegotiationCard.vue
+++ b/src/components/NegotiationCard.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
   <div class="card mb-2">
-    <h5 class="card-header bg-body">
+    <h5 class="card-header bg-body text-card-title-text">
       {{ title }}
 
-      <span class="badge bg-primary-light float-end">
+      <span class="badge bg-status-badge float-end">
         {{ transformString(status) }}
       </span>
     </h5>
diff --git a/src/components/NegotiationForm.vue b/src/components/NegotiationForm.vue
index 8df58cf..a3d3760 100644
--- a/src/components/NegotiationForm.vue
+++ b/src/components/NegotiationForm.vue
@@ -37,13 +37,13 @@
         class="form-step border rounded-2 px-2 py-3 mb-2 overflow-auto"
       >
         <div class="mx-3">
-          <div class="fs-5 fw-bold text-secondary">
+          <div class="fs-5 fw-bold text-primary-text">
             SEARCH PARAMETERS
           </div>
           <div
             v-for="(qp, index) in queryParameters"
             :key="index" 
-            class="fs-6 text-dar"
+            class="fs-6 text-dar text-secondary-text"
           >
             {{ qp }}
           </div>
@@ -58,7 +58,7 @@
         v-for="section in accessCriteria.sections"
         :key="section.name"
         :title="section.label"
-        class="form-step border rounded-2 px-2 py-3 mb-2 overflow-auto"
+        class="form-step border rounded-2 px-2 py-3 mb-2 overflow-auto text-primary-text"
         :before-change="isSectionValid(section)"
       >
         <div
@@ -91,7 +91,7 @@
           :key="criteria.name"
           class="mb-4 mx-3"
         >
-          <label class="form-label" :class="{ required: criteria.required }"> 
+          <label class="form-label text-primary-text" :class="{ required: criteria.required }"> 
             {{ criteria.label }}
           </label> 
 
@@ -100,13 +100,13 @@
           <textarea
             v-if="criteria.type === 'textarea'"
             v-model="negotiationCriteria[section.name][criteria.name]"
-            class="form-control"
+            class="form-control text-secondary-text"
             :required="criteria.required"
           />
           <input
             v-else-if="criteria.type === 'file'"
             accept=".pdf"
-            class="form-control"
+            class="form-control text-secondary-text"
             :required="criteria.required"
             :type="criteria.type"
             @change="handleFileUpload($event, section.name, criteria.name)"
@@ -115,7 +115,7 @@
             v-else
             v-model="negotiationCriteria[section.name][criteria.name]"
             :type="criteria.type"
-            class="form-control"
+            class="form-control text-secondary-text"
             :required="criteria.required"
           >
         </div>
@@ -127,7 +127,7 @@
         <div
           v-for="section in accessCriteria.sections"
           :key="section.name"
-          class="border rounded-2 input-group p-3 mb-2 mb-3"
+          class="border rounded-2 input-group p-3 mb-2 mb-3 text-secondary-text"
         >
           <span class="mb-3 fs-4 fw-bold text-secondary">{{ section.label.toUpperCase() }}</span>
           <div
@@ -149,7 +149,7 @@
         <div v-if="props.isLastStep && isAdmin" class="form-check mb-3 d-flex justify-content-end">
           <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
           <label class="form-check-label ps-2" for="flexCheckDefault">
-             <p class="m-0">Mark as test request</p> 
+             <p class="m-0 text-secondary-text">Mark as test request</p> 
           </label>
         </div>
         <div class="wizard-footer-left">
diff --git a/src/components/NegotiationList.vue b/src/components/NegotiationList.vue
index fdda5c6..b720d03 100644
--- a/src/components/NegotiationList.vue
+++ b/src/components/NegotiationList.vue
@@ -15,8 +15,8 @@
               aria-haspopup="true"
               class="btn dropdown-toggle"
               :class="{ 
-                'btn-secondary': sortBy.sortColumn != undefined, 
-                'btn-outline-secondary' : sortBy.sortColumn == undefined, 
+                'btn-sort-filter-button-outline': sortBy.sortColumn != undefined, 
+                'btn-outline-sort-filter-button-outline' : sortBy.sortColumn == undefined, 
                 'show': sortBy.sortColumn != undefined
               }"
               type="button"
@@ -34,7 +34,7 @@
               <div
                 v-for="(value, name) in sortAttrs"
                 :key="name"
-                class="form-check mx-2 my-2"
+                class="form-check mx-2 my-2 text-sort-filter-dropdown-text"
               >
                 <input
                   :id="name"
@@ -60,8 +60,8 @@
               aria-haspopup="true"
               class="btn dropdown-toggle"
               :class="{ 
-                'btn-secondary': filters.status.length > 0, 
-                'btn-outline-secondary' : filters.status.length === 0,
+                'btn-sort-filter-button-outline': filters.status.length > 0, 
+                'btn-outline-sort-filter-button-outline' : filters.status.length === 0,
                 'show': filters.status.length > 0 || !statusFilterFirstLoad
               }"
               type="button"
@@ -76,7 +76,7 @@
               > {{ filters.status.length }}</span>
             </button>
             <ul
-              class="dropdown-menu"
+              class="dropdown-menu text-sort-filter-dropdown-text"
               aria-labelledby="dropdownMenuButton1"
             >
               <div class="mx-2 my-2 dropdown-contents">
@@ -137,8 +137,8 @@
               aria-haspopup="true"
               class="btn dropdown-toggle"
               :class="{ 
-                'btn-secondary': filters.dateStart !== '' || filters.dateEnd !== '', 
-                'btn-outline-secondary' : filters.dateStart === '' && filters.dateEnd === '',
+                'btn-sort-filter-button-outline': filters.dateStart !== '' || filters.dateEnd !== '', 
+                'btn-outline-sort-filter-button-outline' : filters.dateStart === '' && filters.dateEnd === '',
                 'show': filters.dateStart !== '' || filters.dateEnd !== '' || !dateFilterFirstLoad 
               }"
               type="button"
@@ -156,7 +156,7 @@
               class="dropdown-menu"
               aria-labelledby="dropdownMenuButton1"
             >
-              <div class="mx-2 my-2 dropdown-contents">
+              <div class="mx-2 my-2 dropdown-contents text-sort-filter-dropdown-text">
                 <div class="d-flex align-items-center mb-2">
                   <label
                     class="pe-2 w-25"
@@ -165,7 +165,7 @@
                   <input
                     id="startDate"
                     v-model="selectedStartDate"
-                    class="form-control"
+                    class="form-control text-sort-filter-dropdown-text"
                     type="date"
                     @input="updateFilter('dateStart', selectedStartDate)"
                   >
@@ -178,7 +178,7 @@
                   <input
                     id="endDate"
                     v-model="selectedEndDate"
-                    class="form-control"
+                    class="form-control text-sort-filter-dropdown-text"
                     type="date"
                     @input="updateFilter('dateEnd', selectedEndDate)"
                   >
@@ -189,7 +189,7 @@
           <div class="dropdown mb-2  b-dropdown ms-auto filter-dropdown position-static btn-group d-flex justify-content-end">
             <button
               type="button"
-              class="btn btn-outline-danger"
+              class="btn btn-outline-sort-filter-clear-button-outline"
               @click="clearAllFilters()"
             >
               Clear all filters
@@ -200,9 +200,9 @@
   </div>
 
   <div>
-    <div class="row row-cols-2 d-grid-row mt-3">
-      <p v-if="sortedNegotiations.length > 0">
-        <strong>Search results : </strong><br>
+    <div class="row row-cols-2 d-grid-row mt-3 ">
+      <p v-if="pagination.totalElements > 0">
+        <span class="text-search-results-text"> <strong>Search results: </strong> </span> <br>
         <span class="text-muted">{{ pagination.totalElements }} Negotiations found</span>
       </p>
 
@@ -210,7 +210,7 @@
         <button
           type="button"
           class="btn btn-sm me-2"
-          :class="savedNegotiationsView === 'Card-one-column' ? 'btn-primary-light' : savedNegotiationsView === 'Card-two-column' ? 'btn-primary-light' : 'bg-body'"
+          :class="savedNegotiationsView === 'Card-one-column' ? 'btn-display-view-button-color' : savedNegotiationsView === 'Card-two-column' ? 'btn-display-view-button-color' : 'bg-body'"
           @click="setSavedNegotiationsView({negotiationsView:'Card-one-column'})"
         >
         <i class="bi bi-card-heading"></i>
@@ -239,7 +239,7 @@
         <button
           type="button"
           class="btn btn-sm"
-          :class="savedNegotiationsView === 'Table' ? 'btn-primary-light' : 'bg-body'"
+          :class="savedNegotiationsView === 'Table' ? 'btn-display-view-button-color' : 'bg-body'"
           @click="savedNegotiationsView = 'Table', setSavedNegotiationsView({negotiationsView:'Table'})"
         >
         <i class="bi bi-table"></i>
@@ -273,7 +273,7 @@
         <div class="table-responsive">
           <table class="table table-hover">
             <thead>
-              <tr>
+              <tr class="text-table-header-text">
                 <th scope="col">Title</th>
                 <th scope="col">Negotiation ID</th>
                 <th scope="col">Created on</th>
@@ -289,15 +289,15 @@
                   params: { negotiationId: fn.id, userRole: userRole, filters: filters, sortBy: sortby }
                 })"
               >
-                <th scope="row">
+                <th scope="row" class="text-table-title-text">
                   {{fn.payload.project.title}}
                 </th>
-                <td>{{fn.id}}</td>
-                <td>{{formatDate(fn.creationDate)}}</td>
-                <td>{{fn.author.name}}</td>
+                <td class="text-muted">{{fn.id}}</td>
+                <td class="text-muted">{{formatDate(fn.creationDate)}}</td>
+                <td class="text-muted">{{fn.author.name}}</td>
                 <td>
-                  <span class="badge bg-primary-light ">
-                    {{ fn.status }}
+                  <span class="badge bg-status-badge">
+                    {{ transformString(fn.status) }}
                   </span>
                   </td>
                   <td>
@@ -600,7 +600,10 @@ export default {
     },
     filterStatus(status) {
       this.$emit("filterStatus", status);
-    }
+    },
+    transformString(string) {
+      return string ? string.toUpperCase().split('_').join(' ') : "";
+    },
   }  
 }
 </script>
diff --git a/src/components/NegotiationPosts.vue b/src/components/NegotiationPosts.vue
index a84894e..7217111 100644
--- a/src/components/NegotiationPosts.vue
+++ b/src/components/NegotiationPosts.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="negotiation && negotiation.postsEnabled">
-    <h5>Comments</h5>
+    <h5 class="text-primary">Comments</h5>
     <div
       v-for="post in posts"
       :key="post.id"
@@ -32,14 +32,14 @@
       v-if="posts.length === 0"
       class="my-3"
     >
-    <h5>Send a message</h5>
+    <h5 class="text-primary">Send a message</h5>
     <form
       class="border rounded mb-4 p-2"
       @submit.prevent="sendMessage"
     >
       <textarea
         v-model="message"
-        class="form-control mb-3"
+        class="form-control mb-3 text-primary"
       />
       <NegotiationAttachment
         v-if="attachment"
@@ -73,7 +73,7 @@
         <select
           id="recipient"
           v-model="recipientId"
-          class="form-select w-25"
+          class="form-select w-25 text-primary"
         >
           <option
             disabled
diff --git a/src/components/ResourcesList.vue b/src/components/ResourcesList.vue
index c26cd43..2a1765c 100644
--- a/src/components/ResourcesList.vue
+++ b/src/components/ResourcesList.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span class="fs-5 fw-bold text-secondary mt-3">
+    <span class="fs-5 fw-bold text-primary-text mt-3">
       <i class="bi bi-card-list" />
       RESOURCES ({{ numberOfResources }})
     </span>
@@ -29,7 +29,7 @@
             class="card-body"
           >
             <span
-              class="text-dark"
+              class="text-secondary-text"
               :for="getElementIdFromResourceId(resource.id)"
             >
               {{ resource.name }}
diff --git a/src/config/theme.js b/src/config/theme.js
new file mode 100644
index 0000000..64287d2
--- /dev/null
+++ b/src/config/theme.js
@@ -0,0 +1,22 @@
+const devSettings = { 
+    activeThemeFile: "bbmri",
+    activeLogosFiles: "bbmri",
+    isFooterFollowUsVisible: true
+}
+
+const prodSettings = {
+    activeThemeFile: "ACTIVE_THEME_PLACEHOLDER",
+    activeLogosFiles: "ACTIVE_LOGOS_PLACEHOLDER",
+    isFooterFollowUsVisible: 'FOLLOW_US_VISIBLE_PLACEHOLDER'
+}
+
+let activeTheme
+
+if (import.meta.env.DEV) {
+    activeTheme = devSettings
+}
+else {
+    activeTheme = prodSettings
+}
+
+export default activeTheme
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 4145092..c7cbb6e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,8 @@ import "bootstrap-vue-next/dist/bootstrap-vue-next.css"
 import "bootstrap"
 import "bootstrap-icons/font/bootstrap-icons.css"
 import matomo from "./config/matomo.js" 
+import activeTheme from "./config/theme.js" 
+
 
 library.add(faSpinner)
 library.add(faPencil)
@@ -35,4 +37,4 @@ app.mount("#app")
 
 window._paq.push(['trackPageView']); // To track a page view
 
-import "./assets/scss/bbmri.scss"
+import (`./assets/scss/theme-${activeTheme.activeThemeFile}.scss`)
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 86e6cd8..80d8444 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -10,14 +10,14 @@
         <div class="card py-5 p-3">
           <div class="col-10 col-md-4 align-self-center">
             <img
-              src="../assets/images/bbmri-logo.png"
+              :src="logoSrc"
               class="img-fluid mt-4 mb-2"
               style="min-width: 50px;"
-              alt="bbmri-logo"
+              alt="home-page-logo"
             >
           </div>
           <h1
-            class="text-center card-title text-logo-grey fw-bold mb-5"
+            class="text-center card-title text-login-tittle-text fw-bold mb-5"
           >
             <b>NEGOTIATOR</b>
           </h1>
@@ -39,28 +39,28 @@
                   src="../assets/images/ls-aai-logo.png"
                   alt="icon"
                 >
-                <span class="align-self-center fw-boldtext-logo-grey pe-4">
+                <span class="align-self-center  text-primary pe-4">
                   Life Science Login</span>
               </button>
             </div>
           </div>
         </div>
         <div
-          class="text-center mt-2 mb-2"
+          class="text-center text-primary-text mt-2 mb-2"
         >
           Not familiar with LS Login? Visit their <a
             target="_blank"
             href="https://lifescience-ri.eu/ls-login.html"
           >website</a>.
         </div>
-        <div class="text-center mb-2">
+        <div class="text-center text-primary-text mb-2">
           Need help? <a href="mailto:negotiator@helpdesk.bbmri-eric.eu">Contact us</a>.
         </div>
-        <div class="text-center col mb-2">
+        <div class="text-center text-primary-text col mb-2">
             <i class="bi bi-github" />
             <a href="https://github.com/BBMRI-ERIC/negotiator-v3-frontend"> GitHub</a>
         </div>
-        <div class="text-center mb-5">
+        <div class="text-center text-primary-text mb-5">
           <p>&copy; 2024 BBMRI-ERIC</p>
         </div>
       </div>
@@ -70,9 +70,17 @@
 
 <script>
 import { mapActions, mapGetters } from "vuex"
+import activeTheme from "../config/theme.js" 
+import bbmriLogo from '../assets/images/home-bbmri.png'
+import eucaimLogo from '../assets/images/home-eucaim.png'
 
 export default {
   name: "HomePage",
+  data() {
+    return {
+      logoSrc: activeTheme.activeLogosFiles === 'bbmri' ? bbmriLogo : eucaimLogo,
+    }
+  },
   computed: {
     ...mapGetters(["oidcIsAuthenticated", "oidcUser"])
   },
diff --git a/src/views/NegotiationPage.vue b/src/views/NegotiationPage.vue
index 8185e90..6bc582e 100644
--- a/src/views/NegotiationPage.vue
+++ b/src/views/NegotiationPage.vue
@@ -4,7 +4,7 @@
   >
     <button
       type="button"
-      class="btn btn-secondary"
+      class="btn btn-primary"
       @click="
         $router.go(-1)
       "
@@ -29,7 +29,7 @@
             :key="element"
             class="list-group-item p-3"
           >
-            <span class="fs-5 fw-bold text-secondary mt-3">
+            <span class="fs-5 fw-bold text-primary-text mt-3">
               {{ key.toUpperCase() }}</span>
             <div
               v-for="(subelement, subelementkey) in element"
@@ -37,9 +37,9 @@
               class="mt-3"
             >
               <label
-                class="me-2 fw-bold"
+                class="me-2 fw-bold text-secondary-text"
               >{{ subelementkey.toUpperCase() }}:</label>
-              <span v-if="isAttachment(subelement)">
+              <span v-if="isAttachment(subelement)" class="text-secondary-text">
                 {{ subelement.name }}
                 <font-awesome-icon
                   v-if="isAttachment(subelement)"
@@ -49,13 +49,13 @@
                   @click.prevent="downloadAttachment({id: subelement.id, name: subelement.name})"
                 />
               </span>
-              <span v-else>
+              <span v-else class="text-secondary-text">
                 {{ subelement }}
               </span>
             </div>
           </li>
           <li class="list-group-item p-3">
-            <span class="fs-5 fw-bold text-secondary mt-3 mb-3">
+            <span class="fs-5 fw-bold text-primary-text mt-3 mb-3">
               ATTACHMENTS
             </span>
             <NegotiationAttachment 
@@ -81,7 +81,7 @@
                 aria-expanded="true"
                 type="button"
               >
-                <span class="fs-5 fw-bold text-secondary mt-3">
+                <span class="fs-5 fw-bold text-primary-text mt-3">
                   <i class="bi bi-card-list" />
                   COLLECTIONS ({{ numberOfResources }})
                 </span>
@@ -161,7 +161,7 @@
                     <label
                       class="text-primary fw-bold ml-2 cursor-pointer"
                     >
-                      {{ org.name }}  
+                      {{ org.name }}
                     </label>   
                     </div>                    
                       <div class="justify-content-end pt-1">
@@ -191,12 +191,12 @@
                         @change="setCurrentMultipleStatus(resource.id)"
                       >
                       <label
-                        class="form-check-label"
+                        class="form-check-label text-primary-text"
                         :for="getElementIdFromResourceId(resource.id)"
                       >
                         {{ resource.name }}
                       </label>           
-                      <span class="badge rounded-pill bg-primary ms-4">
+                      <span class="badge rounded-pill bg-status-badge ms-4">
                         {{ getStatusForResource(resource.id) }}
                       </span>
                     </div>
@@ -225,28 +225,28 @@
       >
         <ul class="list-group list-group-flush my-3">
           <li class="list-group-item p-2">
-            <div class="fw-bold text-secondary">
+            <div class="fw-bold text-primary-text">
               Author:
             </div>
-            <div>{{ author.name }}</div>
+            <div class="text-secondary-text">{{ author.name }}</div>
           </li>
           <li class="list-group-item p-2">
-            <div class="fw-bold text-secondary">
+            <div class="fw-bold text-primary-text">
               Email:
             </div>
-            <div>{{ author.email }}</div>
+            <span class="text-secondary-text">{{ author.email }}</span>
           </li>
           <li class="list-group-item p-2">
-            <div class="fw-bold text-secondary">
+            <div class="fw-bold text-primary-text">
               Negotiation ID:
             </div>
-            <span> {{ negotiation ? negotiation.id : "" }}</span>
+            <span class="text-secondary-text"> {{ negotiation ? negotiation.id : "" }}</span>
           </li>
           <li class="list-group-item p-2">
-            <div class="fw-bold text-secondary">
+            <div class="fw-bold text-primary-text">
               Status:
             </div>
-            <span> {{ negotiation ? transformString(negotiation.status) : "" }}
+            <span class="text-secondary-text"> {{ negotiation ? transformString(negotiation.status) : "" }}
               <strong
                 v-if="negotiation.status !== 'ABANDONED'"
                 class="float-end"
diff --git a/start.sh b/start.sh
index 9b192da..d263fa5 100755
--- a/start.sh
+++ b/start.sh
@@ -12,6 +12,9 @@ do
   sed -i 's|RESOURCES_PLACEHOLDER|'${API_RESOURCES}'|g' $file
   sed -i 's|MATOMO_HOST_PLACEHOLDER|'${MATOMO_HOST}'|g' $file
   sed -i 's|MATOMO_SITE_ID_PLACEHOLDER|'${MATOMO_SITE_ID}'|g' $file
+  sed -i 's|ACTIVE_THEME_PLACEHOLDER|'${ACTIVE_THEME:-bbmri}'|g' $file
+  sed -i 's|ACTIVE_LOGOS_PLACEHOLDER|'${ACTIVE_LOGOS:-bbmri}'|g' $file
+  sed -i 's|FOLLOW_US_VISIBLE_PLACEHOLDER|'${FOLLOW_US_VISIBLE:-true}'|g' $file
 
 done