diff --git a/app/Models/Media.php b/app/Models/Media.php
index 2d12bf5..c486022 100644
--- a/app/Models/Media.php
+++ b/app/Models/Media.php
@@ -173,8 +173,10 @@ class Media extends Model
         // Generate additional image sizes
         $sizes = [
             'thumb' => [150, 150],
-            'medium' => [300, 300],
+            'small' => [300, 300],
+            'medium' => [640, 640],
             'large' => [1024, 1024],
+            'xlarge' => [1536, 1536],
         ];
         $images = ['full' => $path];
         foreach ($sizes as $sizeName => $size) {
diff --git a/public/media.php b/public/media.php
index 83c0708..d057c8b 100644
--- a/public/media.php
+++ b/public/media.php
@@ -9,7 +9,7 @@ if (isset($_GET['url'])) {
 
 if ($filepath !== false && strlen($filepath) > 0 && strpos($_GET['url'], 'uploads/') === 0 && is_file($filepath)) {
     if(isset($_GET['size'])) {
-        $availableSizes = ['thumb', 'medium', 'large']; // we ignore full as its the original file
+        $availableSizes = ['thumb', 'small', 'medium', 'large', 'xlarge']; // we ignore full as its the original file
         $requestedSize = strtolower($_GET['size']);
         $requestedSizeIndex = array_search($requestedSize, $availableSizes);
         
diff --git a/resources/js/helpers/image.ts b/resources/js/helpers/image.ts
index c3db211..b1f264e 100644
--- a/resources/js/helpers/image.ts
+++ b/resources/js/helpers/image.ts
@@ -16,7 +16,7 @@ export const imageLoad = (
 };
 
 export const imageSize = (size: string, url: string) => {
-    const availableSizes = ["thumb", "medium", "large"];
+    const availableSizes = ["thumb", "small", "medium", "large", "xlarge"];
     if (availableSizes.includes(size)) {
         if (
             url.startsWith((import.meta as ImportMetaExtras).env.APP_URL) ===
@@ -34,7 +34,12 @@ export const imageThumb = (url: string) => {
     return imageSize("thumb", url);
 };
 
-// Medium 300 x 300
+// Small 300 x 300
+export const imageSmall = (url: string) => {
+    return imageSize("small", url);
+};
+
+// Small 640 x 640
 export const imageMedium = (url: string) => {
     return imageSize("medium", url);
 };
@@ -44,6 +49,11 @@ export const imageLarge = (url: string) => {
     return imageSize("large", url);
 };
 
+// Large 1536 x 1536
+export const imageXLarge = (url: string) => {
+    return imageSize("xlarge", url);
+};
+
 // Full size
 export const imageFull = (url: string) => {
     return imageSize("full", url);