diff --git a/Modern Development/Service Portal Widgets/Emoji Replacer Widget/CSS-SCSS.css b/Modern Development/Service Portal Widgets/Emoji Replacer Widget/CSS-SCSS.css
new file mode 100644
index 0000000000..e5ffa58d62
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/Emoji Replacer Widget/CSS-SCSS.css	
@@ -0,0 +1,9 @@
+.card{
+  max-width:600px;
+  margin: auto;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+  border-radius: 12px;
+}
+textarea{
+ resize: none; 
+}
diff --git a/Modern Development/Service Portal Widgets/Emoji Replacer Widget/Client Script.cs b/Modern Development/Service Portal Widgets/Emoji Replacer Widget/Client Script.cs
new file mode 100644
index 0000000000..2b1f7f77a9
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/Emoji Replacer Widget/Client Script.cs	
@@ -0,0 +1,25 @@
+api.controller=function($scope,$sce) {
+  /* widget controller */
+  var c = this;
+	
+	c.emojiMap ={
+		':smile:' :'😊',
+		':sad:':'😓',
+		":heart:":'❤️',
+		":thumbsup:":'👍',
+		":laugh:":"😀",
+		":wink:":"😉",
+		":clap:":"👏",
+		":party:" :"🥳"
+	};
+	
+	c.replaceEmojis = function(){
+		var text = $scope.data.inputText || '';
+		
+		for(var key in c.emojiMap){
+			var regex = new RegExp(key.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1"),'g');
+			text = text.replace(regex,c.emojiMap[key]);
+		}
+		c.outputText= $sce.trustAsHtml(text);
+	}
+};
diff --git a/Modern Development/Service Portal Widgets/Emoji Replacer Widget/HTML.html b/Modern Development/Service Portal Widgets/Emoji Replacer Widget/HTML.html
new file mode 100644
index 0000000000..ff8831e38b
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/Emoji Replacer Widget/HTML.html	
@@ -0,0 +1,18 @@
+<div class="card p-3">
+  <h4>😊
+    Emoji Replacer
+  </h4>
+  <p class="text-muted">
+    Type something using emoji shortcuts like <code>:smile:</code>,<code>:heart:</code>, or<code>:thumbsup:</code>
+  </p>
+  <textarea class="form-control" rows="4" ng-model="data.inputText" ng-change="c.replaceEmojis()"
+        placeholder="Type your message here..."></textarea>
+  <div class ="mt-3">
+    <h5>
+      Ouput Preview:
+    </h5>
+    <div class="p-2 border rounded bg-light" ng-bind-html="c.outputText">
+      
+    </div>
+  </div>
+</div>
diff --git a/Modern Development/Service Portal Widgets/Emoji Replacer Widget/README.md b/Modern Development/Service Portal Widgets/Emoji Replacer Widget/README.md
new file mode 100644
index 0000000000..fc177fa363
--- /dev/null
+++ b/Modern Development/Service Portal Widgets/Emoji Replacer Widget/README.md	
@@ -0,0 +1,22 @@
+## Emoji Replacer Widget
+
+This widget enhances the user experience by automatically converting emojis code into visual emojis while typing - adding personality and clarity to text communication.
+## How It works
+- User types in a text box:
+- "Great job team!:tada::thumbsup:"
+- Script will detects matching emoji code using regex.
+- The widget replaces them with real emojis:
+- "Great job team!🎉👍
+## Available Emoji in Widget
+ ":smile:" :😊,
+   ":sad:":😓,
+	  ":heart:":❤️,
+		":thumbsup:":👍,
+		":laugh:":😀,
+		":wink:":😉,
+		":clap:":👏,
+		":party:":🥳,
+		":tada:":🎉
+## Output
+
+
diff --git a/Modern Development/Service Portal Widgets/Emoji Replacer Widget/emoji.png b/Modern Development/Service Portal Widgets/Emoji Replacer Widget/emoji.png
new file mode 100644
index 0000000000..71a4446a92
Binary files /dev/null and b/Modern Development/Service Portal Widgets/Emoji Replacer Widget/emoji.png differ