diff --git a/academy-ui/src/components/byteCollection/ByteCollections/ByteCollectionEditModal.tsx b/academy-ui/src/components/byteCollection/ByteCollections/ByteCollectionEditModal.tsx
index a8f376532..cb3a40b76 100644
--- a/academy-ui/src/components/byteCollection/ByteCollections/ByteCollectionEditModal.tsx
+++ b/academy-ui/src/components/byteCollection/ByteCollections/ByteCollectionEditModal.tsx
@@ -51,15 +51,7 @@ export default function ByteCollectionEditModal(props: ByteCollectionEditorProps
                 Video URL
               </Input>
 
-              <Input
-                modelValue={byteCollection.order}
-                number
-                onUpdate={(v) => helperFunctions.updateByteCollectionOrder(v ? parseInt(v.toString()) : 100)}
-                label="Byte Collection Order *"
-                required
-              />
-
-              <div className="py-4">
+              <div className="py-4 flex justify-center items-center">
                 <Button
                   variant="contained"
                   primary
diff --git a/academy-ui/src/components/bytes/Edit/EditByteStepperItem.tsx b/academy-ui/src/components/bytes/Edit/EditByteStepperItem.tsx
index 33e0d87a6..112f52bfd 100644
--- a/academy-ui/src/components/bytes/Edit/EditByteStepperItem.tsx
+++ b/academy-ui/src/components/bytes/Edit/EditByteStepperItem.tsx
@@ -2,7 +2,6 @@ import CreateQuestion from '@/components/app/Common/CreateQuestion';
 import UploadImageFromDeviceModal from '@/components/app/Image/UploadImageFromDeviceModal';
 import MarkdownEditor from '@/components/app/Markdown/MarkdownEditor';
 import { ByteQuestionFragmentFragment, GuideQuestion, ImageDisplayMode, ImageType } from '@/graphql/generated/generated-types';
-import dummyImage from '@/images/TidbitsHub/image-placeholder.png';
 import { EditByteStep, EditByteType, StepItemInputGenericInput } from '@/types/request/ByteRequests';
 import { SpaceWithIntegrationsDto } from '@/types/space/SpaceDto';
 import { Question, UserInput } from '@/types/stepItems/stepItemDto';
@@ -12,9 +11,8 @@ import DeleteConfirmationModal from '@dodao/web-core/components/app/Modal/Delete
 import AddStepItemModal from '@dodao/web-core/components/app/Modal/StepItem/AddStepItemModal';
 import IconButton from '@dodao/web-core/components/core/buttons/IconButton';
 import { IconTypes } from '@dodao/web-core/components/core/icons/IconTypes';
-import ViewEditableImage from '@dodao/web-core/components/core/image/ViewEditableImage';
+import EditableImage from '@dodao/web-core/components/core/image/EditableImage';
 import Input from '@dodao/web-core/components/core/input/Input';
-import OverlayOnHover from '@dodao/web-core/components/core/overlay/OverlayOnHover';
 import StyledSelect, { StyledSelectItem } from '@dodao/web-core/components/core/select/StyledSelect';
 import { InputType, QuestionType, UserDiscordConnectType } from '@dodao/web-core/types/deprecated/models/enums';
 import { ByteErrors } from '@dodao/web-core/types/errors/byteErrors';
@@ -25,7 +23,6 @@ import isEqual from 'lodash/isEqual';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
-import styles from './EditByteStepperItem.module.scss';
 
 interface EditByteStepperItemProps {
   space: SpaceWithIntegrationsDto;
@@ -445,37 +442,15 @@ For background of the image, use the color ${backgroundColor} and for the primar
               setSelectedItemId={(value) => updateStepDisplayMode(value!)}
             />
           </div>
-          <div className="w-full lg:w-1/2 my-4 flex justify-center items-center">
-            {step.imageUrl ? (
-              <div className="relative inline-block h-[200px] group justify-center">
-                <img
-                  src={step.imageUrl}
-                  style={{ height: '100%' }}
-                  className="cursor-pointer border border-color"
-                  title="Click to change image"
-                  onLoad={() => setImageLoaded(true)}
-                />
-                {imageLoaded && (
-                  <OverlayOnHover>
-                    <ViewEditableImage onClickEditIcon={() => setSelectImageUploadModal(true)} onClickTrashIcon={() => updateStepImageUrl('')} />
-                  </OverlayOnHover>
-                )}
-              </div>
-            ) : (
-              <div className="relative h-[150px] group">
-                <img src={dummyImage.src} style={{ height: '100%' }} className="cursor-pointer border border-color" />
-                <OverlayOnHover>
-                  <IconButton
-                    tooltip="Add Image"
-                    iconName={IconTypes.PlusIcon}
-                    height="30"
-                    width="30"
-                    className={`p-1 rounded-full ${styles.iconsColorToggle}`}
-                    onClick={() => setSelectImageUploadModal(true)}
-                  />
-                </OverlayOnHover>
-              </div>
-            )}
+          <div className="w-full lg:w-1/2 flex justify-center items-center">
+            <EditableImage
+              label="Select Image"
+              afterUploadLabel="Image Selected"
+              imageUrl={step.imageUrl}
+              onRemove={() => updateStepImageUrl(null)}
+              onUpload={() => setSelectImageUploadModal(true)}
+              height="200px"
+            />
           </div>
         </div>
         {step.displayMode === ImageDisplayMode.FullScreenImage ? (
diff --git a/academy-ui/src/components/clickableDemoHtmlCapture/SelectHtmlCaptureModal.tsx b/academy-ui/src/components/clickableDemoHtmlCapture/SelectHtmlCaptureModal.tsx
index 026b2d2dc..cdd6963e7 100644
--- a/academy-ui/src/components/clickableDemoHtmlCapture/SelectHtmlCaptureModal.tsx
+++ b/academy-ui/src/components/clickableDemoHtmlCapture/SelectHtmlCaptureModal.tsx
@@ -83,7 +83,7 @@ export default function SelectHtmlCaptureModal(props: SelectHtmlCaptureModalProp
   };
 
   return (
-    <FullPageModal open={showSelectHtmlCaptureModal} onClose={onClose} title={'Select HTML Capture'}>
+    <FullPageModal open={showSelectHtmlCaptureModal} onClose={onClose} title={'Select Screen Capture'}>
       {loading ? (
         <div className="text-center min-h-[40vh] flex justify-center items-center">
           <LoadingIcon />
@@ -126,8 +126,8 @@ export default function SelectHtmlCaptureModal(props: SelectHtmlCaptureModalProp
               ))}
             </Grid4Cols>
           ) : (
-            <div className="text-center mt-16 pb-8">
-              <p>Install the extension to capture HTML</p>
+            <div className="text-center my-20">
+              <p>Install and use the extension to capture screens.</p>
             </div>
           )}
 
@@ -143,7 +143,7 @@ export default function SelectHtmlCaptureModal(props: SelectHtmlCaptureModalProp
             }}
             disabled={!selectedHtmlCaptureId}
           >
-            Select HTML Capture
+            Select Capture
           </Button>
         </div>
       )}
diff --git a/academy-ui/src/components/clickableDemos/Edit/EditClickableDemoStepperItem.tsx b/academy-ui/src/components/clickableDemos/Edit/EditClickableDemoStepperItem.tsx
index a111382d2..dcfcb3794 100644
--- a/academy-ui/src/components/clickableDemos/Edit/EditClickableDemoStepperItem.tsx
+++ b/academy-ui/src/components/clickableDemos/Edit/EditClickableDemoStepperItem.tsx
@@ -1,5 +1,3 @@
-import CaptureInput from '@/components/clickableDemos/CaptureSelector/CaptureInput';
-import SelectElementInput from '@/components/clickableDemos/ElementSelector/SelectElementInput';
 import { ClickableDemoStepInput, UpsertClickableDemoInput } from '@/graphql/generated/generated-types';
 import { TooltipPlacement } from '@/types/clickableDemos/ClickableDemoDto';
 import { SpaceWithIntegrationsDto } from '@/types/space/SpaceDto';
@@ -11,6 +9,10 @@ import { ClickableDemoErrors, ClickableDemoStepError } from '@dodao/web-core/typ
 import { slugify } from '@dodao/web-core/utils/auth/slugify';
 import { useState } from 'react';
 import styles from './EditClickableDemoStepperItem.module.scss';
+import EditableImage from '@dodao/web-core/components/core/image/EditableImage';
+import { ClickableDemoHtmlCaptureDto } from '@/types/html-captures/ClickableDemoHtmlCaptureDto';
+import SelectHtmlCaptureModal from '@/components/clickableDemoHtmlCapture/SelectHtmlCaptureModal';
+import ElementSelectorModal from '../ElementSelector/ElementSelectorModal';
 
 interface StepProps {
   space: SpaceWithIntegrationsDto;
@@ -58,6 +60,16 @@ export default function EditClickableDemoStepperItem({
   onUpdateStep,
   uploadToS3AndReturnScreenshotUrl,
 }: StepProps) {
+  const [showSelectHtmlCaptureModal, setShowSelectHtmlCaptureModal] = useState(false);
+  const [showElementSelectorModal, setShowElementSelectorModal] = useState(false);
+
+  const inputId = 'capture-input';
+
+  const handleSelectHtmlCapture = (selectedCapture: ClickableDemoHtmlCaptureDto) => {
+    updateStepUrl(selectedCapture.fileUrl, selectedCapture.fileImageUrl);
+    setShowSelectHtmlCaptureModal(false);
+  };
+
   const [uploadHTMLFileLoading, setUploadHTMLFileLoading] = useState(false);
 
   const updateStepSelector = (selector: string | number | undefined, elementImgUrl: string | undefined) => {
@@ -82,8 +94,6 @@ export default function EditClickableDemoStepperItem({
     return error ? error.toString() : '';
   };
 
-  console.log('step.placement', step.placement);
-
   return (
     <div className={`${styles.StyledStepContainer} p-5`} style={{ border: !!clickableDemoErrors?.steps?.[step.id] ? '1px solid red' : 'none' }}>
       <div className="flex justify-end min-h-10">
@@ -118,43 +128,53 @@ export default function EditClickableDemoStepperItem({
           />
         </div>
       </div>
-      <div className="w-full">
-        <div className="mt-4">
-          <CaptureInput
-            label="HTML Capture"
-            error={inputError('url') ? 'URL is required' : ''}
-            modelValue={step.url}
-            onInput={updateStepUrl}
-            demoId={clickableDemo.id}
-            spaceId={space.id}
-          />
-          {step.screenImgUrl && (
-            <div className="mt-4">
-              <img src={step.screenImgUrl} alt="Screenshot" className="rounded-lg shadow-md max-w-full h-[150px] object-fit" />
-            </div>
-          )}
-        </div>
-      </div>
-      <div className="w-full">
-        <div className="mt-4">
-          <SelectElementInput
-            label="Selector"
-            error={inputError('selector') ? 'Selector is required' : ''}
-            space={space}
-            modelValue={step.selector}
-            stepIndex={stepIndex}
-            objectId={(space?.name && slugify(space?.name)) || space?.id || 'new-space'}
-            fileUrl={step.url}
-            onInput={updateStepSelector}
-            uploadToS3AndReturnScreenshotUrl={uploadToS3AndReturnScreenshotUrl}
-          />
-          {step.elementImgUrl && ( // Assuming `step.screenImgUrl` holds the URL of the screenshot image
-            <div className="mt-4">
-              <img src={step.elementImgUrl} alt="Screenshot" className="rounded-lg shadow-md max-w-full max-h-60" />
-            </div>
-          )}
-        </div>
+
+      <div className="w-full my-2 flex flex-wrap sm:flex-nowrap justify-around items-end gap-5">
+        <EditableImage
+          label="Select Capture"
+          afterUploadLabel="Capture Selected"
+          imageUrl={step.screenImgUrl}
+          onRemove={() => updateStepUrl('', '')}
+          onUpload={() => setShowSelectHtmlCaptureModal(true)}
+          height="200px"
+          error={inputError('url') ? 'Screen Capture is required' : ''}
+        />
+
+        <EditableImage
+          label="Select Element"
+          afterUploadLabel="Element Selected"
+          imageUrl={step.elementImgUrl}
+          onRemove={() => updateStepSelector('', '')}
+          onUpload={() => setShowElementSelectorModal(true)}
+          height="150px"
+          maxWidth="250px"
+          disabled={step.screenImgUrl != ''}
+          disabledTooltip="Please select a capture first"
+          error={inputError('selector') ? 'Selector is required' : ''}
+        />
       </div>
+      {showSelectHtmlCaptureModal && (
+        <SelectHtmlCaptureModal
+          showSelectHtmlCaptureModal={showSelectHtmlCaptureModal}
+          onClose={() => setShowSelectHtmlCaptureModal(false)}
+          selectHtmlCapture={handleSelectHtmlCapture}
+          demoId={clickableDemo.id}
+          spaceId={space.id}
+        />
+      )}
+      {showElementSelectorModal && (
+        <ElementSelectorModal
+          space={space}
+          onInput={updateStepSelector}
+          showModal={showElementSelectorModal}
+          objectId={(space?.name && slugify(space?.name)) || space?.id || 'new-space'}
+          fileUrl={step.url!}
+          xPath={step.selector || ''}
+          setShowModal={setShowElementSelectorModal}
+          uploadToS3AndReturnScreenshotUrl={uploadToS3AndReturnScreenshotUrl}
+          stepIndex={stepIndex}
+        />
+      )}
     </div>
   );
 }
diff --git a/academy-ui/src/components/shortVideos/Edit/EditShortVideoForm.tsx b/academy-ui/src/components/shortVideos/Edit/EditShortVideoForm.tsx
index 8d1d81180..d35a9a6f2 100644
--- a/academy-ui/src/components/shortVideos/Edit/EditShortVideoForm.tsx
+++ b/academy-ui/src/components/shortVideos/Edit/EditShortVideoForm.tsx
@@ -1,6 +1,4 @@
-import MarkdownEditor from '@/components/app/Markdown/MarkdownEditor';
-import UploadInput from '@/components/app/UploadInput';
-import { ImageType, ShortVideo, ShortVideoInput } from '@/graphql/generated/generated-types';
+import { ImageType, ShortVideo, ShortVideoInput, CreateSignedUrlInput } from '@/graphql/generated/generated-types';
 import Button from '@dodao/web-core/components/core/buttons/Button';
 import Input from '@dodao/web-core/components/core/input/Input';
 import { useNotificationContext } from '@dodao/web-core/ui/contexts/NotificationContext';
@@ -14,6 +12,14 @@ import getBaseUrl from '@dodao/web-core/utils/api/getBaseURL';
 import PageWrapper from '@dodao/web-core/components/core/page/PageWrapper';
 import SingleCardLayout from '@/layouts/SingleCardLayout';
 import { useI18 } from '@/hooks/useI18';
+import EditableImage from '@dodao/web-core/components/core/image/EditableImage';
+import EditableVideo from '@dodao/web-core/components/core/image/EditableVideo';
+import UploadImageFromDeviceModal from '@/components/app/Image/UploadImageFromDeviceModal';
+import axios from 'axios';
+import { usePostData } from '@dodao/web-core/ui/hooks/fetch/usePostData';
+import { CreateSignedUrlRequest } from '@/types/request/SignedUrl';
+import { SingedUrlResponse } from '@/types/response/SignedUrl';
+import { getUploadedImageUrlFromSingedUrl } from '@dodao/web-core/utils/upload/getUploadedImageUrlFromSingedUrl';
 
 export interface EditShortVideoModalProps {
   shortVideoToEdit?: ShortVideo;
@@ -54,6 +60,9 @@ export default function EditShortVideoModal({
   const router = useRouter();
   const [shortVideoUpserting, setShortVideoUpserting] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [selectImageUploadModal, setSelectImageUploadModal] = useState(false);
+  const [uploadFileLoading, setUploadFileLoading] = useState(false);
+
   const threeDotItems: EllipsisDropdownItem[] = [{ label: 'Delete', key: 'delete' }];
   const { $t } = useI18();
 
@@ -75,6 +84,12 @@ export default function EditShortVideoModal({
   }
 
   const { showNotification } = useNotificationContext();
+  const { postData } = usePostData<SingedUrlResponse, CreateSignedUrlRequest>(
+    {
+      errorMessage: 'Failed to get signed URL',
+    },
+    {}
+  );
   const upsertShortVideo = async () => {
     const errors: Record<keyof ShortVideoInput, any> = {
       id: null,
@@ -123,75 +138,99 @@ export default function EditShortVideoModal({
     }
   };
 
+  async function uploadToS3AndReturnImgUrl(file: File) {
+    setUploadFileLoading(true);
+    const input: CreateSignedUrlInput = {
+      imageType: ImageType.ShortVideo,
+      contentType: file.type,
+      objectId: (shortVideo.id || 'new-short-video' + '-short-video').replace(/[^a-z0-9]/gi, '_'),
+      name: file.name.replace(' ', '_').toLowerCase(),
+    };
+
+    const response = await postData(`${getBaseUrl()}/api/s3-signed-urls`, { spaceId, input });
+    const signedUrl = response?.url!;
+    await axios.put(signedUrl, file, {
+      headers: { 'Content-Type': file.type },
+    });
+
+    const imageUrl = getUploadedImageUrlFromSingedUrl(signedUrl);
+    updateShortVideoField('videoUrl', imageUrl?.toString() || '');
+
+    setUploadFileLoading(false);
+  }
+
   return (
     <PageWrapper>
       <SingleCardLayout>
-        <div className="text-color pb-10">
-          <div className="py-2 my-2">
-            <div className="float-right">
-              {shortVideoToEdit && (
-                <PrivateEllipsisDropdown
-                  items={threeDotItems}
-                  onSelect={(key) => {
-                    if (key === 'delete') {
-                      setShowDeleteModal(true);
-                    }
-                  }}
-                  className="ml-4"
-                />
-              )}
+        <PageWrapper>
+          <div className="text-color">
+            <div className="py-2 my-2">
+              <div className="float-right">
+                {shortVideoToEdit && (
+                  <PrivateEllipsisDropdown
+                    items={threeDotItems}
+                    onSelect={(key) => {
+                      if (key === 'delete') {
+                        setShowDeleteModal(true);
+                      }
+                    }}
+                    className="ml-4"
+                  />
+                )}
+              </div>
+            </div>
+            <div className="mb-2">
+              <Input
+                modelValue={shortVideo.title}
+                maxLength={32}
+                onUpdate={(v) => updateShortVideoField('title', v?.toString() || '')}
+                label="Title*"
+                required
+                placeholder="only 32 characters"
+                error={shortVideoErrors['title']}
+              />
+            </div>
+            <div className="mb-2">
+              <Input
+                modelValue={shortVideo.description}
+                maxLength={64}
+                label="Description*"
+                placeholder="only 64 characters"
+                onUpdate={(v) => updateShortVideoField('description', v?.toString() || '')}
+                error={shortVideoErrors['description']}
+              />
+            </div>
+
+            <div className="w-full my-2 flex flex-wrap sm:flex-nowrap justify-around gap-5">
+              <EditableImage
+                imageUrl={shortVideo.thumbnail}
+                onRemove={() => updateShortVideoField('thumbnail', '')}
+                onUpload={() => setSelectImageUploadModal(true)}
+                height="200px"
+                label="Select Thumbnail"
+                afterUploadLabel="Thumbnail Selected"
+                error={shortVideoErrors['thumbnail']}
+              />
+
+              <EditableVideo
+                videoUrl={shortVideo.videoUrl}
+                onRemove={() => updateShortVideoField('videoUrl', '')}
+                height="200px"
+                label="Select Video"
+                afterUploadLabel="Video Selected"
+                onUpload={uploadToS3AndReturnImgUrl}
+                loading={uploadFileLoading}
+                error={shortVideoErrors['videoUrl']}
+              />
             </div>
-          </div>
-          <div className="mb-2">
-            <Input
-              modelValue={shortVideo.title}
-              maxLength={32}
-              onUpdate={(v) => updateShortVideoField('title', v?.toString() || '')}
-              label="Title*"
-              required
-              placeholder="only 32 characters"
-              error={shortVideoErrors['title']}
-            />
-          </div>
-          <div className="mb-2">
-            <Input
-              modelValue={shortVideo.description}
-              maxLength={64}
-              label="Description*"
-              placeholder="only 64 characters"
-              onUpdate={(v) => updateShortVideoField('description', v?.toString() || '')}
-              error={shortVideoErrors['description']}
-            />
-          </div>
 
-          <UploadInput
-            error={shortVideoErrors['thumbnail']}
-            imageType={ImageType.ShortVideo}
-            spaceId={spaceId}
-            modelValue={shortVideo.thumbnail}
-            objectId={shortVideo.id || 'new-short-video' + '-thumbnail'}
-            onInput={(value) => updateShortVideoField('thumbnail', value?.toString() || '')}
-            label={'Thumbnail*'}
-            placeholder="e.g. https://example.com/thumbnail.png"
-          />
-          <UploadInput
-            error={shortVideoErrors['videoUrl']}
-            imageType={ImageType.ShortVideo}
-            spaceId={spaceId}
-            modelValue={shortVideo.videoUrl}
-            objectId={shortVideo.id || 'new-short-video' + '-short-video'}
-            onInput={(value) => updateShortVideoField('videoUrl', value?.toString() || '')}
-            allowedFileTypes={['video/mp4', 'video/x-m4v', 'video/*']}
-            label={'Video*'}
-            placeholder="e.g. https://example.com/video.mp4"
-          />
-
-          <div className="mt-6 flex justify-center items-center">
-            <Button onClick={() => upsertShortVideo()} loading={shortVideoUpserting} variant="contained" primary>
-              Save
-            </Button>
+            <div className="mt-10 flex justify-center items-center">
+              <Button onClick={() => upsertShortVideo()} loading={shortVideoUpserting} variant="contained" primary>
+                Save
+              </Button>
+            </div>
           </div>
-        </div>
+        </PageWrapper>
       </SingleCardLayout>
       {showDeleteModal && (
         <DeleteConfirmationModal
@@ -208,6 +247,20 @@ export default function EditShortVideoModal({
           }}
         />
       )}
+      {selectImageUploadModal && (
+        <UploadImageFromDeviceModal
+          open={selectImageUploadModal}
+          onClose={() => setSelectImageUploadModal(false)}
+          imageType={ImageType.ShortVideo}
+          objectId={shortVideo.id || 'new-short-video' + '-short-video'}
+          spaceId={spaceId}
+          imageUploaded={(imageUrl) => {
+            updateShortVideoField('thumbnail', imageUrl?.toString() || '');
+            setSelectImageUploadModal(false);
+          }}
+          modelValue={shortVideo.thumbnail || undefined}
+        />
+      )}
     </PageWrapper>
   );
 }
diff --git a/shared/web-core/next-env.d.ts b/shared/web-core/next-env.d.ts
new file mode 100644
index 000000000..40c3d6809
--- /dev/null
+++ b/shared/web-core/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/shared/web-core/src/components/core/file/ImageUploadSection.tsx b/shared/web-core/src/components/core/file/ImageUploadSection.tsx
index 927dddbfa..260318a31 100644
--- a/shared/web-core/src/components/core/file/ImageUploadSection.tsx
+++ b/shared/web-core/src/components/core/file/ImageUploadSection.tsx
@@ -37,7 +37,6 @@ export default function ImageUploadSection({
 }: ImageUploadSectionProps) {
   const inputId = spaceId + '-' + slugify(label || imageType || objectId);
   const [showFullScreenModal, setShowFullScreenModal] = useState(false);
-  const [imageLoaded, setImageLoaded] = useState(false);
 
   const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
     e.preventDefault();
@@ -103,31 +102,27 @@ export default function ImageUploadSection({
                 src={modelValue}
                 alt="Uploaded file"
                 title="Click image to view full screen"
-                className="w-full h-full object-contain cursor-pointer"
+                className="w-full h-full object-contain cursor-zoom-in"
                 onClick={() => setShowFullScreenModal(true)}
-                onLoad={() => setImageLoaded(true)}
               />
-              {imageLoaded && (
-                <div className={`absolute -top-5 -right-3 opacity-0 group-hover:opacity-100 transition-opacity`}>
-                  <div className="flex justify-center items-center gap-3">
-                    <label htmlFor={inputId} className={`relative`}>
-                      <IconButton tooltip="Change Image" iconName={IconTypes.Edit} height="30" width="30" className={`${styles.buttonColorToggle}`} />
-                      <input id={inputId} name="file-upload" type="file" className="sr-only" onChange={handleFileChange} accept={allowedFileTypes.join(', ')} />
-                    </label>
-                    <IconButton
-                      tooltip="Remove Image"
-                      iconName={IconTypes.Trash}
-                      height="30"
-                      width="30"
-                      className={`inline-flex items-center ${styles.buttonColorToggle}`}
-                      onClick={() => {
-                        clearSelectedImage();
-                        setImageLoaded(false);
-                      }}
-                    />
-                  </div>
+              <div className={`absolute -top-5 -right-3 opacity-0 group-hover:opacity-100 transition-opacity`}>
+                <div className="flex justify-center items-center gap-3">
+                  <label htmlFor={inputId} className={`relative`}>
+                    <IconButton tooltip="Change Image" iconName={IconTypes.Edit} height="30" width="30" className={`${styles.buttonColorToggle}`} />
+                    <input id={inputId} name="file-upload" type="file" className="sr-only" onChange={handleFileChange} accept={allowedFileTypes.join(', ')} />
+                  </label>
+                  <IconButton
+                    tooltip="Remove Image"
+                    iconName={IconTypes.Trash}
+                    height="30"
+                    width="30"
+                    className={`inline-flex items-center ${styles.buttonColorToggle}`}
+                    onClick={() => {
+                      clearSelectedImage();
+                    }}
+                  />
                 </div>
-              )}
+              </div>
             </div>
           </div>
         ) : (
diff --git a/academy-ui/src/components/bytes/Edit/EditByteStepperItem.module.scss b/shared/web-core/src/components/core/image/EditableImage.module.scss
similarity index 100%
rename from academy-ui/src/components/bytes/Edit/EditByteStepperItem.module.scss
rename to shared/web-core/src/components/core/image/EditableImage.module.scss
diff --git a/shared/web-core/src/components/core/image/EditableImage.tsx b/shared/web-core/src/components/core/image/EditableImage.tsx
new file mode 100644
index 000000000..8dff4198c
--- /dev/null
+++ b/shared/web-core/src/components/core/image/EditableImage.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import dummyImage from '@dodao/web-core/images/image-placeholder.png';
+import IconButton from '@dodao/web-core/components/core/buttons/IconButton';
+import OverlayOnHover from '@dodao/web-core/components/core/overlay/OverlayOnHover';
+import ViewEditableImage from '@dodao/web-core/components/core/image/ViewEditableImage';
+import { IconTypes } from '@dodao/web-core/components/core/icons/IconTypes';
+import styles from './EditableImage.module.scss';
+
+interface EditableImageProps {
+  imageUrl?: string | null;
+  onRemove: () => void;
+  onUpload: () => void;
+  height?: string;
+  maxWidth?: string;
+  label?: string;
+  afterUploadLabel?: string;
+  disabled?: boolean;
+  disabledTooltip?: string;
+  error?: string | boolean;
+}
+
+export default function EditableImage({
+  imageUrl,
+  onRemove,
+  onUpload,
+  height = '150px',
+  maxWidth = '100%',
+  label,
+  afterUploadLabel,
+  disabled,
+  disabledTooltip = '',
+  error,
+}: EditableImageProps) {
+  return (
+    <div className="my-4 flex justify-center items-center">
+      {imageUrl ? (
+        <div className="flex flex-col justify-center items-center">
+          <div className={`relative group inline-block h-[${height}]`}>
+            <img src={imageUrl} style={{ height: height, maxWidth: maxWidth }} className="border border-color object-cover" />
+
+            <OverlayOnHover>
+              <ViewEditableImage onClickEditIcon={onUpload} onClickTrashIcon={onRemove} />
+            </OverlayOnHover>
+          </div>
+          {afterUploadLabel && !error && <div className="mt-2 font-semibold">{afterUploadLabel}</div>}
+        </div>
+      ) : (
+        <div className="h-full flex flex-col justify-center items-center">
+          <div className={`relative h-[150px] group ${error ? 'border border-red-600 border-2' : ''}`}>
+            <img src={dummyImage.src} style={{ height: '100%', width: '100%' }} className="cursor-pointer border border-color" />
+            <OverlayOnHover>
+              <IconButton
+                tooltip={`${disabled ? disabledTooltip : 'Add Image'}`}
+                iconName={IconTypes.PlusIcon}
+                height="30"
+                width="30"
+                className={`p-1 rounded-full ${styles.iconsColorToggle}`}
+                onClick={onUpload}
+                disabled={disabled}
+              />
+            </OverlayOnHover>
+          </div>
+          {label && !error && <div className="mt-2 font-semibold">{label}</div>}
+          {typeof error === 'string' && <p className="mt-2 text-sm text-red-600">{error}</p>}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/shared/web-core/src/components/core/image/EditableVideo.module.scss b/shared/web-core/src/components/core/image/EditableVideo.module.scss
new file mode 100644
index 000000000..ba35bebfe
--- /dev/null
+++ b/shared/web-core/src/components/core/image/EditableVideo.module.scss
@@ -0,0 +1,9 @@
+.iconsColorToggle {
+    background-color: var(--text-color);
+    color: var(--primary-color);
+    
+    &:hover {
+      background-color: var(--primary-color);
+      color: var(--text-color);
+    }
+}
\ No newline at end of file
diff --git a/shared/web-core/src/components/core/image/EditableVideo.tsx b/shared/web-core/src/components/core/image/EditableVideo.tsx
new file mode 100644
index 000000000..937a321e8
--- /dev/null
+++ b/shared/web-core/src/components/core/image/EditableVideo.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import dummyVideo from '@dodao/web-core/images/video-placeholder.png';
+import IconButton from '@dodao/web-core/components/core/buttons/IconButton';
+import OverlayOnHover from '@dodao/web-core/components/core/overlay/OverlayOnHover';
+import { IconTypes } from '@dodao/web-core/components/core/icons/IconTypes';
+import styles from './EditableVideo.module.scss';
+import WebCoreFileUploader from '@dodao/web-core/components/core/uploadInput/FileUploader';
+
+interface EditableVideoProps {
+  videoUrl?: string | null;
+  onRemove: () => void;
+  onUpload: (file: File) => Promise<void>;
+  height?: string;
+  label?: string;
+  afterUploadLabel?: string;
+  disabled?: boolean;
+  disabledTooltip?: string;
+  loading: boolean;
+  error?: string | boolean;
+}
+
+export default function EditableVideo({
+  videoUrl,
+  onRemove,
+  onUpload,
+  height = '150px',
+  label,
+  afterUploadLabel,
+  disabled,
+  disabledTooltip = '',
+  loading,
+  error,
+}: EditableVideoProps) {
+  return (
+    <div className="my-4 flex justify-center items-center">
+      {videoUrl ? (
+        <div className="flex flex-col justify-center items-center">
+          <div className={`relative group inline-block h-[${height}] justify-center`}>
+            <video src={videoUrl} style={{ height: height }} className="border border-color" />
+
+            <OverlayOnHover>
+              <div className={`flex justify-center items-center gap-x-4 ${loading ? 'cursor-progress' : ''}`}>
+                <WebCoreFileUploader
+                  allowedFileTypes={['video/mp4', 'video/x-m4v', 'video/*']}
+                  className={`flex justify-center items-center`}
+                  uploadFile={async (file) => {
+                    onRemove();
+                    onUpload(file);
+                  }}
+                  loading={loading}
+                >
+                  <IconButton tooltip="Change Video" iconName={IconTypes.Edit} height="30" width="30" className={`${styles.iconsColorToggle}`} />
+                </WebCoreFileUploader>
+                <IconButton
+                  tooltip="Remove Video"
+                  iconName={IconTypes.Trash}
+                  height="30"
+                  width="30"
+                  className={`${styles.iconsColorToggle}`}
+                  onClick={onRemove}
+                />
+              </div>
+            </OverlayOnHover>
+          </div>
+          {afterUploadLabel && !error && <div className="mt-2 font-semibold">{afterUploadLabel}</div>}
+        </div>
+      ) : (
+        <div className="h-full flex flex-col justify-center items-center">
+          <div className={`relative h-[150px] group ${error ? 'border border-red-600 border-2' : ''}`}>
+            <img src={dummyVideo.src} style={{ height: '100%' }} className="cursor-pointer border border-color" />
+            <OverlayOnHover>
+              <WebCoreFileUploader
+                allowedFileTypes={['video/mp4', 'video/x-m4v', 'video/*']}
+                className={'flex justify-center items-center px-3 py-2 '}
+                uploadFile={onUpload}
+                loading={loading}
+              >
+                <IconButton
+                  tooltip={`${disabled ? disabledTooltip : 'Add Video'}`}
+                  iconName={IconTypes.PlusIcon}
+                  height="30"
+                  width="30"
+                  className={`p-1 rounded-full ${styles.iconsColorToggle}`}
+                />
+              </WebCoreFileUploader>
+            </OverlayOnHover>
+          </div>
+          {label && !error && <div className="mt-2 font-semibold">{label}</div>}
+          {typeof error === 'string' && <p className="mt-2 text-sm text-red-600">{error}</p>}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/shared/web-core/src/components/core/select/StyledSelect.tsx b/shared/web-core/src/components/core/select/StyledSelect.tsx
index 39818a124..1f5f1b848 100644
--- a/shared/web-core/src/components/core/select/StyledSelect.tsx
+++ b/shared/web-core/src/components/core/select/StyledSelect.tsx
@@ -28,6 +28,7 @@ const StyledListboxButton = styled(Listbox.Button)`
 
 const StyledListboxOptions = styled(Listbox.Options)`
   background-color: var(--bg-color);
+  border: 1px solid var(--border-color);
   .active {
     background-color: var(--primary-color);
   }
diff --git a/shared/web-core/src/components/core/uploadInput/FileUploader.tsx b/shared/web-core/src/components/core/uploadInput/FileUploader.tsx
index 7be0760df..8e55561d9 100644
--- a/shared/web-core/src/components/core/uploadInput/FileUploader.tsx
+++ b/shared/web-core/src/components/core/uploadInput/FileUploader.tsx
@@ -34,6 +34,10 @@ export default function FileUploader({ loading, children, className, allowedFile
     await uploadFile(file);
   };
 
+  const handleClick = () => {
+    inputRef.current?.click();
+  };
+
   return (
     <div className={className}>
       {loading ? (
@@ -42,8 +46,10 @@ export default function FileUploader({ loading, children, className, allowedFile
         </div>
       ) : (
         <FileSelect>
-          <input type="file" ref={inputRef} onChange={handleFileChange} accept={allowedFileTypes.join(', ')} />
-          {children}
+          <div onClick={handleClick}>
+            <input type="file" ref={inputRef} onChange={handleFileChange} accept={allowedFileTypes.join(', ')} />
+            {children}
+          </div>
         </FileSelect>
       )}
     </div>
diff --git a/academy-ui/src/images/TidbitsHub/image-placeholder.png b/shared/web-core/src/images/image-placeholder.png
similarity index 100%
rename from academy-ui/src/images/TidbitsHub/image-placeholder.png
rename to shared/web-core/src/images/image-placeholder.png
diff --git a/shared/web-core/src/images/video-placeholder.png b/shared/web-core/src/images/video-placeholder.png
new file mode 100644
index 000000000..b3ad12abe
Binary files /dev/null and b/shared/web-core/src/images/video-placeholder.png differ
diff --git a/tasks/all-tasks.md b/tasks/all-tasks.md
index f735eda56..06a295b44 100644
--- a/tasks/all-tasks.md
+++ b/tasks/all-tasks.md
@@ -38,6 +38,7 @@ Must have features
 - [ ] Making it easy for the admin to login. Right now we are not showing any login button. May be we show in the footer? or somewhere else where its not too visible?
   
 ### Tidbits
+- [ ] Edit modal - in stepper - image uploader - if gif is uploaded, edit and trash icon doesnt appear 
 - [ ] Edit modal - in stepper - icon to duplicate a step 
 - [ ] Edit modal - in stepper - bit of padding left & right for the closed accordion content (name+arrow)
 - [ ] Edit modal - in stepper - add border to image display mode dropdown