diff --git a/frontend/src/components/ImageUpload.vue b/frontend/src/components/ImageUpload.vue
new file mode 100644
index 00000000..a5619ede
--- /dev/null
+++ b/frontend/src/components/ImageUpload.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="space-y-2">
+    <Label v-if="label" class="text-sm font-medium">{{ label }}</Label>
+    <Tabs v-model="imageInputMode" class="w-full">
+      <TabsList class="grid w-full grid-cols-2">
+        <TabsTrigger value="file">Upload File</TabsTrigger>
+        <TabsTrigger value="url">From URL</TabsTrigger>
+      </TabsList>
+      <TabsContent value="file" class="space-y-2">
+        <Input
+          :id="inputId"
+          type="file"
+          accept="image/*"
+          :disabled="disabled"
+          @change="handleFileChange"
+        />
+        <p class="text-xs text-muted-foreground">
+          Recommended: Square image, minimum 256x256px, max 10MB
+        </p>
+      </TabsContent>
+      <TabsContent value="url" class="space-y-2">
+        <Input
+          :id="`${inputId}-url`"
+          v-model="imageUrl"
+          type="url"
+          :placeholder="urlPlaceholder"
+          :disabled="disabled || isLoadingImageUrl"
+          @blur="handleUrlChange"
+          @keyup.enter="handleUrlChange"
+        />
+        <p class="text-xs text-muted-foreground">
+          Enter the URL of an image to use
+        </p>
+        <p
+          v-if="isLoadingImageUrl"
+          class="text-xs text-muted-foreground flex items-center gap-1"
+        >
+          Loading image...
+        </p>
+      </TabsContent>
+    </Tabs>
+    <span v-if="imageError" class="text-sm text-destructive">{{
+      imageError
+    }}</span>
+
+    <!-- Image preview -->
+    <div v-if="imagePreview" class="space-y-2">
+      <Label class="text-sm font-medium">Preview</Label>
+      <div
+        :class="[
+          'border border-muted rounded-lg overflow-hidden',
+          previewSizeClass,
+        ]"
+      >
+        <img
+          :src="imagePreview"
+          :alt="previewAlt"
+          class="w-full h-full object-cover"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useImageUpload } from "@/composables/useImageUpload";
+
+interface Props {
+  label?: string;
+  inputId?: string;
+  urlPlaceholder?: string;
+  previewAlt?: string;
+  previewSize?: "sm" | "md";
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: undefined,
+  inputId: "image-upload",
+  urlPlaceholder: "https://example.com/image.jpg",
+  previewAlt: "Image preview",
+  previewSize: "md",
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  fileSelected: [file: File];
+}>();
+
+const {
+  imagePreview,
+  selectedImageFile,
+  imageInputMode,
+  imageUrl,
+  isLoadingImageUrl,
+  imageError,
+  handleFileChange,
+  handleUrlChange,
+} = useImageUpload();
+
+const previewSizeClass = props.previewSize === "sm" ? "w-20 h-20" : "w-24 h-24";
+
+// Emit the selected file when it changes
+watch(selectedImageFile, (file) => {
+  if (file) {
+    emit("fileSelected", file);
+  }
+});
+
+// Expose state and methods to parent
+defineExpose({
+  imagePreview,
+  selectedImageFile,
+  isLoadingImageUrl,
+  imageError,
+});
+</script>
diff --git a/frontend/src/components/companies/CompanyInfoForm.vue b/frontend/src/components/companies/CompanyInfoForm.vue
index 97487d6c..960313a3 100644
--- a/frontend/src/components/companies/CompanyInfoForm.vue
+++ b/frontend/src/components/companies/CompanyInfoForm.vue
@@ -44,36 +44,15 @@
       </div>
 
       <!-- Image Upload Field -->
-      <div class="space-y-2">
-        <Label for="company-image" class="text-sm font-medium"
-          >Company Logo</Label
-        >
-        <Input
-          id="company-image"
-          type="file"
-          accept="image/*"
-          :disabled="isLoading"
-          @change="handleImageChange"
-        />
-        <p class="text-xs text-muted-foreground">
-          Recommended: Square image, minimum 256x256px, max 10MB
-        </p>
-        <span v-if="errors.image" class="text-sm text-destructive">{{
-          errors.image
-        }}</span>
-
-        <!-- Image preview -->
-        <div v-if="imagePreview" class="space-y-2">
-          <Label class="text-sm font-medium">Preview</Label>
-          <div class="w-20 h-20 border border-muted rounded-lg overflow-hidden">
-            <img
-              :src="imagePreview"
-              alt="Company logo preview"
-              class="w-full h-full object-cover"
-            />
-          </div>
-        </div>
-      </div>
+      <ImageUpload
+        label="Company Logo"
+        input-id="company-logo"
+        url-placeholder="https://example.com/logo.jpg"
+        preview-alt="Company logo preview"
+        preview-size="sm"
+        :disabled="isLoading"
+        @file-selected="handleImageSelected"
+      />
     </div>
 
     <!-- Form Actions -->
@@ -93,11 +72,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, watch, ref } from "vue";
+import { computed, reactive, watch } from "vue";
 import type { UpdateCompanyData } from "@/dto/companies";
 import Button from "../ui/button/Button.vue";
 import Input from "../ui/input/Input.vue";
 import Label from "../ui/label/Label.vue";
+import ImageUpload from "@/components/ImageUpload.vue";
 
 interface Props {
   isLoading?: boolean;
@@ -116,10 +96,10 @@ const emit = defineEmits<{
   imageSelected: [file: File];
 }>();
 
-// Image handling
-const imagePreview = ref<string>("");
-const selectedImageFile = ref<File | null>(null);
-const errors = ref<Record<string, string>>({});
+// Handle image selection from ImageUpload component
+const handleImageSelected = (file: File) => {
+  emit("imageSelected", file);
+};
 
 const formData = reactive<
   Pick<UpdateCompanyData, "name" | "description" | "site">
@@ -146,33 +126,6 @@ const isValid = computed(() => {
   return formData.name?.trim();
 });
 
-// Image handling
-const handleImageChange = (event: Event) => {
-  const file = (event.target as HTMLInputElement).files?.[0];
-  if (file) {
-    // Check file size (10MB limit)
-    if (file.size > 10 << 20) {
-      errors.value.image = "Image file size must be less than 10MB";
-      return;
-    }
-
-    // Clear any previous image errors
-    delete errors.value.image;
-
-    selectedImageFile.value = file;
-
-    // Create preview
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      imagePreview.value = e.target?.result as string;
-    };
-    reader.readAsDataURL(file);
-
-    // Emit the selected file to parent component
-    emit("imageSelected", file);
-  }
-};
-
 const handleSubmit = () => {
   if (isValid.value) {
     emit("submit", {
diff --git a/frontend/src/components/companies/CreateCompanyForm.vue b/frontend/src/components/companies/CreateCompanyForm.vue
index 64529b73..8a3d8d1c 100644
--- a/frontend/src/components/companies/CreateCompanyForm.vue
+++ b/frontend/src/components/companies/CreateCompanyForm.vue
@@ -87,34 +87,15 @@
 
     <!-- Step 2: Company Logo -->
     <div v-if="currentStep === 2" class="space-y-4">
-      <div class="space-y-2">
-        <Label for="image" class="text-sm font-medium">Company Logo</Label>
-        <Input
-          id="image"
-          type="file"
-          accept="image/*"
-          :disabled="isLoading"
-          @change="handleImageChange"
-        />
-        <p class="text-xs text-muted-foreground">
-          Recommended: Square image, minimum 256x256px, max 10MB
-        </p>
-        <span v-if="errors.image" class="text-sm text-destructive">{{
-          errors.image
-        }}</span>
-      </div>
-
-      <!-- Image preview -->
-      <div v-if="imagePreview" class="space-y-2">
-        <Label class="text-sm font-medium">Preview</Label>
-        <div class="w-24 h-24 border border-muted rounded-lg overflow-hidden">
-          <img
-            :src="imagePreview"
-            alt="Logo preview"
-            class="w-full h-full object-cover"
-          />
-        </div>
-      </div>
+      <ImageUpload
+        ref="imageUploadRef"
+        label="Company Logo"
+        input-id="company-logo"
+        url-placeholder="https://example.com/logo.jpg"
+        preview-alt="Logo preview"
+        :disabled="isLoading"
+        @file-selected="handleImageSelected"
+      />
 
       <!-- Step 2 Actions -->
       <div class="flex justify-between pt-4">
@@ -122,8 +103,11 @@
           Back
         </Button>
         <div class="flex gap-2">
-          <Button :disabled="isLoading" @click="nextStep">
-            <span v-if="!imagePreview">Skip</span>
+          <Button
+            :disabled="isLoading || imageUploadRef?.isLoadingImageUrl"
+            @click="nextStep"
+          >
+            <span v-if="!imageUploadRef?.imagePreview">Skip</span>
             <span v-else>Next</span>
           </Button>
         </div>
@@ -276,6 +260,7 @@ import {
   StepperTrigger,
 } from "@/components/ui/stepper";
 import CompanyAutocomplete from "./CompanyAutocomplete.vue";
+import ImageUpload from "@/components/ImageUpload.vue";
 import {
   createCompany,
   createCompanyParticipation,
@@ -330,10 +315,15 @@ const formData = ref<CreateCompanyData>({
   site: "",
 });
 
-// Image preview and file
-const imagePreview = ref<string>("");
+// Image upload ref
+const imageUploadRef = ref<InstanceType<typeof ImageUpload> | null>(null);
 const selectedImageFile = ref<File | null>(null);
 
+// Handle image selection from ImageUpload component
+const handleImageSelected = (file: File) => {
+  selectedImageFile.value = file;
+};
+
 // Representatives data
 const representatives = ref<CreateCompanyRepData[]>([]);
 
@@ -392,30 +382,6 @@ const isValidUrl = (url: string) => {
   }
 };
 
-// Image handling
-const handleImageChange = (event: Event) => {
-  const file = (event.target as HTMLInputElement).files?.[0];
-  if (file) {
-    // Check file size (10MB limit)
-    if (file.size > 10 << 20) {
-      errors.value.image = "Image file size must be less than 10MB";
-      return;
-    }
-
-    // Clear any previous image errors
-    delete errors.value.image;
-
-    selectedImageFile.value = file;
-
-    // Create preview
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      imagePreview.value = e.target?.result as string;
-    };
-    reader.readAsDataURL(file);
-  }
-};
-
 // Representative management
 const addRepresentative = () => {
   representatives.value.push({
diff --git a/frontend/src/components/speakers/CreateSpeakerForm.vue b/frontend/src/components/speakers/CreateSpeakerForm.vue
index 8e483992..3456da30 100644
--- a/frontend/src/components/speakers/CreateSpeakerForm.vue
+++ b/frontend/src/components/speakers/CreateSpeakerForm.vue
@@ -100,34 +100,15 @@
 
     <!-- Step 2: Speaker Image -->
     <div v-if="currentStep === 2" class="space-y-4">
-      <div class="space-y-2">
-        <Label for="image" class="text-sm font-medium">Speaker Image</Label>
-        <Input
-          id="image"
-          type="file"
-          accept="image/*"
-          :disabled="isLoading"
-          @change="handleImageChange"
-        />
-        <p class="text-xs text-muted-foreground">
-          Recommended: Square image, minimum 256x256px, max 10MB
-        </p>
-        <span v-if="errors.image" class="text-sm text-destructive">{{
-          errors.image
-        }}</span>
-      </div>
-
-      <!-- Image preview -->
-      <div v-if="imagePreview" class="space-y-2">
-        <Label class="text-sm font-medium">Preview</Label>
-        <div class="w-24 h-24 border border-muted rounded-lg overflow-hidden">
-          <img
-            :src="imagePreview"
-            alt="Speaker image preview"
-            class="w-full h-full object-cover"
-          />
-        </div>
-      </div>
+      <ImageUpload
+        ref="imageUploadRef"
+        label="Speaker Image"
+        input-id="speaker-image"
+        url-placeholder="https://example.com/image.jpg"
+        preview-alt="Speaker image preview"
+        :disabled="isLoading"
+        @file-selected="handleImageSelected"
+      />
 
       <!-- Step 2 Actions -->
       <div class="flex justify-between pt-4">
@@ -135,8 +116,11 @@
           Back
         </Button>
         <div class="flex gap-2">
-          <Button :disabled="isLoading" @click="nextStep">
-            <span v-if="!imagePreview">Skip</span>
+          <Button
+            :disabled="isLoading || imageUploadRef?.isLoadingImageUrl"
+            @click="nextStep"
+          >
+            <span v-if="!imageUploadRef?.imagePreview">Skip</span>
             <span v-else>Next</span>
           </Button>
         </div>
@@ -186,6 +170,7 @@ import {
 } from "@/components/ui/stepper";
 import SpeakerAutocomplete from "./SpeakerAutocomplete.vue";
 import ContactForm from "../companies/ContactForm.vue";
+import ImageUpload from "@/components/ImageUpload.vue";
 import {
   createSpeaker,
   createSpeakerParticipation,
@@ -247,9 +232,15 @@ const formData = ref<CreateSpeakerFormData>({
 });
 
 // Image preview and file
-const imagePreview = ref<string>("");
+// Image upload ref
+const imageUploadRef = ref<InstanceType<typeof ImageUpload> | null>(null);
 const selectedImageFile = ref<File | null>(null);
 
+// Handle image selection from ImageUpload component
+const handleImageSelected = (file: File) => {
+  selectedImageFile.value = file;
+};
+
 // Contact data - store the submitted contact data
 const contactData = ref<CreateContactData>({
   mails: [],
@@ -311,30 +302,6 @@ const validateStep1 = () => {
   return true;
 };
 
-// Image handling
-const handleImageChange = (event: Event) => {
-  const file = (event.target as HTMLInputElement).files?.[0];
-  if (file) {
-    // Check file size (10MB limit)
-    if (file.size > 10 << 20) {
-      errors.value.image = "Image file size must be less than 10MB";
-      return;
-    }
-
-    // Clear any previous image errors
-    delete errors.value.image;
-
-    selectedImageFile.value = file;
-
-    // Create preview
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      imagePreview.value = e.target?.result as string;
-    };
-    reader.readAsDataURL(file);
-  }
-};
-
 // Speaker creation
 const createSpeakerAndFinish = async () => {
   if (!validateStep1()) return;
diff --git a/frontend/src/components/speakers/SpeakerInfoForm.vue b/frontend/src/components/speakers/SpeakerInfoForm.vue
index cf820962..dcc97e1a 100644
--- a/frontend/src/components/speakers/SpeakerInfoForm.vue
+++ b/frontend/src/components/speakers/SpeakerInfoForm.vue
@@ -52,36 +52,15 @@
       </div>
 
       <!-- Image Upload Field -->
-      <div class="space-y-2">
-        <Label for="speaker-image" class="text-sm font-medium"
-          >Speaker Image</Label
-        >
-        <Input
-          id="speaker-image"
-          type="file"
-          accept="image/*"
-          :disabled="isLoading"
-          @change="handleImageChange"
-        />
-        <p class="text-xs text-muted-foreground">
-          Recommended: Square image, minimum 256x256px, max 10MB
-        </p>
-        <span v-if="errors.image" class="text-sm text-destructive">{{
-          errors.image
-        }}</span>
-
-        <!-- Image preview -->
-        <div v-if="imagePreview" class="space-y-2">
-          <Label class="text-sm font-medium">Preview</Label>
-          <div class="w-20 h-20 border border-muted rounded-lg overflow-hidden">
-            <img
-              :src="imagePreview"
-              alt="Speaker image preview"
-              class="w-full h-full object-cover"
-            />
-          </div>
-        </div>
-      </div>
+      <ImageUpload
+        label="Speaker Image"
+        input-id="speaker-image"
+        url-placeholder="https://example.com/image.jpg"
+        preview-alt="Speaker image preview"
+        preview-size="sm"
+        :disabled="isLoading"
+        @file-selected="handleImageSelected"
+      />
 
       <!-- Notes Field -->
       <div class="space-y-2">
@@ -114,11 +93,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, watch, ref } from "vue";
+import { computed, reactive, watch } from "vue";
 import type { UpdateSpeakerData } from "@/dto/speakers";
 import Button from "../ui/button/Button.vue";
 import Input from "../ui/input/Input.vue";
 import Label from "../ui/label/Label.vue";
+import ImageUpload from "@/components/ImageUpload.vue";
 
 interface Props {
   isLoading?: boolean;
@@ -145,10 +125,10 @@ const emit = defineEmits<{
   imageSelected: [file: File];
 }>();
 
-// Image handling
-const imagePreview = ref<string>("");
-const selectedImageFile = ref<File | null>(null);
-const errors = ref<Record<string, string>>({});
+// Handle image selection from ImageUpload component
+const handleImageSelected = (file: File) => {
+  emit("imageSelected", file);
+};
 
 const formData = reactive<
   Pick<UpdateSpeakerData, "name" | "title" | "bio" | "companyName" | "notes">
@@ -179,33 +159,6 @@ const isValid = computed(() => {
   return formData.name?.trim();
 });
 
-// Image handling
-const handleImageChange = (event: Event) => {
-  const file = (event.target as HTMLInputElement).files?.[0];
-  if (file) {
-    // Check file size (10MB limit)
-    if (file.size > 10 << 20) {
-      errors.value.image = "Image file size must be less than 10MB";
-      return;
-    }
-
-    // Clear any previous image errors
-    delete errors.value.image;
-
-    selectedImageFile.value = file;
-
-    // Create preview
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      imagePreview.value = e.target?.result as string;
-    };
-    reader.readAsDataURL(file);
-
-    // Emit the selected file to parent component
-    emit("imageSelected", file);
-  }
-};
-
 const handleSubmit = () => {
   if (isValid.value) {
     emit("submit", {
diff --git a/frontend/src/composables/useImageUpload.ts b/frontend/src/composables/useImageUpload.ts
new file mode 100644
index 00000000..19697e8f
--- /dev/null
+++ b/frontend/src/composables/useImageUpload.ts
@@ -0,0 +1,129 @@
+import { ref } from "vue";
+
+const MAX_FILE_SIZE = 10 << 20; // 10MB
+
+export function useImageUpload() {
+  const imagePreview = ref<string>("");
+  const selectedImageFile = ref<File | null>(null);
+  const imageInputMode = ref<string>("file");
+  const imageUrl = ref<string>("");
+  const isLoadingImageUrl = ref<boolean>(false);
+  const imageError = ref<string>("");
+
+  const clearError = () => {
+    imageError.value = "";
+  };
+
+  const setError = (message: string) => {
+    imageError.value = message;
+  };
+
+  const handleFileChange = (event: Event) => {
+    const file = (event.target as HTMLInputElement).files?.[0];
+    if (file) {
+      // Check file size (10MB limit)
+      if (file.size > MAX_FILE_SIZE) {
+        setError("Image file size must be less than 10MB");
+        return;
+      }
+
+      clearError();
+      selectedImageFile.value = file;
+
+      // Create preview
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        imagePreview.value = e.target?.result as string;
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleUrlChange = async () => {
+    const url = imageUrl.value.trim();
+    if (!url) {
+      return;
+    }
+
+    // Validate URL format
+    try {
+      new URL(url);
+    } catch {
+      setError("Please enter a valid URL");
+      return;
+    }
+
+    isLoadingImageUrl.value = true;
+    clearError();
+
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error("Failed to fetch image");
+      }
+
+      const contentType = response.headers.get("content-type");
+      if (!contentType || !contentType.startsWith("image/")) {
+        throw new Error("URL does not point to a valid image");
+      }
+
+      const blob = await response.blob();
+
+      // Check file size (10MB limit)
+      if (blob.size > MAX_FILE_SIZE) {
+        setError("Image file size must be less than 10MB");
+        isLoadingImageUrl.value = false;
+        return;
+      }
+
+      // Extract filename from URL or use a default
+      const urlPath = new URL(url).pathname;
+      const filename = urlPath.split("/").pop() || "image";
+      const extension = contentType.split("/")[1] || "png";
+      const finalFilename = filename.includes(".")
+        ? filename
+        : `${filename}.${extension}`;
+
+      // Create a File object from the blob
+      const file = new File([blob], finalFilename, { type: contentType });
+      selectedImageFile.value = file;
+
+      // Create preview
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        imagePreview.value = e.target?.result as string;
+      };
+      reader.readAsDataURL(blob);
+    } catch (error) {
+      console.error("Error fetching image from URL:", error);
+      setError(
+        "Failed to load image from URL. Please check the URL and try again.",
+      );
+    } finally {
+      isLoadingImageUrl.value = false;
+    }
+  };
+
+  const reset = () => {
+    imagePreview.value = "";
+    selectedImageFile.value = null;
+    imageInputMode.value = "file";
+    imageUrl.value = "";
+    isLoadingImageUrl.value = false;
+    imageError.value = "";
+  };
+
+  return {
+    imagePreview,
+    selectedImageFile,
+    imageInputMode,
+    imageUrl,
+    isLoadingImageUrl,
+    imageError,
+    handleFileChange,
+    handleUrlChange,
+    clearError,
+    setError,
+    reset,
+  };
+}