diff --git a/pkg/rancher-desktop/components/BackendProgress.vue b/pkg/rancher-desktop/components/BackendProgress.vue
index 3e95aaff4ed..2d39987754a 100644
--- a/pkg/rancher-desktop/components/BackendProgress.vue
+++ b/pkg/rancher-desktop/components/BackendProgress.vue
@@ -58,7 +58,11 @@ class BackendProgress extends Vue {
   }
 
   get progressBusy(): boolean {
-    return this.progressIndeterminate || this.progress.current < this.progress.max;
+    const busy = this.progressIndeterminate || this.progress.current < this.progress.max;
+
+    this.$emit('progressBarisOpen', busy);
+
+    return busy;
   }
 
   /** Return a string describing the elapsed time or progress. */
diff --git a/pkg/rancher-desktop/components/ImagesFormAdd.vue b/pkg/rancher-desktop/components/ImagesFormAdd.vue
index bf05eef8606..7164028fc1c 100644
--- a/pkg/rancher-desktop/components/ImagesFormAdd.vue
+++ b/pkg/rancher-desktop/components/ImagesFormAdd.vue
@@ -74,7 +74,7 @@ export default Vue.extend({
 
   methods: {
     submit() {
-      this.$emit('click', { action: this.action, image: this.image });
+      this.$emit('click', { action: this.action, image: this.image.trim() });
     },
   },
 });
diff --git a/pkg/rancher-desktop/components/NetworkStatus.vue b/pkg/rancher-desktop/components/NetworkStatus.vue
index b09513d9f37..e1cbb5644b9 100644
--- a/pkg/rancher-desktop/components/NetworkStatus.vue
+++ b/pkg/rancher-desktop/components/NetworkStatus.vue
@@ -14,6 +14,10 @@ export default Vue.extend({
       type:    Boolean,
       default: false,
     },
+    isProgressBarVisible: {
+      type:    Boolean,
+      default: false,
+    },
   },
   data() {
     return { networkStatus: true };
@@ -63,15 +67,17 @@ export default Vue.extend({
     <i
       v-if="icon"
       class="item-icon"
-      :class="icon"
+      :class="{'make-icon-inline': isProgressBarVisible, icon: true}"
     />
     <span
       class="item-label"
+      :class="{'make-label-invisible': isProgressBarVisible}"
     >
       <b>{{ t('product.networkStatus') }}:</b>
     </span>
     <span
       class="item-value"
+      :class="{'make-value-invisible': isProgressBarVisible}"
     >
       {{ networkStatusLabel }}
     </span>
@@ -97,7 +103,7 @@ export default Vue.extend({
     }
   }
 
-  @media (max-width: 900px) {
+  @media (max-width: 450px) {
     .icon-dot {
       vertical-align: top;
       padding: 0;
diff --git a/pkg/rancher-desktop/components/StatusBar.vue b/pkg/rancher-desktop/components/StatusBar.vue
index 2469dd09770..adf7cd010a5 100644
--- a/pkg/rancher-desktop/components/StatusBar.vue
+++ b/pkg/rancher-desktop/components/StatusBar.vue
@@ -14,7 +14,10 @@ type BarItem = {
 
 export default Vue.extend({
   components: { BackendProgress, StatusBarItem },
-  computed:   {
+  data() {
+    return { isProgressBarVisible: false };
+  },
+  computed: {
     ...mapGetters('preferences', ['getPreferences']),
     kubernetesVersion(): string {
       return this.getPreferences.kubernetes.version;
@@ -55,6 +58,11 @@ export default Vue.extend({
       ];
     },
   },
+  methods: {
+    updateProgressBarVisibility(isOpen: boolean) {
+      this.isProgressBarVisible = isOpen;
+    },
+  },
 });
 </script>
 
@@ -69,13 +77,14 @@ export default Vue.extend({
           :sub-component="item.component"
           :data="item.data"
           :icon="item.icon"
+          :is-progress-bar-visible="isProgressBarVisible"
           class="status-bar-item"
         >
         </status-bar-item>
       </template>
     </div>
     <div class="right-column">
-      <BackendProgress class="progress" />
+      <BackendProgress id="right" class="progress" @progressBarisOpen="updateProgressBarVisibility" />
     </div>
   </footer>
 </template>
diff --git a/pkg/rancher-desktop/components/StatusBarItem.vue b/pkg/rancher-desktop/components/StatusBarItem.vue
index ef8ded8ff7c..c42b87afa5b 100644
--- a/pkg/rancher-desktop/components/StatusBarItem.vue
+++ b/pkg/rancher-desktop/components/StatusBarItem.vue
@@ -26,6 +26,10 @@ export default Vue.extend({
       type:     String,
       required: true,
     },
+    isProgressBarVisible: {
+      type:    Boolean,
+      default: false,
+    },
   },
   computed: {
     getSubComponent(): VueConstructor | undefined {
@@ -61,20 +65,23 @@ export default Vue.extend({
       <img
         v-if="isSvgIcon"
         class="item-icon icon-svg"
+        :class="{'make-icon-inline': isProgressBarVisible}"
         :src="svgIconPath"
       >
       <i
         v-else
         class="item-icon"
-        :class="icon"
+        :class="{'make-icon-inline': isProgressBarVisible, icon: true}"
       />
       <span
         class="item-label"
+        :class="{'make-label-invisible': isProgressBarVisible}"
       >
         <b>{{ t(data.label.bar) }}:</b>
       </span>
       <span
         class="item-value"
+        :class="{'make-value-invisible': isProgressBarVisible}"
       >
         {{ data.value }}
       </span>
@@ -84,6 +91,7 @@ export default Vue.extend({
       v-if="subComponent"
       :icon="icon"
       :is-status-bar-item="true"
+      :is-progress-bar-visible="isProgressBarVisible"
     ></component>
   </div>
 </template>
@@ -108,7 +116,7 @@ export default Vue.extend({
     }
   }
 
-  @media (max-width: 1000px) {
+  @media (max-width: 500px) {
     .item-label, ::v-deep .item-label {
       display: none;
     }
@@ -118,7 +126,7 @@ export default Vue.extend({
     }
   }
 
-  @media (max-width: 900px) {
+  @media (max-width: 450px) {
     .item-value, ::v-deep .item-value {
       display: none;
     }
@@ -127,5 +135,25 @@ export default Vue.extend({
       display: inline;
     }
   }
+
+  @media (max-width: 1000px) {
+    .make-label-invisible, ::v-deep .make-label-invisible {
+      display: none;
+    }
+
+    .make-icon-inline, ::v-deep .make-icon-inline {
+      display: inline;
+    }
+  }
+
+  @media (max-width: 900px) {
+    .make-value-invisible, ::v-deep .make-value-invisible {
+      display: none;
+    }
+
+    .make-icon-inline, ::v-deep .make-icon-inline {
+      display: inline;
+    }
+  }
 }
 </style>
diff --git a/pkg/rancher-desktop/components/Version.vue b/pkg/rancher-desktop/components/Version.vue
index 5d7f2710a73..9982807ee1b 100644
--- a/pkg/rancher-desktop/components/Version.vue
+++ b/pkg/rancher-desktop/components/Version.vue
@@ -12,6 +12,10 @@ export default Vue.extend({
       type:    Boolean,
       default: false,
     },
+    isProgressBarVisible: {
+      type:    Boolean,
+      default: false,
+    },
   },
   data() {
     return { version: this.t('product.versionChecking') };
@@ -42,15 +46,17 @@ export default Vue.extend({
     <i
       v-if="icon"
       class="item-icon"
-      :class="icon"
+      :class="{'make-icon-inline': isProgressBarVisible, icon: true}"
     />
     <span
       class="item-label"
+      :class="{'make-label-invisible': isProgressBarVisible}"
     >
       <b>{{ t('product.version') }}:</b>
     </span>
     <span
       class="item-value"
+      :class="{'make-value-invisible': isProgressBarVisible}"
     >
       {{ version }}
     </span>
diff --git a/pkg/rancher-desktop/pages/images/add.vue b/pkg/rancher-desktop/pages/images/add.vue
index 9749811b1d1..76e0f06560e 100644
--- a/pkg/rancher-desktop/pages/images/add.vue
+++ b/pkg/rancher-desktop/pages/images/add.vue
@@ -90,7 +90,7 @@ export default {
       this.imageOutputCuller = getImageOutputCuller(command);
     },
     doImageAction({ action, image }) {
-      this.imageToPull = image.trim();
+      this.imageToPull = image;
       if (action === 'pull') {
         this.doPullAnImage();
       }