diff --git a/src/core/server/core_app/assets/spinners/dark_mode_spinner.gif b/src/core/server/core_app/assets/spinners/dark_mode_spinner.gif
new file mode 100644
index 00000000000..bca3614c2fa
Binary files /dev/null and b/src/core/server/core_app/assets/spinners/dark_mode_spinner.gif differ
diff --git a/src/core/server/core_app/assets/spinners/light_mode_spinner.gif b/src/core/server/core_app/assets/spinners/light_mode_spinner.gif
new file mode 100644
index 00000000000..de9446f345c
Binary files /dev/null and b/src/core/server/core_app/assets/spinners/light_mode_spinner.gif differ
diff --git a/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap b/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap
index 24135c063fa..0ca263cd912 100644
--- a/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap
+++ b/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap
@@ -634,38 +634,10 @@ Array [
       class="osdLoaderWrap"
       data-test-subj="loadingLogo"
     >
-      <svg
-        fill="none"
-        viewBox="0 0 1024 200"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <polygon
-          fill="white"
-          points="204.11 142.81 174.37 46.12 150.88 46.12 121.13 142.81 91.65 46.06 64.64 46.06 107.69 187.04 129.61 187.04 162.63 85 195.5 187.04 217.42 187.04 260.48 46.12 233.6 46.12 204.11 142.81"
-        />
-        <polygon
-          fill="white"
-          points="451.67 70.52 524.33 70.52 444.36 182.73 444.36 187.04 563.74 187.04 563.74 162.64 487.81 162.64 567.65 50.56 567.65 46.12 451.67 46.12 451.67 70.52"
-        />
-        <path
-          d="M390,61c-12.09-12.61-28.57-19.24-48-19.24-41,0-72,32.22-72,75s30.95,75,72,75c19.35,0,35.84-6.6,48-19.12v16.16h27.58V44.7H390Zm-45.15,104.7c-27.1,0-46.77-20.6-46.77-49s19.67-48.84,46.77-48.84S391.5,88.4,391.5,116.7,371.89,165.68,344.88,165.68Z"
-          fill="white"
-        />
-        <path
-          d="M696.14,125.88c0,25.29-13.92,39.8-38.18,39.8s-38.32-14.51-38.32-39.8V44.7H592v83.39c0,46.91,35.51,63.56,65.92,63.56s65.77-16.65,65.77-63.56V44.7H696.14Z"
-          fill="white"
-        />
-        <path
-          d="M883.3,93.62A85.09,85.09,0,0,0,878.86,76a56.88,56.88,0,0,0-9.46-16.64A45.46,45.46,0,0,0,853.3,47q-9.93-4.71-24.54-4.7-19.05,0-32.48,8.22A53,53,0,0,0,782.19,63V8.35h-24.4V187h27.66V113.71q0-12.52,2.8-21.27A37.82,37.82,0,0,1,796,78.35a28.86,28.86,0,0,1,11.42-7.76,39.44,39.44,0,0,1,13.83-2.42c7.47,0,13.55,1.53,18.2,4.57a31.27,31.27,0,0,1,10.82,12,52.22,52.22,0,0,1,5.22,16.12,107.39,107.39,0,0,1,1.38,16.89V187h27.66V108.75A114.2,114.2,0,0,0,883.3,93.62Z"
-          fill="white"
-        />
-        <circle
-          cx="937.12"
-          cy="167.6"
-          fill="#3585F9"
-          r="22.24"
-        />
-      </svg>
+      <img
+        alt="wazuh-animated-logo"
+        src="[object Object]/ui/spinners/dark_mode_spinner.gif"
+      />
       <div
         class="osdWelcomeText"
         data-error-message=""
@@ -1080,38 +1052,10 @@ Array [
       class="osdLoaderWrap"
       data-test-subj="loadingLogo"
     >
-      <svg
-        fill="none"
-        viewBox="0 0 1024 200"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <polygon
-          fill="white"
-          points="204.11 142.81 174.37 46.12 150.88 46.12 121.13 142.81 91.65 46.06 64.64 46.06 107.69 187.04 129.61 187.04 162.63 85 195.5 187.04 217.42 187.04 260.48 46.12 233.6 46.12 204.11 142.81"
-        />
-        <polygon
-          fill="white"
-          points="451.67 70.52 524.33 70.52 444.36 182.73 444.36 187.04 563.74 187.04 563.74 162.64 487.81 162.64 567.65 50.56 567.65 46.12 451.67 46.12 451.67 70.52"
-        />
-        <path
-          d="M390,61c-12.09-12.61-28.57-19.24-48-19.24-41,0-72,32.22-72,75s30.95,75,72,75c19.35,0,35.84-6.6,48-19.12v16.16h27.58V44.7H390Zm-45.15,104.7c-27.1,0-46.77-20.6-46.77-49s19.67-48.84,46.77-48.84S391.5,88.4,391.5,116.7,371.89,165.68,344.88,165.68Z"
-          fill="white"
-        />
-        <path
-          d="M696.14,125.88c0,25.29-13.92,39.8-38.18,39.8s-38.32-14.51-38.32-39.8V44.7H592v83.39c0,46.91,35.51,63.56,65.92,63.56s65.77-16.65,65.77-63.56V44.7H696.14Z"
-          fill="white"
-        />
-        <path
-          d="M883.3,93.62A85.09,85.09,0,0,0,878.86,76a56.88,56.88,0,0,0-9.46-16.64A45.46,45.46,0,0,0,853.3,47q-9.93-4.71-24.54-4.7-19.05,0-32.48,8.22A53,53,0,0,0,782.19,63V8.35h-24.4V187h27.66V113.71q0-12.52,2.8-21.27A37.82,37.82,0,0,1,796,78.35a28.86,28.86,0,0,1,11.42-7.76,39.44,39.44,0,0,1,13.83-2.42c7.47,0,13.55,1.53,18.2,4.57a31.27,31.27,0,0,1,10.82,12,52.22,52.22,0,0,1,5.22,16.12,107.39,107.39,0,0,1,1.38,16.89V187h27.66V108.75A114.2,114.2,0,0,0,883.3,93.62Z"
-          fill="white"
-        />
-        <circle
-          cx="937.12"
-          cy="167.6"
-          fill="#3585F9"
-          r="22.24"
-        />
-      </svg>
+      <img
+        alt="wazuh-animated-logo"
+        src="[object Object]/ui/spinners/dark_mode_spinner.gif"
+      />
       <div
         class="osdWelcomeText"
         data-error-message=""
@@ -1241,38 +1185,10 @@ Array [
       class="osdLoaderWrap"
       data-test-subj="loadingLogo"
     >
-      <svg
-        fill="none"
-        viewBox="0 0 1024 200"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <polygon
-          fill="white"
-          points="204.11 142.81 174.37 46.12 150.88 46.12 121.13 142.81 91.65 46.06 64.64 46.06 107.69 187.04 129.61 187.04 162.63 85 195.5 187.04 217.42 187.04 260.48 46.12 233.6 46.12 204.11 142.81"
-        />
-        <polygon
-          fill="white"
-          points="451.67 70.52 524.33 70.52 444.36 182.73 444.36 187.04 563.74 187.04 563.74 162.64 487.81 162.64 567.65 50.56 567.65 46.12 451.67 46.12 451.67 70.52"
-        />
-        <path
-          d="M390,61c-12.09-12.61-28.57-19.24-48-19.24-41,0-72,32.22-72,75s30.95,75,72,75c19.35,0,35.84-6.6,48-19.12v16.16h27.58V44.7H390Zm-45.15,104.7c-27.1,0-46.77-20.6-46.77-49s19.67-48.84,46.77-48.84S391.5,88.4,391.5,116.7,371.89,165.68,344.88,165.68Z"
-          fill="white"
-        />
-        <path
-          d="M696.14,125.88c0,25.29-13.92,39.8-38.18,39.8s-38.32-14.51-38.32-39.8V44.7H592v83.39c0,46.91,35.51,63.56,65.92,63.56s65.77-16.65,65.77-63.56V44.7H696.14Z"
-          fill="white"
-        />
-        <path
-          d="M883.3,93.62A85.09,85.09,0,0,0,878.86,76a56.88,56.88,0,0,0-9.46-16.64A45.46,45.46,0,0,0,853.3,47q-9.93-4.71-24.54-4.7-19.05,0-32.48,8.22A53,53,0,0,0,782.19,63V8.35h-24.4V187h27.66V113.71q0-12.52,2.8-21.27A37.82,37.82,0,0,1,796,78.35a28.86,28.86,0,0,1,11.42-7.76,39.44,39.44,0,0,1,13.83-2.42c7.47,0,13.55,1.53,18.2,4.57a31.27,31.27,0,0,1,10.82,12,52.22,52.22,0,0,1,5.22,16.12,107.39,107.39,0,0,1,1.38,16.89V187h27.66V108.75A114.2,114.2,0,0,0,883.3,93.62Z"
-          fill="white"
-        />
-        <circle
-          cx="937.12"
-          cy="167.6"
-          fill="#3585F9"
-          r="22.24"
-        />
-      </svg>
+      <img
+        alt="wazuh-animated-logo"
+        src="[object Object]/ui/spinners/dark_mode_spinner.gif"
+      />
       <div
         class="osdWelcomeText"
         data-error-message=""
@@ -1402,38 +1318,10 @@ Array [
       class="osdLoaderWrap"
       data-test-subj="loadingLogo"
     >
-      <svg
-        fill="none"
-        viewBox="0 0 1024 200"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <polygon
-          fill="white"
-          points="204.11 142.81 174.37 46.12 150.88 46.12 121.13 142.81 91.65 46.06 64.64 46.06 107.69 187.04 129.61 187.04 162.63 85 195.5 187.04 217.42 187.04 260.48 46.12 233.6 46.12 204.11 142.81"
-        />
-        <polygon
-          fill="white"
-          points="451.67 70.52 524.33 70.52 444.36 182.73 444.36 187.04 563.74 187.04 563.74 162.64 487.81 162.64 567.65 50.56 567.65 46.12 451.67 46.12 451.67 70.52"
-        />
-        <path
-          d="M390,61c-12.09-12.61-28.57-19.24-48-19.24-41,0-72,32.22-72,75s30.95,75,72,75c19.35,0,35.84-6.6,48-19.12v16.16h27.58V44.7H390Zm-45.15,104.7c-27.1,0-46.77-20.6-46.77-49s19.67-48.84,46.77-48.84S391.5,88.4,391.5,116.7,371.89,165.68,344.88,165.68Z"
-          fill="white"
-        />
-        <path
-          d="M696.14,125.88c0,25.29-13.92,39.8-38.18,39.8s-38.32-14.51-38.32-39.8V44.7H592v83.39c0,46.91,35.51,63.56,65.92,63.56s65.77-16.65,65.77-63.56V44.7H696.14Z"
-          fill="white"
-        />
-        <path
-          d="M883.3,93.62A85.09,85.09,0,0,0,878.86,76a56.88,56.88,0,0,0-9.46-16.64A45.46,45.46,0,0,0,853.3,47q-9.93-4.71-24.54-4.7-19.05,0-32.48,8.22A53,53,0,0,0,782.19,63V8.35h-24.4V187h27.66V113.71q0-12.52,2.8-21.27A37.82,37.82,0,0,1,796,78.35a28.86,28.86,0,0,1,11.42-7.76,39.44,39.44,0,0,1,13.83-2.42c7.47,0,13.55,1.53,18.2,4.57a31.27,31.27,0,0,1,10.82,12,52.22,52.22,0,0,1,5.22,16.12,107.39,107.39,0,0,1,1.38,16.89V187h27.66V108.75A114.2,114.2,0,0,0,883.3,93.62Z"
-          fill="white"
-        />
-        <circle
-          cx="937.12"
-          cy="167.6"
-          fill="#3585F9"
-          r="22.24"
-        />
-      </svg>
+      <img
+        alt="wazuh-animated-logo"
+        src="[object Object]/ui/spinners/dark_mode_spinner.gif"
+      />
       <div
         class="osdWelcomeText"
         data-error-message=""
diff --git a/src/core/server/rendering/views/template.tsx b/src/core/server/rendering/views/template.tsx
index e5843a91a65..54dffabc3cf 100644
--- a/src/core/server/rendering/views/template.tsx
+++ b/src/core/server/rendering/views/template.tsx
@@ -66,54 +66,10 @@ export const Template: FunctionComponent<Props> = ({
     </svg>
   );
   const openSearchLogoSpinner = (
-    <svg viewBox="0 0 1024 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <polygon
-        points="204.11 142.81 174.37 46.12 150.88 46.12 121.13 142.81 91.65 46.06 64.64 46.06 107.69 187.04 129.61 187.04 162.63 85 195.5 187.04 217.42 187.04 260.48 46.12 233.6 46.12 204.11 142.81"
-        fill="black"
-      />
-      <polygon
-        points="451.67 70.52 524.33 70.52 444.36 182.73 444.36 187.04 563.74 187.04 563.74 162.64 487.81 162.64 567.65 50.56 567.65 46.12 451.67 46.12 451.67 70.52"
-        fill="black"
-      />
-      <path
-        d="M390,61c-12.09-12.61-28.57-19.24-48-19.24-41,0-72,32.22-72,75s30.95,75,72,75c19.35,0,35.84-6.6,48-19.12v16.16h27.58V44.7H390Zm-45.15,104.7c-27.1,0-46.77-20.6-46.77-49s19.67-48.84,46.77-48.84S391.5,88.4,391.5,116.7,371.89,165.68,344.88,165.68Z"
-        fill="black"
-      />
-      <path
-        d="M696.14,125.88c0,25.29-13.92,39.8-38.18,39.8s-38.32-14.51-38.32-39.8V44.7H592v83.39c0,46.91,35.51,63.56,65.92,63.56s65.77-16.65,65.77-63.56V44.7H696.14Z"
-        fill="black"
-      />
-      <path
-        d="M883.3,93.62A85.09,85.09,0,0,0,878.86,76a56.88,56.88,0,0,0-9.46-16.64A45.46,45.46,0,0,0,853.3,47q-9.93-4.71-24.54-4.7-19.05,0-32.48,8.22A53,53,0,0,0,782.19,63V8.35h-24.4V187h27.66V113.71q0-12.52,2.8-21.27A37.82,37.82,0,0,1,796,78.35a28.86,28.86,0,0,1,11.42-7.76,39.44,39.44,0,0,1,13.83-2.42c7.47,0,13.55,1.53,18.2,4.57a31.27,31.27,0,0,1,10.82,12,52.22,52.22,0,0,1,5.22,16.12,107.39,107.39,0,0,1,1.38,16.89V187h27.66V108.75A114.2,114.2,0,0,0,883.3,93.62Z"
-        fill="black"
-      />
-      <circle cx="937.12" cy="167.6" r="22.24" fill="#3585F9" />
-    </svg>
+    <img alt="wazuh-animated-logo" src={`${uiPublicUrl}/spinners/light_mode_spinner.gif`} />
   );
   const openSearchLogoSpinnerDark = (
-    <svg viewBox="0 0 1024 200" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <polygon
-        points="204.11 142.81 174.37 46.12 150.88 46.12 121.13 142.81 91.65 46.06 64.64 46.06 107.69 187.04 129.61 187.04 162.63 85 195.5 187.04 217.42 187.04 260.48 46.12 233.6 46.12 204.11 142.81"
-        fill="white"
-      />
-      <polygon
-        points="451.67 70.52 524.33 70.52 444.36 182.73 444.36 187.04 563.74 187.04 563.74 162.64 487.81 162.64 567.65 50.56 567.65 46.12 451.67 46.12 451.67 70.52"
-        fill="white"
-      />
-      <path
-        d="M390,61c-12.09-12.61-28.57-19.24-48-19.24-41,0-72,32.22-72,75s30.95,75,72,75c19.35,0,35.84-6.6,48-19.12v16.16h27.58V44.7H390Zm-45.15,104.7c-27.1,0-46.77-20.6-46.77-49s19.67-48.84,46.77-48.84S391.5,88.4,391.5,116.7,371.89,165.68,344.88,165.68Z"
-        fill="white"
-      />
-      <path
-        d="M696.14,125.88c0,25.29-13.92,39.8-38.18,39.8s-38.32-14.51-38.32-39.8V44.7H592v83.39c0,46.91,35.51,63.56,65.92,63.56s65.77-16.65,65.77-63.56V44.7H696.14Z"
-        fill="white"
-      />
-      <path
-        d="M883.3,93.62A85.09,85.09,0,0,0,878.86,76a56.88,56.88,0,0,0-9.46-16.64A45.46,45.46,0,0,0,853.3,47q-9.93-4.71-24.54-4.7-19.05,0-32.48,8.22A53,53,0,0,0,782.19,63V8.35h-24.4V187h27.66V113.71q0-12.52,2.8-21.27A37.82,37.82,0,0,1,796,78.35a28.86,28.86,0,0,1,11.42-7.76,39.44,39.44,0,0,1,13.83-2.42c7.47,0,13.55,1.53,18.2,4.57a31.27,31.27,0,0,1,10.82,12,52.22,52.22,0,0,1,5.22,16.12,107.39,107.39,0,0,1,1.38,16.89V187h27.66V108.75A114.2,114.2,0,0,0,883.3,93.62Z"
-        fill="white"
-      />
-      <circle cx="937.12" cy="167.6" r="22.24" fill="#3585F9" />
-    </svg>
+    <img alt="wazuh-animated-logo" src={`${uiPublicUrl}/spinners/dark_mode_spinner.gif`} />
   );
 
   const loadingLogoDefault = injectedMetadata.branding.loadingLogo?.defaultUrl;