diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/citation.png b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/citation.png
new file mode 100644
index 00000000000000..cc0847c942693a
Binary files /dev/null and b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/citation.png differ
diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/more-like-this.png b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/more-like-this.png
new file mode 100644
index 00000000000000..9eb1c3a1ceba58
Binary files /dev/null and b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/more-like-this.png differ
diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/speech-to-text.png b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/speech-to-text.png
new file mode 100644
index 00000000000000..c951d0c418b04f
Binary files /dev/null and b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/speech-to-text.png differ
diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/suggested-questions-after-answer.png b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/suggested-questions-after-answer.png
new file mode 100644
index 00000000000000..bee4be0acf7a4f
Binary files /dev/null and b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/suggested-questions-after-answer.png differ
diff --git a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/style.module.css b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/style.module.css
index 20f0534744772d..32dc6be3bad4b2 100644
--- a/web/app/components/app/configuration/config/feature/choose-feature/feature-item/style.module.css
+++ b/web/app/components/app/configuration/config/feature/choose-feature/feature-item/style.module.css
@@ -1,7 +1,9 @@
 .preview {
   display: none;
   position: absolute;
-  transform: translate(480px, -54px);
+  top: 0;
+  left: 100%;
+  transform: translate(32px, -54px);
   width: 280px;
   height: 360px;
   background: center center no-repeat;
@@ -18,15 +20,15 @@
 }
 
 .suggestedQuestionsAfterAnswerPreview {
-  background-image: url(./preview-imgs/suggested-questions-after-answer.svg);
+  background-image: url(./preview-imgs/suggested-questions-after-answer.png);
 }
 
 .moreLikeThisPreview {
-  background-image: url(./preview-imgs/more-like-this.svg);
+  background-image: url(./preview-imgs/more-like-this.png);
 }
 
 .speechToTextPreview {
-  background-image: url(./preview-imgs/speech-to-text.svg);
+  background-image: url(./preview-imgs/speech-to-text.png);
 }
 
 .textToSpeechPreview {
@@ -35,5 +37,5 @@
 }
 
 .citationPreview {
-  background-image: url(./preview-imgs/citation.svg);
+  background-image: url(./preview-imgs/citation.png);
 }
diff --git a/web/app/components/base/features/feature-choose/feature-item/style.module.css b/web/app/components/base/features/feature-choose/feature-item/style.module.css
index 20f0534744772d..80c9460e48babd 100644
--- a/web/app/components/base/features/feature-choose/feature-item/style.module.css
+++ b/web/app/components/base/features/feature-choose/feature-item/style.module.css
@@ -1,7 +1,9 @@
 .preview {
   display: none;
   position: absolute;
-  transform: translate(480px, -54px);
+  top: 0;
+  left: 100%;
+  transform: translate(32px, -54px);
   width: 280px;
   height: 360px;
   background: center center no-repeat;
@@ -14,26 +16,26 @@
 }
 
 .openingStatementPreview {
-  background-image: url(./preview-imgs/opening-statement.png);
+  background-image: url(~@/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/opening-statement.png);
 }
 
 .suggestedQuestionsAfterAnswerPreview {
-  background-image: url(./preview-imgs/suggested-questions-after-answer.svg);
+  background-image: url(~@/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/suggested-questions-after-answer.png);
 }
 
 .moreLikeThisPreview {
-  background-image: url(./preview-imgs/more-like-this.svg);
+  background-image: url(~@/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/more-like-this.png);
 }
 
 .speechToTextPreview {
-  background-image: url(./preview-imgs/speech-to-text.svg);
+  background-image: url(~@/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/speech-to-text.png);
 }
 
 .textToSpeechPreview {
   @apply shadow-lg rounded-lg;
-  background-image: url(./preview-imgs/text-to-audio-preview-assistant@2x.png);
+  background-image: url(~@/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/text-to-audio-preview-assistant@2x.png);
 }
 
 .citationPreview {
-  background-image: url(./preview-imgs/citation.svg);
+  background-image: url(~@/app/components/app/configuration/config/feature/choose-feature/feature-item/preview-imgs/citation.png);
 }