diff --git a/frontend/playwright.config.js b/frontend/playwright.config.js
index 4c0f3bb2ec..6b3103d87d 100644
--- a/frontend/playwright.config.js
+++ b/frontend/playwright.config.js
@@ -22,7 +22,7 @@ export default defineConfig({
   workers: 1,
   /* Timeout for expects (longer in CI) */
   expect: {
-    timeout: process.env.CI ? 20000 : 5000,
+    timeout: process.env.CI ? 60000 : 5000,
   },
 
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
diff --git a/frontend/playwright/ui/specs/variants.spec.js b/frontend/playwright/ui/specs/variants.spec.js
index 06ce147be4..a1c2149644 100644
--- a/frontend/playwright/ui/specs/variants.spec.js
+++ b/frontend/playwright/ui/specs/variants.spec.js
@@ -36,6 +36,12 @@ const setupVariantsFileWithVariant = async (workspacePage) => {
   await workspacePage.clickLeafLayer("Rectangle");
   await workspacePage.page.keyboard.press("Control+k");
   await workspacePage.page.keyboard.press("Control+k");
+
+  // We wait until layer-row starts looking like it an component
+  await workspacePage.page.getByTestId("layer-row")
+    .filter({ hasText: "Rectangle"})
+    .getByTestId("icon-component")
+    .waitFor();
 };
 
 const findVariant = async (workspacePage, index) => {
@@ -76,17 +82,13 @@ const findVariantNoWait = (workspacePage, index) => {
   const variant1 = workspacePage.layers
         .getByTestId("layer-row")
         .filter({ hasText: "Value 1" })
-        .filter({ has: workspacePage.page.getByTestId("icon-variant") })
         .nth(index);
 
   const variant2 = workspacePage.layers
         .getByTestId("layer-row")
         .filter({ hasText: "Value 2" })
-        .filter({ has: workspacePage.page.getByTestId("icon-variant") })
         .nth(index);
 
-  // await container.waitFor();
-
   return {
     container: container,
     variant1: variant1,