diff --git a/ui_openvpn/src/App.js b/ui_openvpn/src/App.js
index af0cc66..1289a7c 100755
--- a/ui_openvpn/src/App.js
+++ b/ui_openvpn/src/App.js
@@ -19,8 +19,7 @@ import getServerName from "./utils/getServerName";
 // Logos
 import errorLogo from "./img/error.png";
 import okLogo from "./img/ok.png";
-import logo from "./img/logo.png";
-import loadingGif from "./img/loading.gif";
+import logo from "./img/dappnode-logo.png";
 // Icons
 import FaAndroid from "./icons/FaAndroid";
 import FaApple from "./icons/FaApple";
@@ -156,7 +155,7 @@ export default class App extends Component {
     if (loading) {
       return (
         <div className="status-panel card-surface">
-          <img src={loadingGif} className="loading-logo" alt="loading" />
+          <div className="loading-spinner"></div>
           <h6 className="main-text">Loading...</h6>
         </div>
       );
diff --git a/ui_openvpn/src/Header.js b/ui_openvpn/src/Header.js
index 67e3450..e2f5823 100755
--- a/ui_openvpn/src/Header.js
+++ b/ui_openvpn/src/Header.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import dappnodeLogo from "./img/logo.png";
+import dappnodeLogo from "./img/dappnode-logo.png";
 
 class Header extends Component {
   render() {
diff --git a/ui_openvpn/src/img/dappnode-logo.png b/ui_openvpn/src/img/dappnode-logo.png
new file mode 100644
index 0000000..1b493c0
Binary files /dev/null and b/ui_openvpn/src/img/dappnode-logo.png differ
diff --git a/ui_openvpn/src/img/loading.gif b/ui_openvpn/src/img/loading.gif
deleted file mode 100644
index 69acebd..0000000
Binary files a/ui_openvpn/src/img/loading.gif and /dev/null differ
diff --git a/ui_openvpn/src/img/logo.png b/ui_openvpn/src/img/logo.png
deleted file mode 100644
index b4ec1bf..0000000
Binary files a/ui_openvpn/src/img/logo.png and /dev/null differ
diff --git a/ui_openvpn/src/index.css b/ui_openvpn/src/index.css
index 23cef1e..40dd26b 100755
--- a/ui_openvpn/src/index.css
+++ b/ui_openvpn/src/index.css
@@ -91,6 +91,22 @@ a:hover {
   margin-bottom: 8px;
 }
 
+.loading-spinner {
+  width: 56px;
+  height: 56px;
+  margin: 16px auto 8px;
+  border: 5px solid var(--border);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .main-text {
   font-weight: 500;
   color: var(--muted);