diff --git a/package.json b/package.json
index 0e680d9f..93af65c9 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@fontsource/montserrat": "4.4.5",
     "@material-ui/core": "5.0.0-beta.2",
     "@material-ui/icons": "5.0.0-beta.1",
-    "date-fns-tz": "^1.1.4",
+    "date-fns-tz": "^1.1.6",
     "react": "17.0.2",
     "react-clock": "3.0.0",
     "react-color-gradient-picker": "0.1.2",
@@ -29,28 +29,28 @@
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",
-    "@babel/eslint-parser": "^7.14.7",
+    "@babel/eslint-parser": "^7.14.9",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-transform-react-constant-elements": "^7.13.15",
     "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.8",
+    "@babel/preset-env": "^7.14.9",
     "@babel/preset-react": "^7.14.5",
     "@eartharoid/deep-merge": "^0.0.1",
     "babel-loader": "^8.2.2",
     "babel-plugin-transform-react-class-to-function": "^1.2.2",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.2.0",
-    "date-fns": "^2.22.1",
-    "eslint": "^7.31.0",
+    "date-fns": "^2.23.0",
+    "eslint": "^7.32.0",
     "eslint-config-react-app": "^6.0.0",
     "html-webpack-plugin": "^5.3.2",
     "mini-css-extract-plugin": "^2.1.0",
-    "sass": "^1.35.2",
+    "sass": "^1.37.0",
     "sass-loader": "^12.1.0",
     "source-map-loader": "^3.0.0",
-    "webpack": "^5.46.0",
+    "webpack": "^5.47.1",
     "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^4.0.0-beta.3"
+    "webpack-dev-server": "^4.0.0-rc.0"
   },
   "scripts": {
     "start": "webpack serve",
diff --git a/src/components/widgets/background/Background.jsx b/src/components/widgets/background/Background.jsx
index ea9232e9..9f742a3f 100644
--- a/src/components/widgets/background/Background.jsx
+++ b/src/components/widgets/background/Background.jsx
@@ -69,7 +69,7 @@ export default class Background extends React.PureComponent {
     const backgroundImage = document.getElementById('backgroundImage');
 
     if (this.state.url !== '') {
-      const url = (localStorage.getItem('ddgProxy') === 'true' && this.state.photoInfo.offline !== true) ? window.constants.DDG_IMAGE_PROXY + this.state.url : this.state.url;
+      const url = (localStorage.getItem('ddgProxy') === 'true' && this.state.photoInfo.offline !== true && !this.state.url.startsWith('data:')) ? window.constants.DDG_IMAGE_PROXY + this.state.url : this.state.url;
       const photoInformation = document.querySelector('.photoInformation');
 
       // just set the background
@@ -322,6 +322,10 @@ export default class Background extends React.PureComponent {
           if (backgroundType !== this.state.type || (this.state.type === 'api' && localStorage.getItem('backgroundAPI') !== this.state.currentAPI) || (this.state.type === 'custom' && localStorage.getItem('customBackground') !== this.state.url)) {
             return refresh();
           }
+        } else {
+          if (backgroundType !== this.state.type) {
+            return refresh();
+          }
         }
 
         // background effects so we don't get another image again
diff --git a/src/components/widgets/background/PhotoInformation.jsx b/src/components/widgets/background/PhotoInformation.jsx
index a811246c..fa5970f8 100644
--- a/src/components/widgets/background/PhotoInformation.jsx
+++ b/src/components/widgets/background/PhotoInformation.jsx
@@ -56,7 +56,7 @@ export default function PhotoInformation(props) {
     setWidth(event.target.width);
     setHeight(event.target.height);
   }
-  img.src = props.url;
+  img.src = (localStorage.getItem('ddgProxy') === 'true' && !props.info.offline && !props.url.startsWith('data:')) ? window.constants.DDG_IMAGE_PROXY + props.url : props.url;
 
   return (
     <div className='photoInformation'>