diff --git a/apps/poc-state-plugin/src/plugin.ts b/apps/poc-state-plugin/src/plugin.ts
index 75dd5b4..3e8d0f5 100644
--- a/apps/poc-state-plugin/src/plugin.ts
+++ b/apps/poc-state-plugin/src/plugin.ts
@@ -69,11 +69,23 @@ penpot.ui.onMessage<{ content: string; data: unknown }>((message) => {
     const selection = penpot.selection;
 
     for (const shape of selection) {
-      (
-        shape as PenpotText
-      ).characters = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id mauris ut felis finibus congue. Ut odio ipsum, condimentum id tellus sit amet, dapibus sagittis ligula. Pellentesque hendrerit, nulla sit amet aliquet scelerisque, orci nunc commodo tellus, quis hendrerit nisl massa non tellus.
+      if (penpot.utils.types.isText(shape)) {
+        shape.characters = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id mauris ut felis finibus congue. Ut odio ipsum, condimentum id tellus sit amet, dapibus sagittis ligula. Pellentesque hendrerit, nulla sit amet aliquet scelerisque, orci nunc commodo tellus, quis hendrerit nisl massa non tellus.
 
 Phasellus fringilla tortor elit, ac dictum tellus posuere sodales. Ut eget imperdiet ante. Nunc eros magna, tincidunt non finibus in, tempor elementum nunc. Sed commodo magna in arcu aliquam efficitur.`;
+      } else if (penpot.utils.types.isRectangle(shape)) {
+        const width = Math.ceil(shape.width);
+        const height = Math.ceil(shape.height);
+        penpot
+          .uploadMediaUrl(
+            'placeholder',
+            `https://picsum.photos/${width}/${height}`
+          )
+          .then((data) => {
+            shape.fills = [{ fillOpacity: 1, fillImage: data }];
+          })
+          .catch((err) => console.error(err));
+      }
     }
   }
 });
diff --git a/libs/plugin-types/index.d.ts b/libs/plugin-types/index.d.ts
index 6174639..8a2a488 100644
--- a/libs/plugin-types/index.d.ts
+++ b/libs/plugin-types/index.d.ts
@@ -166,6 +166,11 @@ export interface PenpotContext {
   getSelectedShapes(): PenpotShape[];
   getTheme(): PenpotTheme;
 
+  uploadMediaUrl(name: string, url: string): Promise<PenpotImageData>;
+
+  group(first: PenpotShape, ...rest: PenpotShape): PenpotGroup;
+  ungroup(first: PenpotShape, ...rest: PenpotShape);
+
   createRectangle(): PenpotRectangle;
   createFrame(): PepotFrame;
 }
@@ -183,6 +188,8 @@ export interface Penpot extends PenpotContext {
   utils: {
     types: {
       isText(shape: PenpotShape): shape is PenpotText;
+      isRectangle(shape: PenpotShape): shape is PenpotRectangle;
+      isFrame(shape: PenpotShape): shape is PenpotFrame;
     };
   };
   log: (...data: unknown[]) => void;
@@ -198,19 +205,6 @@ export interface Penpot extends PenpotContext {
   ) => void;
 
   fetch: typeof fetch;
-
-  // Exposes Penpot Context
-  root: PenpotShape;
-  currentPage: PenpotPage;
-  selection: PenpotShape[];
-
-  getFile(): PenpotFile | null;
-  getPage(): PenpotPage | null;
-  getSelected(): string[];
-  getSelectedShapes(): PenpotShape[];
-  getTheme(): PenpotTheme;
-
-  createRectangle(): PenpotShape;
 }
 
 declare global {
diff --git a/libs/plugins-runtime/src/lib/api/index.ts b/libs/plugins-runtime/src/lib/api/index.ts
index e53fe6a..452f980 100644
--- a/libs/plugins-runtime/src/lib/api/index.ts
+++ b/libs/plugins-runtime/src/lib/api/index.ts
@@ -4,6 +4,8 @@ import type {
   EventsMap,
   PenpotPage,
   PenpotShape,
+  PenpotRectangle,
+  PenpotFrame,
 } from '@penpot/plugin-types';
 
 import { Manifest, Permissions } from '../models/manifest.model';
@@ -44,7 +46,7 @@ export function triggerEvent(
   listeners.forEach((listener) => listener(message));
 }
 
-export function createApi(context: PenpotContext, manifest: Manifest) {
+export function createApi(context: PenpotContext, manifest: Manifest): Penpot {
   const closePlugin = () => {
     modal?.removeEventListener('close', closePlugin);
     if (modal) {
@@ -91,6 +93,12 @@ export function createApi(context: PenpotContext, manifest: Manifest) {
         isText(shape: PenpotShape): shape is PenpotText {
           return shape.type === 'text';
         },
+        isRectangle(shape: PenpotShape): shape is PenpotRectangle {
+          return shape.type === 'rect';
+        },
+        isFrame(shape: PenpotShape): shape is PenpotFrame {
+          return shape.type === 'frame';
+        },
       },
     },
 
@@ -187,6 +195,10 @@ export function createApi(context: PenpotContext, manifest: Manifest) {
       return context.createRectangle();
     },
 
+    uploadMediaUrl(name: string, url: string) {
+      return context.uploadMediaUrl(name, url);
+    },
+
     fetch,
   };
 
diff --git a/libs/plugins-styles/src/lib/core/generic.css b/libs/plugins-styles/src/lib/core/generic.css
index 3338c1f..9d885ee 100644
--- a/libs/plugins-styles/src/lib/core/generic.css
+++ b/libs/plugins-styles/src/lib/core/generic.css
@@ -1,9 +1,10 @@
-html, body {
-    font-family: 'Work Sans', sans-serif;
-    font-optical-sizing: auto;
-    font-style: normal;
-    margin: 0;
-    padding: 0;
+html,
+body {
+  font-family: 'Work Sans', sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  margin: 0;
+  padding: 0;
 }
 
 body,
@@ -26,17 +27,17 @@ pre {
 }
 
 ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-[data-theme="dark"] {
-    background-color: var(--db-primary);
-    color: var(--lb-primary);
+[data-theme='dark'] {
+  background-color: var(--db-quaternary);
+  color: var(--lb-primary);
 }
 
-[data-theme="light"] {
-    background-color: var(--lb-primary);
-    color: var(--db-primary);
-}
\ No newline at end of file
+[data-theme='light'] {
+  background-color: var(--lb-primary);
+  color: var(--db-primary);
+}