diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/css/styles.css b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/css/styles.css
index ba1c82548d8..8e51761433c 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/css/styles.css
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/css/styles.css
@@ -1838,3 +1838,13 @@ div.consoleIcon {
 .jstree-deletebtn:hover {
     color: white;
 }
+
+.extension-not-install {
+    color: wheat;
+    font-weight: bold;
+}
+
+.partial-extension-install-btn,
+.extension-install-btn {
+    color: whitesmoke;
+}
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js
new file mode 100644
index 00000000000..ca6074aa916
--- /dev/null
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js
@@ -0,0 +1,236 @@
+/**
+ * Copyright (c) 2020, WSO2 Inc. (http://www.wso2.org)  Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+define(['require', 'lodash', 'jquery', 'constants'],
+    function (require, _, $, Constants) {
+        return function (app) {
+
+            /**
+             * initialize function for ExtensionInstallDialog.
+             */
+            this.initialize = function (options) {
+                this.dialog_containers = $(_.get(options.config.dialog, 'container'));
+                this.extensionList = app.utils.extensionData;
+            },
+                /**
+                 * show function for display the ExtensionInstallDialog.
+                 */
+                this.show = function () {
+                    this._extensionListModal.modal('show');
+                },
+
+                /**
+                 * render function for rendering all the contents of ExtensionInstallDialog.
+                 */
+                this.render = function () {
+                    var self = this;
+                    if (!_.isNil(this._extensionListModal)) {
+                        this._extensionListModal.remove();
+                    }
+
+                    var extensionModelOpen = $(
+                        "<div class='modal fade' id='extensionInstallConfigModalId' tabindex='-1' role='dialog' " +
+                        "aria-hidden='true'>" + "<div class='modal-dialog file-dialog' role='document'>" +
+                        "<div class='modal-content' id='sampleDialog'>" +
+                        "<div class='modal-header'>" +
+                        "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
+                        "<i class=\"fw fw-cancel  about-dialog-close\"></i>" +
+                        "</button>" +
+                        "<h4 class='modal-title file-dialog-title'>Extension Details</h4>" +
+                        "<hr class='style1'>" +
+                        "</div>" +
+                        "<div class='modal-body'>" +
+                        "<div class='container-fluid'>" +
+                        "<form class='form-horizontal' onsubmit='return false'>" +
+                        "<div class='form-group'>" +
+                        "<label for='locationSearch' class='col-sm-2 file-dialog-label'>Search :</label>" +
+                        "<input type='text' placeholder='enter the extension name'" +
+                        " class='search-file-dialog-form-control'" +
+                        " id='extensionSearchId' autofocus>" +
+                        "</div>" +
+                        "<div class='form-group'>" +
+                        "<div class='file-dialog-form-scrollable-block' style='padding:10px4px; margin-left:35px;'>" +
+                        "<div id='noResults' style='display:none;'>No extension has found</div>" +
+                        "<div id='extensionTableId' class='samples-pane'>" +
+                        "</div>" +
+                        "<div id='file-browser-error' class='alert alert-danger' style='display: none;'>" +
+                        "</div>" +
+                        "</div>" +
+                        "</div>" +
+                        "<div class='form-group'>" +
+                        "<div class='file-dialog-form-btn'>" +
+                        "<button type='button' class='btn btn-default' data-dismiss='modal'>cancel</button>" +
+                        "</div>" +
+                        "</div>" +
+                        "</form>" +
+                        "<div id='extensionInstallErrorId' class='alert alert-danger'>" +
+                        "<strong>Error!</strong>Something went wrong." +
+                        "</div>" +
+                        "</div>" +
+                        "</div>" +
+                        "</div>" +
+                        "</div>" +
+                        "</div>");
+
+                    var extensionInstallConfigModal = extensionModelOpen.filter("#extensionInstallConfigModalId");
+                    var extensionInstallError = extensionModelOpen.find("#extensionInstallErrorId");
+                    var extensionSearch = extensionModelOpen.find("input").filter("#extensionSearchId");
+
+                    extensionInstallConfigModal.on('shown.bs.modal', function () {
+                        extensionSearch.focus();
+                    });
+                    var extensionContainer = extensionModelOpen.find("div").filter("#extensionTableId");
+
+                    //define the map to store Partially extension modal based on key
+                    var partialExtensionDetailModal = new Map();
+                    renderExtensions();
+                    var callbackExtensionFileBrowser = function (updatedExtension, isUpdated) {
+                        if (isUpdated) {
+                            app.utils.extensionData.set(updatedExtension.extensionInfo.name,updatedExtension);
+                            self.renderExtensions();
+                        }
+                    };
+                    var extensionTable;
+
+                   this.renderExtensions = function () {
+                        extensionContainer.empty();
+                        extensionTable = $('<table class="table table-hover data-table"' +
+                            ' id="extensionTableId"><tbody></tbody></table>');
+                        app.utils.extensionData.forEach(function (extension, key) {
+                            var extensionTableBodyData;
+                            if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_INSTALLED) {
+                                extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Installed</td><td><button' +
+                                    ' class="btn btn-block btn' +
+                                    ' btn-primary">' + Constants.UNINSTALL + '</button></td></tr>');
+                                extensionButtonFunctionInsert(extensionTableBodyData,extension);
+                            } else if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_PARTIALLY_INSTALLED) {
+                                extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Partially-Installed' +
+                                    '&nbsp; &nbsp;<a data-toggle="modal"' +
+                                    ' id="' + key + '"><i class="fw' +
+                                    ' fw-info"></i></a></td><td><button' +
+                                    ' class="btn btn-block btn' +
+                                    ' btn-primary">' + Constants.UNINSTALL + '</button></td></tr>');
+                                createAlertModalBoxForNotAndPartialExtension(extension, key, extensionTableBodyData);
+                                extensionButtonFunctionInsert(extensionTableBodyData,extension);
+
+                            } else if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED) {
+                                extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Not-Installed</td><td><button' +
+                                    ' class="btn btn-block btn' +
+                                    ' btn-primary">' + Constants.INSTALL + '</button></td></tr>');
+                                extensionButtonFunctionInsert(extensionTableBodyData,extension);
+                            }
+                            extensionTable.append(extensionTableBodyData);
+                        });
+                        extensionContainer.append(extensionTable);
+                    }
+                    extensionSearch.keyup(function () {
+                        searchExtension(extensionTable, extensionSearch.val());
+                    });
+                    $(this.dialog_containers).append(extensionModelOpen);
+                    extensionInstallError.hide();
+                    this._extensionListModal = extensionModelOpen;
+
+                    /**
+                     * insert the onclick function for extension button.
+                     * @param extensionTableBodyData
+                     * @param extension
+                     * @param callbackExtensionFileBrowser
+                     * @returns {*}
+                     */
+                    function extensionButtonFunctionInsert(extensionTableBodyData,extension) {
+                       return extensionTableBodyData.find("button").click(function () {
+                            app.utils.extensionUpdateThroughFile(extension,callbackExtensionFileBrowser);
+                        });
+                    }
+
+                    /**
+                     * create a alert details model box for extension dependency.
+                     * @param extension object
+                     * @param key map key for object
+                     * @param extensionTableBodyData is modal body
+                     */
+                    function createAlertModalBoxForNotAndPartialExtension(extension, key, extensionTableBodyData) {
+                        var partialModel = $(
+                            '<div class="modal fade" id="' + key + '">' +
+                            '<div class="modal-dialog">' +
+                            '<div class="modal-content">' +
+                            '<div class="modal-header">' +
+                            "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
+                            "<i class=\"fw fw-cancel  about-dialog-close\"></i>" +
+                            "</button>" +
+                            '<h2 class="modal-title file-dialog-title" id="partialExtenName">'
+                            + extension.extensionInfo.name +
+                            '</h2>' +
+                            '<hr class="style1">' +
+                            '</div>' +
+                            '<div id="modalBodyId" class="modal-body">' +
+                            '</div>' +
+                            '<div class="modal-footer">' +
+                            '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
+                            '</div>' +
+                            '</div>' +
+                            '</div>' +
+                            '</div>');
+
+                        var modalBody = partialModel.find("div").filter("#modalBodyId");
+
+                        if (extension.manuallyInstall) {
+                            extension.manuallyInstall.forEach(function (dependency) {
+                                modalBody.append($('<h3>' + dependency.name + ' </h3>' +
+                                    '<h4>Description</h4>' +
+                                    '<div id="partialExtenDescription" style = "text-align:justify">'
+                                    + dependency.download.info.description +
+                                    '</div>' +
+                                    '<h4>Install</h4>' +
+                                    '<div id="partialExtenInstall" style = "text-align:justify" >'
+                                    + dependency.download.info.install +
+                                    '</div>'));
+                            });
+                        }
+
+                        partialExtensionDetailModal.set(key, partialModel);
+
+                        extensionTableBodyData.find("a").filter("#" + key).click(function () {
+                            extensionPartialModelDisplay(partialExtensionDetailModal.get(key));
+                        });
+                    };
+
+                    /**
+                     * search function for seek the extensions.
+                     * @param extensionTable
+                     * @param locationSearch
+                     */
+                    function searchExtension(extensionTable, locationSearch) {
+                        var unmatchedCount = 0, filter, table, tr, td, i, txtValue;
+                        var noResultsElement = extensionModelOpen.find("div").filter("#noResults");
+                        filter = locationSearch.toUpperCase();
+                        table = extensionTable[0];
+                        tr = table.getElementsByTagName("tr");
+                        for (i = 0; i < tr.length; i++) {
+                            td = tr[i].getElementsByTagName("td")[0];
+                            if (td) {
+                                txtValue = td.textContent || td.innerText;
+                                if (txtValue.toUpperCase().indexOf(filter) > -1) {
+                                    tr[i].style.display = "";
+                                } else {
+                                    tr[i].style.display = "none";
+                                    unmatchedCount += 1;
+                                }
+                            }
+                        }
+                        var isMatched = (unmatchedCount === tr.length);
+                        noResultsElement.toggle(isMatched);
+                    }
+
+                    /**
+                     * display the inner modal box for the partially installed extension.
+                     * @param extensionPartialModel
+                     */
+                    function extensionPartialModelDisplay(extensionPartialModel) {
+                        self._extensionPartialModel = extensionPartialModel;
+                        self._extensionPartialModel.modal('show');
+                    }
+                }
+        };
+    });
\ No newline at end of file
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/module.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/module.js
index 728bc8d4525..f69812cd462 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/module.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/dialog/module.js
@@ -1,11 +1,11 @@
 /**
  * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org)  Apache License, Version 2.0  http://www.apache.org/licenses/LICENSE-2.0
  */
-define(['./save-to-file-dialog', './replace-confirm-dialog', './open-file-dialog', './close-confirm-dialog',
+define(['./save-to-file-dialog', './replace-confirm-dialog', './open-file-dialog','./extension-install-dialog', './close-confirm-dialog',
         './import-file-dialog', './export-file-dialog', './settings-dialog', './close-all-confirm-dialog',
         './delete-confirm-dialog', './open-sample-file-dialog', './export-dialog', './sample-event-dialog',
         './query-store-dialog', './deploy-file-dialog', './export-dialog'],
-    function (SaveToFileDialog, ReplaceConfirmDialog, OpenFileDialog, CloseConfirmDialog, ImportFileDialog,
+    function (SaveToFileDialog, ReplaceConfirmDialog, OpenFileDialog,ExtensionInstallDialog, CloseConfirmDialog, ImportFileDialog,
               ExportFileDialog, SettingsDialog, CloseAllConfirmDialog, DeleteConfirmDialog, OpenSampleFileDialog,
               DockerExportDialog, SampleEventDialog, QueryStoreDialog, DeployFileDialog, ExportDialog) {
         return {
@@ -13,6 +13,7 @@ define(['./save-to-file-dialog', './replace-confirm-dialog', './open-file-dialog
             open_file_dialog: OpenFileDialog,
             CloseConfirmDialog: CloseConfirmDialog,
             ReplaceConfirmDialog: ReplaceConfirmDialog,
+            ExtensionInstallDialog :ExtensionInstallDialog,
             import_file_dialog: ImportFileDialog,
             export_file_dialog: ExportFileDialog,
             settings_dialog: SettingsDialog,
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/menu-bar/file-menu.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/menu-bar/file-menu.js
index b432f8bcc16..b6374dfeaf4 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/menu-bar/file-menu.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/menu-bar/file-menu.js
@@ -60,6 +60,24 @@ define([], function () {
                 },
                 disabled: false
             },
+            {
+                id: "extensionInstall",
+                label: "Extension Installation",
+                command: {
+                    id: "extension-install-dialog",
+                    shortcuts: {
+                        mac: {
+                            key: "command+alt+i",
+                            label: "\u2318\u2325I"
+                        },
+                        other: {
+                            key: "ctrl+alt+i",
+                            label: "Ctrl+Alt+I"
+                        }
+                    }
+                },
+                disabled: false
+            },
             {
                 id: "save",
                 label: "Save",
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
index 4141c101ab6..7d8be458cc0 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/utils/utils.js
@@ -1,9 +1,11 @@
 /**
  * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org)  Apache License, Version 2.0  http://www.apache.org/licenses/LICENSE-2.0
  */
-define(['require', 'jquery'],
-    function (require, $) {
+define(['require', 'jquery', 'constants'],
+    function (require, $, Constants) {
+        var self = this;
         var Utils = function () {
+            this.extensionData = getExtensionDetails();
         };
 
         var rest_client_constants = {
@@ -15,6 +17,167 @@ define(['require', 'jquery'],
             editorUrl: window.location.protocol + "//" + window.location.host + '/editor'
         };
 
+        /**
+         * getting extension data from back end.
+         * @returns {Map|Map}
+         */
+        function getExtensionDetails() {
+            return new Map(Object.entries({
+                "kafka": {
+                    "extensionStatus": "NOT_INSTALLED",
+                    "extensionInfo": {
+                        "name": "kafka",
+                        "version": "5.0.8-SNAPSHOT"
+                    }
+                },
+                "redis": {
+                    "extensionStatus": "NOT_INSTALLED",
+                    "extensionInfo": {
+                        "name": "redis",
+                        "version": "3.1.2-SNAPSHOT"
+                    },
+                    "manuallyInstall": [
+                        {
+                            "name": "redis-clients",
+                            "version": "2.3.0",
+                            "download": {
+                                "info": {
+                                    "description": "redis clients is like a one extension",
+                                    "install": "by using this way we can install redis-clients"
+                                },
+                                "autoDownloadable": false,
+                                "url": "https://repo1.maven.org/maven2/org/apache/redis/redis_2.11/2.1.1/redis_2.11-2.1.1.jar"
+                            },
+                            "type": "BUNDLE",
+                            "lookupRegex": "kafka-clients-(.+).jar"
+                        },
+                        {
+                            "name": "redis-server",
+                            "version": "2.3.0",
+                            "download": {
+                                "info": {
+                                    "description": "redis clients is like a one extension",
+                                    "install": "by using this way we can install redis-clients"
+                                },
+                                "autoDownloadable": false,
+                                "url": "https://repo1.maven.org/maven2/org/apache/redis/redis_2.11/2.1.1/kafka_2.11-2.1.1.jar"
+                            },
+                            "type": "BUNDLE",
+                            "lookupRegex": "kafka-server-(.+).jar"
+                        }
+                    ]
+                },
+                "grpc": {
+                    "extensionStatus": "NOT_INSTALLED",
+                    "extensionInfo": {
+                        "name": "grpc",
+                        "version": "3.1.2-SNAPSHOT"
+                    },
+                    "manuallyInstall": [
+                        {
+                            "name": "grpc-clients",
+                            "version": "2.3.0",
+                            "download": {
+                                "info": {
+                                    "description": "grpc clients is like a one extension",
+                                    "install": "by using this way we can install grpc-clients"
+                                },
+                                "autoDownloadable": false,
+                                "url": "https://repo1.maven.org/maven2/org/apache/grpc/grpc_2.11/2.1.1/grpc_2.11-2.1.1.jar"
+                            },
+                            "type": "BUNDLE",
+                            "lookupRegex": "grpc-clients-(.+).jar"
+                        },
+                        {
+                            "name": "grpc-server",
+                            "version": "2.3.0",
+                            "download": {
+                                "info": {
+                                    "description": "grpc server is like a one extension",
+                                    "install": "by using this way we can install grpc-server"
+                                },
+                                "autoDownloadable": false,
+                                "url": "https://repo1.maven.org/maven2/org/apache/grpc/grpc_2.11/2.1.1/grpc_2.11-2.1.1.jar"
+                            },
+                            "type": "BUNDLE",
+                            "lookupRegex": "grpc-server-(.+).jar"
+                        }
+                    ]
+                },
+                "nats": {
+                    "extensionStatus": "NOT_INSTALLED",
+                    "extensionInfo": {
+                        "name": "nats",
+                        "version": "3.1.2-SNAPSHOT"
+                    },
+                }
+            }));
+        }
+        /**
+         * provide the update details about the extension
+         * @param extension
+         * @param callbackUpdater
+         * @param key
+         * @param callback
+         */
+        Utils.prototype.extensionUpdateThroughFile = function (extension,callbackUpdater) {
+            self.extensionInstallUninstallAlertModal = $(
+                "<div class='modal fade' id='extensionAlertModal' tabindex='-1' role='dialog'" +
+                " aria-tydden='true'>" +
+                "<div class='modal-dialog file-dialog' role='document'>" +
+                "<div class='modal-content'>" +
+                "<div class='modal-header'>" +
+                "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
+                "<i class='fw fw-cancel about-dialog-close'> </i> " +
+                "</button>" +
+                "<h4 class='modal-title file-dialog-title' id='newConfigModalLabel'>Confirmation<" +
+                "/h4>" +
+                "<hr class='style1'>" +
+                "</div>" +
+                "<div class='modal-body'>" +
+                "<div class='container-fluid'>" +
+                "<form class='form-horizontal' onsubmit='return false'>" +
+                "<div class='form-group'>" +
+                "<label for='configName' class='col-sm-9 file-dialog-label'>" +
+                "Are you sure to " + ((extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED) ? 'install' : 'unInstall') + " " + extension.extensionInfo.name + " ?" +
+                "</label>" +
+                "</div>" +
+                "<div class='form-group'>" +
+                "<div class='file-dialog-form-btn'>" +
+                "<button id='installUninstallId' type='button' class='btn btn-primary'>" + ((extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED) ? 'install' : 'unInstall') +
+                "</button>" +
+                "<div class='divider'/>" +
+                "<button type='cancelButton' class='btn btn-default' data-dismiss='modal'>cancel</button>" +
+                "</div>" +
+                "</form>" +
+                "</div>" +
+                "</div>" +
+                "</div>" +
+                "</div>" +
+                "</div>"
+            ).modal('show');
+
+            self.extensionInstallUninstallAlertModal.find("button").filter("#installUninstallId").click(function () {
+                self.extensionInstallUninstallAlertModal.modal('hide');
+                var updateData = {
+                    "name": extension.extensionInfo.name,
+                    "action": (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED)
+                        ? Constants.INSTALL : Constants.UNINSTALL
+                };
+                //this updateData goes to back end.
+                console.log(updateData.name + " " + updateData.action);
+                //this updatedExtension data should come from backend.
+                var updatedExtension = {
+                    "extensionStatus": "INSTALLED",
+                    "extensionInfo": {
+                        "name": "kafka",
+                        "version": "5.0.8-SNAPSHOT"
+                    }
+                };
+                //call back function changes the front design based on the updated  json data from back end
+                callbackUpdater(updatedExtension, true);
+            });
+        };
 
         Utils.prototype.retrieveSiddhiAppNames = function (successCallback, errorCallback, context) {
             $.ajax({
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/workspace/workspace.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/workspace/workspace.js
index 20013587d9e..9eaf0ccd124 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/workspace/workspace.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/js/workspace/workspace.js
@@ -621,6 +621,14 @@ define(['ace/ace', 'jquery', 'lodash', 'log','dialogs','./service-client','welco
                 this._openSampleFileDialog.show();
             };
 
+            this.openExtensionInstallDialog = function openExtensionInstallDialog() {
+                if(_.isNil(this._ExtensionInstallDialog)){
+                    this._ExtensionInstallDialog = new Dialogs.ExtensionInstallDialog(app);
+                }
+                this._ExtensionInstallDialog.render();
+                this._ExtensionInstallDialog.show();
+            };
+
             this.openQueryStore = function openQueryStore(options){
                 if(_.isNil(this._queryStoreApi)){
                     var opts = _.cloneDeep(_.get(app.config, 'query_store_api'));
@@ -772,6 +780,9 @@ define(['ace/ace', 'jquery', 'lodash', 'log','dialogs','./service-client','welco
             app.commandManager.registerHandler('open-sample-file-open-dialog', this.openSampleFileOpenDialog, this);
             app.commandManager.registerHandler('query-store', this.openQueryStore, this);
 
+            //Open Extension install dialog
+            app.commandManager.registerHandler('extension-install-dialog', this.openExtensionInstallDialog , this);
+
             //Run hint tour
             app.commandManager.registerHandler('tour-guide', this.runGuide, this);
 
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/design-view/constants.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/design-view/constants.js
index 669cc7aa547..f0ae8448196 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/design-view/constants.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/design-view/constants.js
@@ -112,7 +112,12 @@ define(function () {
         ASC:"asc",
         DESC: "desc",
         BATCH_WINDOW_PROCESSOR: "batch",
-        MULTI_VALUE: "..."
+        MULTI_VALUE: "...",
+        EXTENSION_INSTALLED: "INSTALLED",
+        EXTENSION_NOT_INSTALLED: "NOT_INSTALLED",
+        EXTENSION_PARTIALLY_INSTALLED: "PARTIALLY_INSTALLED",
+        INSTALL: "Install",
+        UNINSTALL: "UnInstall"
     };
 
     return constants;
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js
index 54d30ea64e9..bd673246105 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/js/operator-finder/operator-finder.js
@@ -1,14 +1,13 @@
 /**
  * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org)  Apache License, Version 2.0  http://www.apache.org/licenses/LICENSE-2.0
  */
-define(['jquery', 'lodash', 'log','remarkable', 'handlebar', 'designViewUtils', 'app/source-editor/completion-engine'],
-    function ($, _, log,Remarkable, Handlebars, DesignViewUtils, CompletionEngine) {
+define(['jquery', 'lodash', 'log', 'remarkable', 'handlebar', 'designViewUtils', 'constants', 'app/source-editor/completion-engine'],
+    function ($, _, log, Remarkable, Handlebars, DesignViewUtils, Constants, CompletionEngine) {
         /**
          * Load operators from the Completion engine.
          *
          * @param callback Callback function
          */
-
         var constants = {
             STORE: 'store',
             SINK: 'sink',
@@ -251,6 +250,7 @@ define(['jquery', 'lodash', 'log','remarkable', 'handlebar', 'designViewUtils',
             }
         };
 
+        var self;
         /**
          * Initializes the module.
          *
@@ -258,6 +258,7 @@ define(['jquery', 'lodash', 'log','remarkable', 'handlebar', 'designViewUtils',
          * @constructor
          */
         var OperatorFinder = function (options) {
+            self = this;
             this._options = options;
             this._application = options.application;
             this._activateBtn = $(options.activateBtn);
@@ -273,6 +274,9 @@ define(['jquery', 'lodash', 'log','remarkable', 'handlebar', 'designViewUtils',
                 searchResults: Handlebars.compile($('#operators-search-results-template').html()),
                 moreDetails: Handlebars.compile($('#operator-details-template').html())
             };
+            this._notInstalledExtensionArray = getNotInstalledExtensionDetails();
+            this._installedExtensionArray = getInstalledExtensionDetails();
+            this._partiallyInstalledExtensionArray = getPartiallyInstalledExtensionDetails();
         };
 
         /**
@@ -304,9 +308,109 @@ define(['jquery', 'lodash', 'log','remarkable', 'handlebar', 'designViewUtils',
             }
         };
 
+        /**
+         * functions to get the not installed extension array details.
+         */
+        var getNotInstalledExtensionDetails = function () {
+            var notInstalledExtension = [];
+            self._application.utils.extensionData.forEach(function (extension) {
+                if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED) {
+                    notInstalledExtension.push(extension);
+                }
+            });
+            return notInstalledExtension;
+        };
+        /**
+         *get the partial install extension details.
+         * @returns {[array]}
+         */
+        var getPartiallyInstalledExtensionDetails = function () {
+            var partiallyInstalledExtension = [];
+            self._application.utils.extensionData.forEach(function (extension) {
+                if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_PARTIALLY_INSTALLED) {
+                    partiallyInstalledExtension.push(extension);
+                }
+            });
+            return partiallyInstalledExtension;
+        };
+        /**
+         *get the Installed extension details
+         * @returns {*}
+         */
+        var getInstalledExtensionDetails = function () {
+            var installedExtension = [];
+            self._application.utils.extensionData.forEach(function (extension) {
+                if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_INSTALLED) {
+                    installedExtension.push(extension);
+                }
+            });
+            return installedExtension;
+        };
+
+        /**
+         * get the partial intall extension object.
+         * @param operatorExtension
+         * @returns {Array}
+         */
+        var getPartiallyInstalledExtensionObject = function (operatorExtension) {
+            for (var extension of self._partiallyInstalledExtensionArray) {
+                if (((operatorExtension.name.trim().toLowerCase()).indexOf(extension.extensionInfo.name.trim().toLowerCase())) > -1) {return extension;}
+            }
+        };
+        /**
+         * get the installed extension object
+         * @param operatorExtension
+         */
+        var getInstalledExtensionObject = function (operatorExtension) {
+            for (var extension of self._installedExtensionArray) {
+                if (((operatorExtension.name.trim().toLowerCase()).indexOf(extension.extensionInfo.name.trim().toLowerCase())) > -1) {return extension;}
+            }
+        };
+        /**
+         * get the not-installed extension object based on extension name.
+         * @param operatorExtensionName
+         * @returns {extension Object}
+         */
+        var getNotInstalledExtensionObject = function (operatorExtension) {
+            for (var extension of self._notInstalledExtensionArray) {
+                if (((operatorExtension.name.trim().toLowerCase()).indexOf(extension.extensionInfo.name.trim().toLowerCase())) > -1) {return extension;}
+            }
+        };
+        /**
+         * check the whether operator extension is installed or not.
+         * @param operatorExtensionName
+         * return true/false.
+         */
+        var isNotInstalledExtension = function (operatorExtension) {
+            for (var extension of self._notInstalledExtensionArray) {
+                if (((operatorExtension.name.trim().toLowerCase()).indexOf(extension.extensionInfo.name.trim().toLowerCase())) > -1) {return true;}
+            }
+        };
+
+        /**
+         * check the whether operator extension is partially installed or not.
+         * @param operatorExtension
+         * @returns {boolean}
+         */
+        var isPartialInstalledExtension = function (operatorExtension) {
+            for (var extension of self._partiallyInstalledExtensionArray) {
+                if ( ( (operatorExtension.name.trim().toLowerCase()).indexOf(extension.extensionInfo.name.trim().toLowerCase())) > -1) {return true;}
+            }
+        };
+        /**
+         * check the whether operator extension  installed or not.
+         * @param operatorExtension
+         * @returns {boolean}
+         */
+        var isInstalledExtension = function (operatorExtension) {
+            var installedExtensionArray = getInstalledExtensionDetails();
+            for (var extension of installedExtensionArray) {
+                if (((operatorExtension.name.trim().toLowerCase()).indexOf(extension.extensionInfo.name.trim().toLowerCase())) > -1) {return true;}
+            }
+        };
+
         /**
          * Searches operators using the given query.
-         *
          * @param query String query
          * @returns {{results: Array, hasResults: boolean, hasQuery: boolean, namespaces: *}} Search results
          */
@@ -320,27 +424,91 @@ define(['jquery', 'lodash', 'log','remarkable', 'handlebar', 'designViewUtils',
                 });
             }
             var keyResult = [], descriptionResult = [], combineResults;
-            this._operators.forEach(function (e, i) {
+            this._operators.forEach(function (operatorExtension, i) {
                 var result = {
-                    fqn: hasToken(e.fqn, tokens),
-                    description: hasToken(e.description, tokens)
+                    fqn: hasToken(operatorExtension.fqn, tokens),
+                    description: hasToken(operatorExtension.description, tokens)
                 };
                 if (result.fqn.status) {
-                    keyResult.push({
-                        fqn: e.fqn,
-                        htmlFqn: result.fqn.text,
-                        type: e.type,
-                        description: result.description.text,
-                        index: i
-                    });
+                    if (isNotInstalledExtension(operatorExtension)) {
+                        keyResult.push({
+                            extension: getNotInstalledExtensionObject(operatorExtension),
+                            notInstall: Constants.EXTENSION_NOT_INSTALLED,
+                            fqn: operatorExtension.fqn,
+                            htmlFqn: result.fqn.text,
+                            type: operatorExtension.type,
+                            description: result.description.text,
+                            index: i
+                        });
+                    } else if (isPartialInstalledExtension(operatorExtension)) {
+                        keyResult.push({
+                            extension: getPartiallyInstalledExtensionObject(operatorExtension),
+                            partialInstall: Constants.EXTENSION_PARTIALLY_INSTALLED,
+                            fqn: operatorExtension.fqn,
+                            htmlFqn: result.fqn.text,
+                            type: operatorExtension.type,
+                            description: result.description.text,
+                            index: i
+                        });
+                    } else if (isInstalledExtension(operatorExtension)) {
+                        keyResult.push({
+                            extension: getInstalledExtensionObject(operatorExtension),
+                            install: Constants.EXTENSION_INSTALLED,
+                            fqn: operatorExtension.fqn,
+                            htmlFqn: result.fqn.text,
+                            type: operatorExtension.type,
+                            description: result.description.text,
+                            index: i
+                        });
+                    }else {
+                        keyResult.push({
+                            fqn: operatorExtension.fqn,
+                            htmlFqn: result.fqn.text,
+                            type: operatorExtension.type,
+                            description: result.description.text,
+                            index: i
+                        });
+                    }
                 } else if (result.description.status) {
-                    descriptionResult.push({
-                        fqn: e.fqn,
-                        htmlFqn: result.fqn.text,
-                        type: e.type,
-                        description: result.description.text,
-                        index: i
-                    });
+                    if (isNotInstalledExtension(operatorExtension)) {
+                        descriptionResult.push({
+                            extension: getNotInstalledExtensionObject(operatorExtension),
+                            notInstall: Constants.EXTENSION_NOT_INSTALLED,
+                            fqn: operatorExtension.fqn,
+                            htmlFqn: result.fqn.text,
+                            type: operatorExtension.type,
+                            description: result.description.text,
+                            index: i
+                        });
+                    } else if (isPartialInstalledExtension(operatorExtension)) {
+                        descriptionResult.push({
+                            extension: getPartiallyInstalledExtensionObject(operatorExtension),
+                            partialInstall: Constants.EXTENSION_PARTIALLY_INSTALLED,
+                            fqn: operatorExtension.fqn,
+                            htmlFqn: result.fqn.text,
+                            type: operatorExtension.type,
+                            description: result.description.text,
+                            index: i
+                        });
+                    } else if (isInstalledExtension(operatorExtension)) {
+                        descriptionResult.push({
+                            extension: getInstalledExtensionObject(operatorExtension),
+                            install: Constants.EXTENSION_INSTALLED,
+                            fqn: operatorExtension.fqn,
+                            htmlFqn: result.fqn.text,
+                            type: operatorExtension.type,
+                            description: result.description.text,
+                            index: i
+                        });
+                    }else {
+                        descriptionResult.push({
+                            fqn: operatorExtension.fqn,
+                            htmlFqn: result.fqn.text,
+                            type: operatorExtension.type,
+                            description: result.description.text,
+                            index: i
+                        });
+                    }
                 }
             });
             combineResults = keyResult.concat(descriptionResult);
@@ -462,6 +630,68 @@ define(['jquery', 'lodash', 'log','remarkable', 'handlebar', 'designViewUtils',
                 self.renderSearchResults(query);
             });
 
+            //Event handler for extension installation modal open.
+            resultContent.on('click', 'a.extension-install-btn', function (e) {
+                var innerSelf = this;
+                    e.preventDefault();
+                var callbackUpdater = function (updatedExtension, isUpdated) {
+                    if (isUpdated) {
+                        self._application.utils.extensionData.set(updatedExtension.extensionInfo.name, updatedExtension);
+                        self.renderSearchResults($(innerSelf).data('extension-name'));
+                    }
+                };
+                var extensionObject = getNotInstalledExtensionObject({name: $(this).data('extension-name')});
+                self._application.utils.extensionUpdateThroughFile(extensionObject, callbackUpdater);
+                }
+            );
+
+            //Event handler for partially extension installation modal open.
+            resultContent.on('click', 'a.partial-extension-install-btn', function (e) {
+                    e.preventDefault();
+                var extensionName = {name: $(this).data('extension-names')};
+                var extension = getPartiallyInstalledExtensionObject(extensionName);
+                self._partialModel = $(
+                    '<div class="modal fade" id="' + extension.extensionInfo.name + '">' +
+                    '<div class="modal-dialog">' +
+                    '<div class="modal-content">' +
+                    '<div class="modal-header">' +
+                    "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
+                    "<i class=\"fw fw-cancel  about-dialog-close\"></i>" +
+                    "</button>" +
+                    '<h2 class="modal-title file-dialog-title" id="partialExtenName">'
+                    + extension.extensionInfo.name +
+                    '</h2>' +
+                    '<hr class="style1">' +
+                    '</div>' +
+                    '<div id="modalBodyId" class="modal-body">' +
+                    '</div>' +
+                    '<div class="modal-footer">' +
+                    '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>' +
+                    '</div>');
+
+                var modalBody = self._partialModel.find("div").filter("#modalBodyId");
+
+                if (extension.manuallyInstall) {
+                    extension.manuallyInstall.forEach(function (dependency) {
+                        modalBody.append($('<h3>' + dependency.name + ' </h3>' +
+                            '<h4>Description</h4>' +
+                            '<div id="partialExtenDescription" style = "text-align:justify">'
+                            + dependency.download.info.description +
+                            '</div>' +
+                            '<h4>Install</h4>' +
+                            '<div id="partialExtenInstall" style = "text-align:justify" >'
+                            + dependency.download.info.install +
+                            '</div>'));
+                    });
+                }
+                self._partialModel.modal('show');
+
+                }
+            );
+
             resultContent.on('click', 'a.more-info', function (e) {
                 e.preventDefault();
                 var index = $(this).closest('.result').data('index');
diff --git a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/index.html b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/index.html
index 68a4bd9b91e..135b97ee55c 100644
--- a/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/index.html
+++ b/components/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/index.html
@@ -2362,6 +2362,35 @@ <h4 data-placement="right" data-container="body" title="{{fqn}}">
         <p class="description">{{{description}}}</p>
         <div class="icon-bar">
             <a href="#" class="expand-description">More...</a>
+            &nbsp;&nbsp;
+            {{#if install}}
+            <span id="InstallBtnId">
+            <span class="extension-not-install"> {{install}}</span>
+                 </span>
+            {{/if}}
+            {{#if notInstall}}
+            <span id="notInstallBtnId">
+            <span class="extension-not-install"> {{notInstall}}</span>
+            &nbsp;&nbsp;
+               <a href="#" data-extension-name="{{extension.extensionInfo.name}}"
+                  title="Click here to Install"
+                  class="extension-install-btn">
+                <i class="fw fw-download"></i>
+            </a>
+                 </span>
+            {{/if}}
+
+            {{#if partialInstall}}
+            <span id="partialBtnId">
+             <span class="extension-not-install"> {{partialInstall}}</span>
+            &nbsp;&nbsp;
+            <a href="#" data-extension-names ="{{extension.extensionInfo.name}}"
+               title="Cant Install directly Click here to get Details"
+               class="partial-extension-install-btn">
+                <i class="fw fw-warning"></i>
+            </a>
+                 <span>
+ {{/if}}
             <ul>
                 <li>
                     <span class="copy-status-msg" style="display: none">Copied to Clipboard!</span>