diff --git a/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx b/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx
index 21491e9c1..bdc61c10a 100644
--- a/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx
+++ b/src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx
@@ -14,7 +14,11 @@ export const DashboardWrapper = ({ wrapper }: DashboardWrapperProps) => {
 
   return (
     <div
-      className={apps.length > 0 || isEditMode ? defaultClasses : `${defaultClasses} gridstack-empty-wrapper`}
+      className={
+        apps.length > 0 || widgets.length > 0 || isEditMode
+          ? defaultClasses
+          : `${defaultClasses} gridstack-empty-wrapper`
+      }
       style={{ transitionDuration: '0s' }}
       data-wrapper={wrapper.id}
       ref={refs.wrapper}
diff --git a/src/tools/config/migrateConfig.ts b/src/tools/config/migrateConfig.ts
index e147496c5..00965af06 100644
--- a/src/tools/config/migrateConfig.ts
+++ b/src/tools/config/migrateConfig.ts
@@ -131,10 +131,19 @@ const getConfigAndCreateIfNotExsists = (
   const category: CategoryType = {
     id: uuidv4(),
     name: categoryName,
-    position: config.categories.length,
+    position: config.categories.length + 1, // sync up with index of categories
   };
 
   config.categories.push(category);
+
+  // sync up with categories
+  if (config.wrappers.length < config.categories.length) {
+    config.wrappers.push({
+      id: uuidv4(),
+      position: config.wrappers.length + 1, // sync up with index of categories
+    });
+  }
+
   return category;
 };