diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js
index eca40fc60e9..cee5a263f65 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js
@@ -42,6 +42,15 @@ class CurrentUsersReview extends React.Component {
         });
     };
 
+    deleteCallback = () =>{
+        this.setState({
+            data: []
+        });
+    };
+
+    addCallBack =(review) =>{
+
+    };
 
     render() {
         const {data} = this.state;
@@ -60,7 +69,7 @@ class CurrentUsersReview extends React.Component {
                                 dataSource={data}
                                 renderItem={item => (
                                     <List.Item key={item.id}>
-                                        <SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={true}/>
+                                        <SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={true} deleteCallback={this.deleteCallback} isPersonalReview={true}/>
                                     </List.Item>
                                 )}
                             >
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js
index c01a859c6a1..a8d2fb4b1d5 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js
@@ -86,6 +86,14 @@ class Reviews extends React.Component {
         });
     };
 
+    deleteCallback = () =>{
+        this.fetchData(0, limit, res => {
+            this.setState({
+                data: res,
+            });
+        });
+    };
+
     render() {
         const {loading, hasMore, data, loadMore} = this.state;
         const {uuid} = this.props;
@@ -102,7 +110,7 @@ class Reviews extends React.Component {
                         dataSource={data}
                         renderItem={item => (
                             <List.Item key={item.id}>
-                                <SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={false}/>
+                                <SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={false} deleteCallback={this.deleteCallback}/>
                             </List.Item>
                         )}
                     >
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js
index 8ca58208588..2ae260f51cc 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js
@@ -1,48 +1,83 @@
 import React from "react";
-import {Avatar} from "antd";
-import {List, Typography} from "antd";
+import {Avatar, notification} from "antd";
+import {List, Typography, Popconfirm} from "antd";
 import StarRatings from "react-star-ratings";
 import Twemoji from "react-twemoji";
 import "./SingleReview.css";
 import EditReview from "./editReview/EditReview";
+import axios from "axios";
+import config from "../../../../../../public/conf/config.json";
 
 const {Text, Paragraph} = Typography;
-const colorList = ['#f0932b', '#badc58', '#6ab04c', '#eb4d4b', '#0abde3', '#9b59b6', '#3498db', '#22a6b3','#e84393','#f9ca24'];
+const colorList = ['#f0932b', '#badc58', '#6ab04c', '#eb4d4b', '#0abde3', '#9b59b6', '#3498db', '#22a6b3', '#e84393', '#f9ca24'];
 
 class SingleReview extends React.Component {
+
+    static defaultProps = {
+        isPersonalReview: false
+    };
+
     constructor(props) {
         super(props);
+        const {username} = this.props.review;
+        const color = colorList[username.length % 10];
         this.state = {
             content: '',
             rating: 0,
-            color: '#f0932b'
+            color: color,
+            review: props.review
         }
     }
 
-    componentDidMount() {
-        const {content, rating, username} = this.props.review;
-        const color = colorList[username.length%10];
+    updateCallback = (review) => {
         this.setState({
-            content,
-            rating,
-            color
+            review
         });
-    }
+    };
 
+    deleteReview = () => {
+        const {uuid} = this.props;
+        const {id} = this.state.review;
 
-    updateCallback = (response) =>{
-        console.log(response);
-        const {rating, content} = response;
-        this.setState({
-            rating,
-            content
+        let url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' +
+            config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.store;
+
+        // call as an admin api if the review is not a personal review
+        if (!this.props.isPersonalReview) {
+            url += "/admin";
+        }
+
+        url += "/reviews/" + uuid + "/" + id;
+
+        axios.delete(url).then(res => {
+            if (res.status === 200) {
+                notification["success"]({
+                    message: 'Done!',
+                    description:
+                        'The review has been deleted successfully.',
+                });
+
+                this.props.deleteCallback(id);
+            }
+        }).catch((error) => {
+            console.log(error);
+            if (error.hasOwnProperty("response") && error.response.status === 401) {
+                window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/store/login';
+            } else {
+                notification["error"]({
+                    message: 'Something went wrong',
+                    description:
+                        "We were unable to delete the review..",
+                });
+            }
         });
+
     };
 
     render() {
-        const {review, isEditable, isDeletable, uuid} = this.props;
-        const {content, rating, color} = this.state;
-        const {username} = review;
+        const {isEditable, isDeletable, uuid} = this.props;
+        const {color, review} = this.state;
+        const {content, rating, username} = review;
         const avatarLetter = username.charAt(0).toUpperCase();
         const body = (
             <div style={{marginTop: -5}}>
@@ -55,19 +90,27 @@ class SingleReview extends React.Component {
                     name='rating'
                 />
                 <Text style={{fontSize: 12, color: "#aaa"}} type="secondary"> {review.createdAt}</Text><br/>
-                    <Paragraph style={{color: "#777"}}>
-                        <Twemoji options={{className: 'twemoji'}}>
-                            {content}
-                        </Twemoji>
-                    </Paragraph>
+                <Paragraph style={{color: "#777"}}>
+                    <Twemoji options={{className: 'twemoji'}}>
+                        {content}
+                    </Twemoji>
+                </Paragraph>
             </div>
         );
 
         const title = (
             <div>
-            {review.username}
+                {review.username}
                 {isEditable && (<EditReview uuid={uuid} review={review} updateCallback={this.updateCallback}/>)}
-                {isDeletable && (<span className="delete-button">delete</span>)}
+                {isDeletable && (
+                    <Popconfirm
+                        title="Are you sure delete this review?"
+                        onConfirm={this.deleteReview}
+                        okText="Yes"
+                        cancelText="No"
+                    >
+                        <span className="delete-button">delete</span>
+                    </Popconfirm>)}
             </div>
         );