diff --git a/app/BusinessLogicLayer/CrowdSourcingProject/Problem/CrowdSourcingProjectProblemManager.php b/app/BusinessLogicLayer/CrowdSourcingProject/Problem/CrowdSourcingProjectProblemManager.php
index 8909df8d..2ffabdf6 100644
--- a/app/BusinessLogicLayer/CrowdSourcingProject/Problem/CrowdSourcingProjectProblemManager.php
+++ b/app/BusinessLogicLayer/CrowdSourcingProject/Problem/CrowdSourcingProjectProblemManager.php
@@ -22,6 +22,8 @@ class CrowdSourcingProjectProblemManager {
     protected LanguageRepository $languageRepository;
     protected CrowdSourcingProjectManager $crowdSourcingProjectManager;
 
+    const DEFAULT_IMAGE_PATH = '/images/problem_default_image.png';
+
     public function __construct(
         CrowdSourcingProjectProblemRepository $crowdSourcingProjectProblemRepository,
         CrowdSourcingProjectTranslationManager $crowdSourcingProjectTranslationManager,
@@ -84,6 +86,8 @@ public function getCreateEditProblemViewModel(?int $id = null): CreateEditProble
     public function storeProblem(array $attributes): int {
         if (isset($attributes['problem-image']) && $attributes['problem-image']->isValid()) {
             $imgPath = FileUploader::uploadAndGetPath($attributes['problem-image'], 'problem_image');
+        } else {
+            $imgPath = self::DEFAULT_IMAGE_PATH;
         }
 
         $crowdSourcingProjectProblem = CrowdSourcingProjectProblem::create([
diff --git a/public/images/problem_default_image.png b/public/images/problem_default_image.png
new file mode 100644
index 00000000..f3aebd76
Binary files /dev/null and b/public/images/problem_default_image.png differ
diff --git a/resources/assets/js/project/problem/manage-problem.js b/resources/assets/js/project/problem/manage-problem.js
index 852f6ebe..6ae08fa5 100644
--- a/resources/assets/js/project/problem/manage-problem.js
+++ b/resources/assets/js/project/problem/manage-problem.js
@@ -51,22 +51,22 @@ import $ from "jquery";
 	// 	el.val(el.summernote("code"));
 	// };
 
-	// const initializeImgFileChangePreviewHandlers = function () {
-	// 	$(".image-input").each(function (i, obj) {
-	// 		$(obj).change(function () {
-	// 			const event = this;
-	// 			if (event.files && event.files[0]) {
-	// 				const parent = $(obj).closest(".image-input-container");
-	// 				const imgPreview = parent.find(".selected-image-preview");
-	// 				const reader = new FileReader();
-	// 				reader.onload = function (e) {
-	// 					imgPreview.attr("src", e.target.result);
-	// 				};
-	// 				reader.readAsDataURL(event.files[0]);
-	// 			}
-	// 		});
-	// 	});
-	// };
+	const initializeImgFileChangePreviewHandlers = function () {
+		$(".js-image-input").each(function (i, obj) {
+			$(obj).change(function () {
+				const event = this;
+				if (event.files && event.files[0]) {
+					const parent = $(obj).closest(".js-image-input-container");
+					const imgPreview = parent.find(".js-selected-image-preview");
+					const reader = new FileReader();
+					reader.onload = function (e) {
+						imgPreview.attr("src", e.target.result);
+					};
+					reader.readAsDataURL(event.files[0]);
+				}
+			});
+		});
+	};
 
 	// const initializeCommunicationResourcesHandlers = function () {
 	// 	initializeSummernoteAndUpdateElementOnKeyup($("#questionnaire_response_email_intro_text"), $("#intro_text"));
@@ -105,7 +105,7 @@ import $ from "jquery";
 
 	const init = function () {
 		// initializeSubmitFormListener();
-		// initializeImgFileChangePreviewHandlers();
+		initializeImgFileChangePreviewHandlers();
 		// initializeSummernote();
 		// initializeSocialMediaKeywordsTags();
         checkURLAndActivateTranslationsTab();
diff --git a/resources/assets/sass/project/problem/create-edit-problem.scss b/resources/assets/sass/project/problem/create-edit-problem.scss
index e69de29b..63f7d893 100644
--- a/resources/assets/sass/project/problem/create-edit-problem.scss
+++ b/resources/assets/sass/project/problem/create-edit-problem.scss
@@ -0,0 +1,15 @@
+@import "../../variables";
+
+.input-file-wrapper {
+	overflow: hidden;
+}
+
+.image-preview-container {
+	text-align: center;
+
+	.selected-image-preview {
+		max-height: 200px;
+		max-width: 100%;
+		padding: 20px 0;
+	}
+}
\ No newline at end of file
diff --git a/resources/views/loggedin-environment/management/problem/create-edit/partials/basic-details.blade.php b/resources/views/loggedin-environment/management/problem/create-edit/partials/basic-details.blade.php
index 69ab3b64..7b8c63a1 100644
--- a/resources/views/loggedin-environment/management/problem/create-edit/partials/basic-details.blade.php
+++ b/resources/views/loggedin-environment/management/problem/create-edit/partials/basic-details.blade.php
@@ -138,33 +138,32 @@ class="form-control {{ $errors->has('problem-default-language') ? 'is-invalid' :
                                 class="form-control {{ $errors->has('problem-slug') ? 'is-invalid' : '' }}"
                                 required
                                 placeholder="Problem Slug"
-                                {{-- value="{{ old('problem-slug') ? old('problem-slug') : $viewModel->problem->slug }}" bookmark2 --}}
-                                value="{{ old('problem-slug') ? old('problem-slug') : ''  }}"
+                                value="{{ old('problem-slug') ? old('problem-slug') : $viewModel->problem->slug }}"
                             >
                             <div id="problem-slug-feedback" class="invalid-feedback"><strong>{{ $errors->first('problem-slug') }}</strong></div>
                         </div>
                     </div>
                 @endif
 
-                <div class="form-row js-bookmark3-image-input-container">
+                <div class="form-row js-image-input-container">
                     <div class="col-sm-12">
-                        <div class="form-group css-bookmark3-input-file-wrapper">
+                        <div class="form-group input-file-wrapper">
                             <label for="problem-image">Problem Image (max-size: 2MB)</label></label>
                             <small>In order to update the currently selected image, please choose a new image by clicking the button below.</small><br>
                             <input type="file"
                                 id="problem-image"
                                 name="problem-image"
-                                class="form-control p-2 h-auto {{ $errors->has('problem-image') ? 'is-invalid' : '' }} js-bookmark3-image-input"
+                                class="form-control p-2 h-auto {{ $errors->has('problem-image') ? 'is-invalid' : '' }} js-image-input"
                                 accept="image/png,image/jpeg,image/jpg"
                                 placeholder="Problem Image"
                             >
                             <div id="problem-image-feedback" class="invalid-feedback"><strong>{{ $errors->first('problem-image') }}</strong></div>
                         </div>
-                        <div class="css-bookmark3-image-preview-container">
+                        <div class="image-preview-container">
                             <img
                                 loading="lazy" 
-                                class="css-js-bookmark3-selected-image-preview"
-                                src="{{ asset($viewModel->problem->img_url) }}"
+                                class="selected-image-preview js-selected-image-preview"
+                                src="{{ $viewModel->problem->img_url ? asset($viewModel->problem->img_url) : '/images/problem_default_image.png' }}"
                                 alt="">
                         </div>
                     </div>