diff --git a/src/extensions/image/ResizableImage.ts b/src/extensions/image/ResizableImage.ts
new file mode 100644
index 0000000..f4a420b
--- /dev/null
+++ b/src/extensions/image/ResizableImage.ts
@@ -0,0 +1,85 @@
+import { type ImageView } from './imageView'
+
+export default class ResizableImage {
+  imageView: ImageView
+  private isResizing: boolean = false
+  private initialX: number = 0
+
+  private initialWidth: number = 0
+
+  quadradoTopEsquerda!: HTMLElement
+  quadradoTopDireita!: HTMLElement
+  quadradoBaixoEsquerda!: HTMLElement
+  quadradoBaixoDireita!: HTMLElement
+  bindResizeEvent: (event: PointerEvent) => void
+  bindStopResizeEvent: () => void
+
+  constructor(imageView: ImageView) {
+    this.imageView = imageView
+    this.bindResizeEvent = this.resize.bind(this)
+    this.bindStopResizeEvent = this.stopResize.bind(this)
+    this.initResize()
+  }
+
+  private initResize() {
+    const element = this.imageView.imageWrapper
+    element.style.position = 'relative'
+
+    // Quadrado no canto superior esquerdo
+    this.quadradoTopEsquerda = element.appendChild(document.createElement('div'))
+    this.quadradoTopEsquerda.className = 'quadrado canto-superior-esquerdo'
+    this.addResizeEvent(this.quadradoTopEsquerda)
+    // Quadrado no canto superior direito
+    this.quadradoTopDireita = element.appendChild(document.createElement('div'))
+    this.quadradoTopDireita.className = 'quadrado canto-superior-direito'
+    this.addResizeEvent(this.quadradoTopDireita)
+    // Quadrado no canto inferior esquerdo
+    this.quadradoBaixoEsquerda = element.appendChild(document.createElement('div'))
+    this.quadradoBaixoEsquerda.className = 'quadrado canto-inferior-esquerdo'
+    this.addResizeEvent(this.quadradoBaixoEsquerda)
+    // Quadrado no canto inferior direito
+    this.quadradoBaixoDireita = element.appendChild(document.createElement('div'))
+    this.quadradoBaixoDireita.className = 'quadrado canto-inferior-direito'
+    this.addResizeEvent(this.quadradoBaixoDireita)
+  }
+
+  private addResizeEvent(element: HTMLElement) {
+    element.addEventListener('pointerdown', (event: PointerEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      this.isResizing = true
+      this.initialX = event.screenX
+
+      this.initialWidth = this.imageView.imageWrapper.offsetWidth
+      document.addEventListener('pointermove', this.bindResizeEvent)
+      document.addEventListener('pointerup', this.bindStopResizeEvent)
+    })
+  }
+
+  private resize(event: PointerEvent) {
+    if (!this.isResizing) return
+
+    const deltaX = event.screenX - this.initialX
+
+    if (this.isResizingOnLeftSide()) {
+      this.imageView.imageWrapper.style.width = `${this.initialWidth - deltaX}px`
+    } else {
+      this.imageView.imageWrapper.style.width = `${this.initialWidth + deltaX}px`
+    }
+  }
+
+  private stopResize() {
+    this.isResizing = false
+    document.removeEventListener('pointermove', this.bindResizeEvent)
+    document.removeEventListener('pointerup', this.bindStopResizeEvent)
+
+    const { editor, node } = this.imageView
+    editor.commands.updateAttributes(node.type, {
+      style: `width: ${this.imageView.imageWrapper.style.width}`
+    })
+  }
+  private isResizingOnLeftSide(): boolean {
+    const rect = this.imageView.imageWrapper.getBoundingClientRect()
+    return this.initialX < rect.left + rect.width / 2
+  }
+}
diff --git a/src/extensions/image/imageView.ts b/src/extensions/image/imageView.ts
index bd11e59..1802267 100644
--- a/src/extensions/image/imageView.ts
+++ b/src/extensions/image/imageView.ts
@@ -11,94 +11,7 @@ import type ExitusEditor from 'src/ExitusEditor'
 
 import { Button, type ButtonEventProps, Dropdown } from '../../editor/ui'
 import { Balloon } from '../../editor/ui/Balloon'
-
-class ResizableImage {
-  //private element: HTMLElement
-  imageView: ImageView
-  private isResizing: boolean = false
-  private initialX: number = 0
-  // private initialY: number = 0
-  private initialWidth: number = 0
-  // private initialHeight: number = 0
-  quadradoTopEsquerda!: HTMLElement
-  quadradoTopDireita!: HTMLElement
-  quadradoBaixoEsquerda!: HTMLElement
-  quadradoBaixoDireita!: HTMLElement
-  bindResizeEvent: (event: PointerEvent) => void
-  bindStopResizeEvent: () => void
-
-  constructor(imageView: ImageView) {
-    this.imageView = imageView
-    this.bindResizeEvent = this.resize.bind(this)
-    this.bindStopResizeEvent = this.stopResize.bind(this)
-    this.initResize()
-  }
-
-  private initResize() {
-    const element = this.imageView.imageWrapper
-    element.style.position = 'relative'
-
-    // Quadrado no canto superior esquerdo
-    this.quadradoTopEsquerda = element.appendChild(document.createElement('div'))
-    this.quadradoTopEsquerda.className = 'quadrado canto-superior-esquerdo'
-    this.addResizeEvent(this.quadradoTopEsquerda)
-    // Quadrado no canto superior direito
-    this.quadradoTopDireita = element.appendChild(document.createElement('div'))
-    this.quadradoTopDireita.className = 'quadrado canto-superior-direito'
-    this.addResizeEvent(this.quadradoTopDireita)
-    // Quadrado no canto inferior esquerdo
-    this.quadradoBaixoEsquerda = element.appendChild(document.createElement('div'))
-    this.quadradoBaixoEsquerda.className = 'quadrado canto-inferior-esquerdo'
-    this.addResizeEvent(this.quadradoBaixoEsquerda)
-    // Quadrado no canto inferior direito
-    this.quadradoBaixoDireita = element.appendChild(document.createElement('div'))
-    this.quadradoBaixoDireita.className = 'quadrado canto-inferior-direito'
-    this.addResizeEvent(this.quadradoBaixoDireita)
-  }
-
-  private addResizeEvent(element: HTMLElement) {
-    element.addEventListener('pointerdown', (event: PointerEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
-      this.isResizing = true
-      this.initialX = event.screenX
-      //console.log(event)
-
-      //this.initialY = event.clientY
-      this.initialWidth = this.imageView.imageWrapper.offsetWidth
-      document.addEventListener('pointermove', this.bindResizeEvent)
-      document.addEventListener('pointerup', this.bindStopResizeEvent)
-    })
-  }
-
-  private resize(event: PointerEvent) {
-    if (!this.isResizing) return
-
-    const deltaX = event.screenX - this.initialX
-    // const deltaY = event.clientY - this.initialY
-
-    if (this.isResizingOnLeftSide()) {
-      this.imageView.imageWrapper.style.width = `${this.initialWidth - deltaX}px`
-    } else {
-      this.imageView.imageWrapper.style.width = `${this.initialWidth + deltaX}px`
-    }
-  }
-
-  private stopResize() {
-    this.isResizing = false
-    document.removeEventListener('pointermove', this.bindResizeEvent)
-    document.removeEventListener('pointerup', this.bindStopResizeEvent)
-
-    const { editor, node } = this.imageView
-    editor.commands.updateAttributes(node.type, {
-      style: `width: ${this.imageView.imageWrapper.style.width}`
-    })
-  }
-  private isResizingOnLeftSide(): boolean {
-    const rect = this.imageView.imageWrapper.getBoundingClientRect()
-    return this.initialX < rect.left + rect.width / 2
-  }
-}
+import ResizableImage from '../../extensions/image/ResizableImage'
 
 function clickHandler(imageWrapper: HTMLElement) {
   imageWrapper.addEventListener('click', event => {
@@ -204,10 +117,10 @@ function originalPx(image: HTMLElement, editor: ExitusEditor, dropdown: Dropdown
     if (!image.classList.contains('')) {
       dropdown.parentToolbar.tools.forEach(tool => tool instanceof Button && tool.off())
       ativaBotao(button)
-      image.classList.remove('ex-grande', 'ex-pequeno', 'ex-medio')
+      image.style.width = ''
     } else {
       button.off()
-      image.classList.remove('ex-grande', 'ex-pequeno', 'ex-medio')
+      image.style.width = ''
       dropdown.off()
     }
   })
@@ -225,11 +138,10 @@ function trezentosPx(image: HTMLElement, editor: ExitusEditor, dropdown: Dropdow
     if (!image.classList.contains('ex-pequeno')) {
       dropdown.parentToolbar.tools.forEach(tool => tool instanceof Button && tool.off())
       ativaBotao(button)
-      image.classList.add('ex-pequeno')
-      image.classList.remove('ex-grande')
+      image.style.width = '300px'
     } else {
       button.off()
-      image.classList.remove('ex-pequeno')
+      image.style.width = ''
       dropdown.off()
     }
   })
@@ -247,11 +159,10 @@ function quatrocentosPx(image: HTMLElement, editor: ExitusEditor, dropdown: Drop
     if (!image.classList.contains('ex-medio')) {
       dropdown.parentToolbar.tools.forEach(tool => tool instanceof Button && tool.off())
       ativaBotao(button)
-      image.classList.add('ex-medio')
-      image.classList.remove('ex-grande', 'ex-pequeno')
+      image.style.width = '400px'
     } else {
       button.off()
-      image.classList.remove('ex-medio')
+      image.style.width = ''
       dropdown.off()
     }
   })
@@ -269,11 +180,10 @@ function setecentosPx(image: HTMLElement, editor: ExitusEditor, dropdown: Dropdo
     if (!image.classList.contains('ex-grande')) {
       dropdown.parentToolbar.tools.forEach(tool => tool instanceof Button && tool.off())
       ativaBotao(button)
-      image.classList.add('ex-grande')
-      image.classList.remove('ex-pequeno')
+      image.style.width = '700px'
     } else {
       button.off()
-      image.classList.remove('ex-grande')
+      image.style.width = ''
       dropdown.off()
     }
   })
diff --git a/src/public/style.css b/src/public/style.css
index 7a9baa1..51a0760 100644
--- a/src/public/style.css
+++ b/src/public/style.css
@@ -311,18 +311,6 @@
   filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.1));
 }
 
-.ex-pequeno{
-  width: 300px !important;
-}
-
-.ex-medio{
-  width: 400px !important;
-}
-
-.ex-grande{
-  width: 700px !important;
-}
-
 .quadrado {
   width: 10px; 
   height: 10px;