diff --git a/frontend/.gitignore b/frontend/.gitignore
index 8d2f604e1..dd3776ebd 100644
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -10,5 +10,4 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
-visual-dashboard.spec.js-snapshots
-
+/playwright/**/visual-specs/**/*.png
diff --git a/frontend/playwright/data/assets/get-file-fragment-with-assets-components.json b/frontend/playwright/data/assets/get-file-fragment-with-assets-components.json
new file mode 100644
index 000000000..4f8cfb630
--- /dev/null
+++ b/frontend/playwright/data/assets/get-file-fragment-with-assets-components.json
@@ -0,0 +1,31 @@
+{
+    "~:id": "~u015fda4f-caa6-8103-8004-862a9e4b4d4b",
+    "~:file-id": "~u015fda4f-caa6-8103-8004-862a00dd4f31",
+    "~:created-at": "~m1718718436639",
+    "~:content": {
+        "~ue117f7f6-433c-807e-8004-862a38e1823d": {
+            "~:id": "~ue117f7f6-433c-807e-8004-862a38e1823d",
+            "~:name": "Button",
+            "~:path": "",
+            "~:modified-at": "~m1718718335855",
+            "~:main-instance-id": "~ue117f7f6-433c-807e-8004-862a38e0099a",
+            "~:main-instance-page": "~u015fda4f-caa6-8103-8004-862a00ddbe94"
+        },
+        "~ue117f7f6-433c-807e-8004-862a51a90ef5": {
+            "~:id": "~ue117f7f6-433c-807e-8004-862a51a90ef5",
+            "~:name": "Badge",
+            "~:path": "",
+            "~:modified-at": "~m1718718361245",
+            "~:main-instance-id": "~ue117f7f6-433c-807e-8004-862a51a84a91",
+            "~:main-instance-page": "~u015fda4f-caa6-8103-8004-862a00ddbe94"
+        },
+        "~ue117f7f6-433c-807e-8004-862a9b541a46": {
+            "~:id": "~ue117f7f6-433c-807e-8004-862a9b541a46",
+            "~:name": "Avatar",
+            "~:path": "",
+            "~:modified-at": "~m1718718436652",
+            "~:main-instance-id": "~ue117f7f6-433c-807e-8004-862a9b5374b6",
+            "~:main-instance-page": "~u015fda4f-caa6-8103-8004-862a00ddbe94"
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontend/playwright/data/assets/get-file-fragmnet-with-assets-page.json b/frontend/playwright/data/assets/get-file-fragmnet-with-assets-page.json
new file mode 100644
index 000000000..99e01ce34
--- /dev/null
+++ b/frontend/playwright/data/assets/get-file-fragmnet-with-assets-page.json
@@ -0,0 +1,630 @@
+{
+    "~:id": "~u015fda4f-caa6-8103-8004-862a9e4ad279",
+    "~:file-id": "~u015fda4f-caa6-8103-8004-862a00dd4f31",
+    "~:created-at": "~m1718718436639",
+    "~:content": {
+        "~:options": {},
+        "~:objects": {
+            "~u00000000-0000-0000-0000-000000000000": {
+                "~#shape": {
+                    "~:y": 0,
+                    "~:hide-fill-on-export": false,
+                    "~:transform": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:rotation": 0,
+                    "~:name": "Root Frame",
+                    "~:width": 0.01,
+                    "~:type": "~:frame",
+                    "~:points": [
+                        {
+                            "~#point": {
+                                "~:x": 0,
+                                "~:y": 0
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 0.01,
+                                "~:y": 0
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 0.01,
+                                "~:y": 0.01
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 0,
+                                "~:y": 0.01
+                            }
+                        }
+                    ],
+                    "~:proportion-lock": false,
+                    "~:transform-inverse": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:id": "~u00000000-0000-0000-0000-000000000000",
+                    "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+                    "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+                    "~:strokes": [],
+                    "~:x": 0,
+                    "~:proportion": 1.0,
+                    "~:selrect": {
+                        "~#rect": {
+                            "~:x": 0,
+                            "~:y": 0,
+                            "~:width": 0.01,
+                            "~:height": 0.01,
+                            "~:x1": 0,
+                            "~:y1": 0,
+                            "~:x2": 0.01,
+                            "~:y2": 0.01
+                        }
+                    },
+                    "~:fills": [
+                        {
+                            "~:fill-color": "#FFFFFF",
+                            "~:fill-opacity": 1
+                        }
+                    ],
+                    "~:flip-x": null,
+                    "~:height": 0.01,
+                    "~:flip-y": null,
+                    "~:shapes": [
+                        "~ue117f7f6-433c-807e-8004-862a38e0099a",
+                        "~ue117f7f6-433c-807e-8004-862a51a84a91",
+                        "~ue117f7f6-433c-807e-8004-862a9b5374b6"
+                    ]
+                }
+            },
+            "~ue117f7f6-433c-807e-8004-862a18bba46f": {
+                "~#shape": {
+                    "~:y": 220,
+                    "~:rx": 0,
+                    "~:transform": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:rotation": 0,
+                    "~:grow-type": "~:fixed",
+                    "~:hide-in-viewer": false,
+                    "~:name": "Button",
+                    "~:width": 120,
+                    "~:type": "~:rect",
+                    "~:points": [
+                        {
+                            "~#point": {
+                                "~:x": 663,
+                                "~:y": 220
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 783,
+                                "~:y": 220
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 783,
+                                "~:y": 274
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 663,
+                                "~:y": 274
+                            }
+                        }
+                    ],
+                    "~:proportion-lock": false,
+                    "~:transform-inverse": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:constraints-v": "~:scale",
+                    "~:constraints-h": "~:scale",
+                    "~:id": "~ue117f7f6-433c-807e-8004-862a18bba46f",
+                    "~:parent-id": "~ue117f7f6-433c-807e-8004-862a38e0099a",
+                    "~:frame-id": "~ue117f7f6-433c-807e-8004-862a38e0099a",
+                    "~:strokes": [],
+                    "~:x": 663,
+                    "~:proportion": 1,
+                    "~:selrect": {
+                        "~#rect": {
+                            "~:x": 663,
+                            "~:y": 220,
+                            "~:width": 120,
+                            "~:height": 54,
+                            "~:x1": 663,
+                            "~:y1": 220,
+                            "~:x2": 783,
+                            "~:y2": 274
+                        }
+                    },
+                    "~:fills": [
+                        {
+                            "~:fill-color": "#B1B2B5",
+                            "~:fill-opacity": 1
+                        }
+                    ],
+                    "~:flip-x": null,
+                    "~:ry": 0,
+                    "~:height": 54,
+                    "~:flip-y": null
+                }
+            },
+            "~ue117f7f6-433c-807e-8004-862a38e0099a": {
+                "~#shape": {
+                    "~:y": 220,
+                    "~:hide-fill-on-export": false,
+                    "~:transform": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:rotation": 0,
+                    "~:hide-in-viewer": true,
+                    "~:name": "Button",
+                    "~:width": 120,
+                    "~:type": "~:frame",
+                    "~:points": [
+                        {
+                            "~#point": {
+                                "~:x": 663,
+                                "~:y": 220
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 783,
+                                "~:y": 220
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 783,
+                                "~:y": 274
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 663,
+                                "~:y": 274
+                            }
+                        }
+                    ],
+                    "~:component-root": true,
+                    "~:show-content": true,
+                    "~:proportion-lock": false,
+                    "~:transform-inverse": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:id": "~ue117f7f6-433c-807e-8004-862a38e0099a",
+                    "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+                    "~:component-id": "~ue117f7f6-433c-807e-8004-862a38e1823d",
+                    "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+                    "~:strokes": [],
+                    "~:x": 663,
+                    "~:main-instance": true,
+                    "~:proportion": 1,
+                    "~:selrect": {
+                        "~#rect": {
+                            "~:x": 663,
+                            "~:y": 220,
+                            "~:width": 120,
+                            "~:height": 54,
+                            "~:x1": 663,
+                            "~:y1": 220,
+                            "~:x2": 783,
+                            "~:y2": 274
+                        }
+                    },
+                    "~:fills": [],
+                    "~:flip-x": null,
+                    "~:height": 54,
+                    "~:component-file": "~u015fda4f-caa6-8103-8004-862a00dd4f31",
+                    "~:flip-y": null,
+                    "~:shapes": [
+                        "~ue117f7f6-433c-807e-8004-862a18bba46f"
+                    ]
+                }
+            },
+            "~ue117f7f6-433c-807e-8004-862a40b7caca": {
+                "~#shape": {
+                    "~:y": 188,
+                    "~:transform": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:rotation": 0,
+                    "~:grow-type": "~:fixed",
+                    "~:hide-in-viewer": false,
+                    "~:name": "Badge",
+                    "~:width": 61,
+                    "~:type": "~:circle",
+                    "~:points": [
+                        {
+                            "~#point": {
+                                "~:x": 860,
+                                "~:y": 188
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 921,
+                                "~:y": 188
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 921,
+                                "~:y": 247
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 860,
+                                "~:y": 247
+                            }
+                        }
+                    ],
+                    "~:proportion-lock": false,
+                    "~:transform-inverse": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:constraints-v": "~:scale",
+                    "~:constraints-h": "~:scale",
+                    "~:id": "~ue117f7f6-433c-807e-8004-862a40b7caca",
+                    "~:parent-id": "~ue117f7f6-433c-807e-8004-862a51a84a91",
+                    "~:frame-id": "~ue117f7f6-433c-807e-8004-862a51a84a91",
+                    "~:strokes": [],
+                    "~:x": 860,
+                    "~:proportion": 1,
+                    "~:selrect": {
+                        "~#rect": {
+                            "~:x": 860,
+                            "~:y": 188,
+                            "~:width": 61,
+                            "~:height": 59,
+                            "~:x1": 860,
+                            "~:y1": 188,
+                            "~:x2": 921,
+                            "~:y2": 247
+                        }
+                    },
+                    "~:fills": [
+                        {
+                            "~:fill-color": "#7798ff",
+                            "~:fill-opacity": 1
+                        }
+                    ],
+                    "~:flip-x": null,
+                    "~:height": 59,
+                    "~:flip-y": null
+                }
+            },
+            "~ue117f7f6-433c-807e-8004-862a51a84a91": {
+                "~#shape": {
+                    "~:y": 188,
+                    "~:hide-fill-on-export": false,
+                    "~:transform": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:rotation": 0,
+                    "~:hide-in-viewer": true,
+                    "~:name": "Badge",
+                    "~:width": 61,
+                    "~:type": "~:frame",
+                    "~:points": [
+                        {
+                            "~#point": {
+                                "~:x": 860,
+                                "~:y": 188
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 921,
+                                "~:y": 188
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 921,
+                                "~:y": 247
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 860,
+                                "~:y": 247
+                            }
+                        }
+                    ],
+                    "~:component-root": true,
+                    "~:show-content": true,
+                    "~:proportion-lock": false,
+                    "~:transform-inverse": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:id": "~ue117f7f6-433c-807e-8004-862a51a84a91",
+                    "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+                    "~:component-id": "~ue117f7f6-433c-807e-8004-862a51a90ef5",
+                    "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+                    "~:strokes": [],
+                    "~:x": 860,
+                    "~:main-instance": true,
+                    "~:proportion": 1,
+                    "~:selrect": {
+                        "~#rect": {
+                            "~:x": 860,
+                            "~:y": 188,
+                            "~:width": 61,
+                            "~:height": 59,
+                            "~:x1": 860,
+                            "~:y1": 188,
+                            "~:x2": 921,
+                            "~:y2": 247
+                        }
+                    },
+                    "~:fills": [],
+                    "~:flip-x": null,
+                    "~:height": 59,
+                    "~:component-file": "~u015fda4f-caa6-8103-8004-862a00dd4f31",
+                    "~:flip-y": null,
+                    "~:shapes": [
+                        "~ue117f7f6-433c-807e-8004-862a40b7caca"
+                    ]
+                }
+            },
+            "~ue117f7f6-433c-807e-8004-862a8c166257": {
+                "~#shape": {
+                    "~:y": 97,
+                    "~:rx": 0,
+                    "~:transform": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:rotation": 0,
+                    "~:grow-type": "~:fixed",
+                    "~:hide-in-viewer": false,
+                    "~:name": "Avatar",
+                    "~:width": 66,
+                    "~:type": "~:rect",
+                    "~:points": [
+                        {
+                            "~#point": {
+                                "~:x": 554,
+                                "~:y": 97
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 620,
+                                "~:y": 97
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 620,
+                                "~:y": 163
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 554,
+                                "~:y": 163
+                            }
+                        }
+                    ],
+                    "~:proportion-lock": false,
+                    "~:transform-inverse": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:constraints-v": "~:scale",
+                    "~:constraints-h": "~:scale",
+                    "~:id": "~ue117f7f6-433c-807e-8004-862a8c166257",
+                    "~:parent-id": "~ue117f7f6-433c-807e-8004-862a9b5374b6",
+                    "~:frame-id": "~ue117f7f6-433c-807e-8004-862a9b5374b6",
+                    "~:strokes": [],
+                    "~:x": 554,
+                    "~:proportion": 1,
+                    "~:selrect": {
+                        "~#rect": {
+                            "~:x": 554,
+                            "~:y": 97,
+                            "~:width": 66,
+                            "~:height": 66,
+                            "~:x1": 554,
+                            "~:y1": 97,
+                            "~:x2": 620,
+                            "~:y2": 163
+                        }
+                    },
+                    "~:fills": [
+                        {
+                            "~:fill-color": "#ff6ffc",
+                            "~:fill-opacity": 1
+                        }
+                    ],
+                    "~:flip-x": null,
+                    "~:ry": 0,
+                    "~:height": 66,
+                    "~:flip-y": null
+                }
+            },
+            "~ue117f7f6-433c-807e-8004-862a9b5374b6": {
+                "~#shape": {
+                    "~:y": 97,
+                    "~:hide-fill-on-export": false,
+                    "~:transform": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:rotation": 0,
+                    "~:hide-in-viewer": true,
+                    "~:name": "Avatar",
+                    "~:width": 66,
+                    "~:type": "~:frame",
+                    "~:points": [
+                        {
+                            "~#point": {
+                                "~:x": 554,
+                                "~:y": 97
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 620,
+                                "~:y": 97
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 620,
+                                "~:y": 163
+                            }
+                        },
+                        {
+                            "~#point": {
+                                "~:x": 554,
+                                "~:y": 163
+                            }
+                        }
+                    ],
+                    "~:component-root": true,
+                    "~:show-content": true,
+                    "~:proportion-lock": false,
+                    "~:transform-inverse": {
+                        "~#matrix": {
+                            "~:a": 1.0,
+                            "~:b": 0.0,
+                            "~:c": 0.0,
+                            "~:d": 1.0,
+                            "~:e": 0.0,
+                            "~:f": 0.0
+                        }
+                    },
+                    "~:id": "~ue117f7f6-433c-807e-8004-862a9b5374b6",
+                    "~:parent-id": "~u00000000-0000-0000-0000-000000000000",
+                    "~:component-id": "~ue117f7f6-433c-807e-8004-862a9b541a46",
+                    "~:frame-id": "~u00000000-0000-0000-0000-000000000000",
+                    "~:strokes": [],
+                    "~:x": 554,
+                    "~:main-instance": true,
+                    "~:proportion": 1,
+                    "~:selrect": {
+                        "~#rect": {
+                            "~:x": 554,
+                            "~:y": 97,
+                            "~:width": 66,
+                            "~:height": 66,
+                            "~:x1": 554,
+                            "~:y1": 97,
+                            "~:x2": 620,
+                            "~:y2": 163
+                        }
+                    },
+                    "~:fills": [],
+                    "~:flip-x": null,
+                    "~:height": 66,
+                    "~:component-file": "~u015fda4f-caa6-8103-8004-862a00dd4f31",
+                    "~:flip-y": null,
+                    "~:shapes": [
+                        "~ue117f7f6-433c-807e-8004-862a8c166257"
+                    ]
+                }
+            }
+        },
+        "~:id": "~u015fda4f-caa6-8103-8004-862a00ddbe94",
+        "~:name": "Page 1"
+    }
+}
\ No newline at end of file
diff --git a/frontend/playwright/data/assets/get-file-with-assets.json b/frontend/playwright/data/assets/get-file-with-assets.json
new file mode 100644
index 000000000..29758d1a0
--- /dev/null
+++ b/frontend/playwright/data/assets/get-file-with-assets.json
@@ -0,0 +1,105 @@
+{
+  "~:features":{
+    "~#set":[
+      "layout/grid",
+      "styles/v2",
+      "fdata/pointer-map",
+      "fdata/objects-map",
+      "components/v2",
+      "fdata/shape-data-type"
+    ]
+  },
+  "~:permissions":{
+    "~:type":"~:membership",
+    "~:is-owner":true,
+    "~:is-admin":true,
+    "~:can-edit":true,
+    "~:can-read":true,
+    "~:is-logged":true
+  },
+  "~:has-media-trimmed":false,
+  "~:comment-thread-seqn":0,
+  "~:name":"Lorem ipsum",
+  "~:revn":14,
+  "~:modified-at":"~m1718718464651",
+  "~:id":"~u015fda4f-caa6-8103-8004-862a00dd4f31",
+  "~:is-shared":false,
+  "~:version":49,
+  "~:project-id":"~u0515a066-e303-8169-8004-73eb401b5d55",
+  "~:created-at":"~m1718718275492",
+  "~:data":{
+    "~:colors":{
+      "~ue117f7f6-433c-807e-8004-862aa7732f9c":{
+        "~:path":"",
+        "~:color":"#ff6ffc",
+        "~:name":"Rosita",
+        "~:modified-at":"~m1718718452317",
+        "~:opacity":1,
+        "~:id":"~ue117f7f6-433c-807e-8004-862aa7732f9c"
+      },
+      "~ue117f7f6-433c-807e-8004-862ab306fa2b":{
+        "~:path":"",
+        "~:color":"#7798ff",
+        "~:name":"#7798ff",
+        "~:modified-at":"~m1718718461420",
+        "~:opacity":1,
+        "~:id":"~ue117f7f6-433c-807e-8004-862ab306fa2b"
+      }
+    },
+    "~:typographies":{
+      "~ue117f7f6-433c-807e-8004-862ab6ae29d8":{
+        "~:line-height":"1.2",
+        "~:font-style":"normal",
+        "~:text-transform":"none",
+        "~:font-id":"sourcesanspro",
+        "~:font-size":"14",
+        "~:font-weight":"400",
+        "~:name":"Source Sans Pro Regular",
+        "~:modified-at":"~m1718718464655",
+        "~:font-variant-id":"regular",
+        "~:id":"~ue117f7f6-433c-807e-8004-862ab6ae29d8",
+        "~:letter-spacing":"0",
+        "~:font-family":"sourcesanspro"
+      }
+    },
+    "~:pages":[
+      "~u015fda4f-caa6-8103-8004-862a00ddbe94"
+    ],
+    "~:components":{
+      "~#penpot/pointer":[
+        "~u015fda4f-caa6-8103-8004-862a9e4b4d4b",
+        {
+          "~:created-at":"~m1718718436653"
+        }
+      ]
+    },
+    "~:id":"~u015fda4f-caa6-8103-8004-862a00dd4f31",
+    "~:options":{
+      "~:components-v2":true
+    },
+    "~:recent-colors":[
+      {
+        "~:color":"#b5b1b4",
+        "~:opacity":1
+      },
+      {
+        "~:color":"#ff6ffc",
+        "~:opacity":1
+      },
+      {
+        "~:color":"#7798ff",
+        "~:opacity":1
+      }
+    ],
+    "~:pages-index":{
+      "~u015fda4f-caa6-8103-8004-862a00ddbe94":{
+        "~#penpot/pointer":[
+          "~u015fda4f-caa6-8103-8004-862a9e4ad279",
+          {
+            "~:created-at":"~m1718718436653"
+          }
+        ]
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js
index c227f09b6..6e6c8b597 100644
--- a/frontend/playwright/ui/pages/WorkspacePage.js
+++ b/frontend/playwright/ui/pages/WorkspacePage.js
@@ -43,13 +43,14 @@ export class WorkspacePage extends BaseWebSocketPage {
     this.presentUserListItems = page.getByTestId("active-users-list").getByAltText("Princesa Leia");
     this.viewport = page.getByTestId("viewport");
     this.rootShape = page.locator(`[id="shape-00000000-0000-0000-0000-000000000000"]`);
-    this.toolbarOptions =  page.getByTestId("toolbar-options");
+    this.toolbarOptions = page.getByTestId("toolbar-options");
     this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
     this.toggleToolbarButton = page.getByRole("button", { name: "Toggle toolbar" });
     this.colorpicker = page.getByTestId("colorpicker");
     this.layers = page.getByTestId("layer-tree");
     this.palette = page.getByTestId("palette");
     this.sidebar = page.getByTestId("left-sidebar");
+    this.rightSidebar = page.getByTestId("right-sidebar");
     this.selectionRect = page.getByTestId("workspace-selection-rect");
     this.horizontalScrollbar = page.getByTestId("horizontal-scrollbar");
     this.librariesModal = page.getByTestId("libraries-modal");
@@ -119,7 +120,7 @@ export class WorkspacePage extends BaseWebSocketPage {
   }
 
   async moveSelectionToShape(name) {
-    await this.page.locator('rect.viewport-selrect').hover();
+    await this.page.locator("rect.viewport-selrect").hover();
     await this.page.mouse.down();
     await this.viewport.getByTestId(name).first().hover({ force: true });
     await this.page.mouse.up();
@@ -170,9 +171,7 @@ export class WorkspacePage extends BaseWebSocketPage {
   }
 
   async clickColorPalette(clickOptions = {}) {
-    await this.palette
-      .getByRole("button", { name: "Color Palette (Alt+P)" })
-      .click(clickOptions);
+    await this.palette.getByRole("button", { name: "Color Palette (Alt+P)" }).click(clickOptions);
   }
 
   async clickTogglePalettesVisibility(clickOptions = {}) {
diff --git a/frontend/playwright/ui/visual-specs/example.spec.js-snapshots/Shows-login-form-correctly-1-ds-linux.png b/frontend/playwright/ui/visual-specs/example.spec.js-snapshots/Shows-login-form-correctly-1-ds-linux.png
deleted file mode 100644
index bbe1dc402..000000000
Binary files a/frontend/playwright/ui/visual-specs/example.spec.js-snapshots/Shows-login-form-correctly-1-ds-linux.png and /dev/null differ
diff --git a/frontend/playwright/ui/visual-specs/workspace.spec.js b/frontend/playwright/ui/visual-specs/workspace.spec.js
new file mode 100644
index 000000000..b21f13996
--- /dev/null
+++ b/frontend/playwright/ui/visual-specs/workspace.spec.js
@@ -0,0 +1,124 @@
+import { test, expect } from "@playwright/test";
+import { WorkspacePage } from "../pages/WorkspacePage";
+
+test.beforeEach(async ({ page }) => {
+  await WorkspacePage.init(page);
+});
+
+const setupFileWithAssets = async (workspace) => {
+  const fileId = "015fda4f-caa6-8103-8004-862a00dd4f31";
+  const pageId = "015fda4f-caa6-8103-8004-862a00ddbe94";
+  const fragments = {
+    "015fda4f-caa6-8103-8004-862a9e4b4d4b": "assets/get-file-fragment-with-assets-components.json",
+    "015fda4f-caa6-8103-8004-862a9e4ad279": "assets/get-file-fragmnet-with-assets-page.json",
+  };
+
+  await workspace.setupEmptyFile();
+  await workspace.mockRPC(/get\-file\?/, "assets/get-file-with-assets.json");
+
+  for (const [id, fixture] of Object.entries(fragments)) {
+    await workspace.mockRPC(`get-file-fragment?file-id=*&fragment-id=${id}`, fixture);
+  }
+
+  return { fileId, pageId };
+};
+
+test("Shows the workspace correctly for a blank file", async ({ page }) => {
+  const workspace = new WorkspacePage(page);
+  await workspace.setupEmptyFile();
+
+  await workspace.goToWorkspace();
+
+  await expect(workspace.page).toHaveScreenshot();
+});
+
+test.describe("Design tab", () => {
+  test("Shows the design tab when selecting a shape", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.mockRPC(/get\-file\?/, "workspace/get-file-not-empty.json");
+
+    await workspace.goToWorkspace({
+      fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374",
+      pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375",
+    });
+
+    await workspace.clickLeafLayer("Rectangle");
+
+    await expect(workspace.page).toHaveScreenshot();
+  });
+
+  test("Shows expanded sections of the design tab", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.mockRPC(/get\-file\?/, "workspace/get-file-not-empty.json");
+
+    await workspace.goToWorkspace({
+      fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374",
+      pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375",
+    });
+
+    await workspace.clickLeafLayer("Rectangle");
+    await workspace.rightSidebar.getByTestId("add-stroke").click();
+
+    await expect(workspace.page).toHaveScreenshot();
+  });
+});
+
+test.describe("Assets tab", () => {
+  test("Shows the libraries modal correctly", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.mockRPC("link-file-to-library", "workspace/link-file-to-library.json");
+    await workspace.mockRPC(
+      "get-team-shared-files?team-id=*",
+      "workspace/get-team-shared-libraries-non-empty.json",
+    );
+
+    await workspace.goToWorkspace();
+    await workspace.clickAssets();
+    await workspace.openLibrariesModal();
+
+    await expect(workspace.page).toHaveScreenshot();
+
+    await workspace.clickLibrary("Testing library 1");
+
+    await expect(workspace.page).toHaveScreenshot();
+  });
+
+  test("Shows the assets correctly", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    const { fileId, pageId } = await setupFileWithAssets(workspace);
+
+    await workspace.goToWorkspace({ fileId, pageId });
+
+    await workspace.clickAssets();
+    await workspace.sidebar.getByRole("button", { name: "Components" }).click();
+    await workspace.sidebar.getByRole("button", { name: "Colors" }).click();
+    await workspace.sidebar.getByRole("button", { name: "Typographies" }).click();
+
+    await expect(workspace.page).toHaveScreenshot();
+
+    await workspace.sidebar.getByTitle("List view").click();
+
+    await expect(workspace.page).toHaveScreenshot();
+  });
+});
+
+test.describe("Palette", () => {
+  test("Shows the bottom palette expanded and collapsed", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    const { fileId, pageId } = await setupFileWithAssets(workspace);
+
+    await workspace.goToWorkspace({ fileId, pageId });
+
+    await expect(workspace.page).toHaveScreenshot();
+
+    await workspace.palette.getByRole("button", { name: "Typographies" }).click();
+    await expect(workspace.palette.getByText("Source Sans Pro Regular")).toBeVisible();
+    await expect(workspace.page).toHaveScreenshot();
+
+    await workspace.palette.getByRole("button", { name: "Color Palette" }).click();
+    await expect(workspace.palette.getByRole("button", { name: "#7798ff" })).toBeVisible();
+  });
+});
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index 1aaf88c7b..f83b56686 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -169,6 +169,7 @@
                                    :expanded (> size 276))
 
               :id "right-sidebar-aside"
+              :data-testid "right-sidebar"
               :data-size (str size)
               :style #js {"--width" (if can-be-expanded? (dm/str size "px") 276)}}
       (when can-be-expanded?
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
index 72e01e609..371716d7e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
@@ -520,9 +520,11 @@
                             :name "listing-style"}
           [:& radio-button {:icon i/view-as-list
                             :value "list"
+                            :title (tr "workspace.assets.list-view")
                             :id "opt-list"}]
           [:& radio-button {:icon i/flex-grid
                             :value "grid"
+                            :title (tr "workspace.assets.grid-view")
                             :id "opt-grid"}]]])
 
       (when (and components-v2 (not read-only?) local?)
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index 0195d362d..095827bf9 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -3396,6 +3396,14 @@ msgstr "Sort"
 msgid "workspace.assets.typography"
 msgstr "Typographies"
 
+#: src/app/main/ui/workspace/sidebar/assets/components.cljs, src/app/main/wui/workspace/sidebar/options/menus/component.cljs
+msgid "workspace.assets.grid-view"
+msgstr "Grid view"
+
+#: src/app/main/ui/workspace/sidebar/assets/components.cljs, src/app/main/wui/workspace/sidebar/options/menus/component.cljs
+msgid "workspace.assets.list-view"
+msgstr "List view"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
 msgid "workspace.assets.typography.font-id"
 msgstr "Font"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index 0ad3a9a4f..3b9bd101d 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -3523,6 +3523,14 @@ msgstr "Ordenar"
 msgid "workspace.assets.typography"
 msgstr "Tipografías"
 
+#: src/app/main/ui/workspace/sidebar/assets/components.cljs, src/app/main/wui/workspace/sidebar/options/menus/component.cljs
+msgid "workspace.assets.grid-view"
+msgstr "Ver como rejilla"
+
+#: src/app/main/ui/workspace/sidebar/assets/components.cljs, src/app/main/wui/workspace/sidebar/options/menus/component.cljs
+msgid "workspace.assets.list-view"
+msgstr "Ver como lista"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
 msgid "workspace.assets.typography.font-id"
 msgstr "Fuente"