diff --git a/src/pages/comments-card.html b/src/pages/comments-card.html
deleted file mode 100644
index 982d689..0000000
--- a/src/pages/comments-card.html
+++ /dev/null
@@ -1,300 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>Feed U - Comments Card</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="../css/base.css" />
-    <script src="../bundle.js"></script>
-    <script type="text/javascript">
-        var block_to_insert;
-        var comment_container_block;
-        // When the user clicks anywhere outside of the modal, close it
-        window.onclick = function (event) {
-            var commentCheckerPopUp = document.getElementById("comment-presence-checkup");
-            if (event.target == commentCheckerPopUp) {
-                commentCheckerPopUp.style.display = "none";
-            }
-        }
-
-        function myScript() {
-            // presence check for the reply
-            var comment = document.getElementById("comment").value;
-            var commentCheckerPopUp = document.getElementById("comment-presence-checkup");
-            if (comment == "") {
-                console.log("no comment");
-                commentCheckerPopUp.style.display = "block";
-
-            } else {
-                commentCheckerPopUp.style.display = "none";
-                block_to_insert = document.createElement('div');
-                document.getElementById("display-comment").innerHTML = comment;
-                block_to_insert.innerHTML = document.getElementById("reply-section").innerHTML;
-                comment_container_block = document.getElementById('comment-submission');
-                comment_container_block.appendChild(block_to_insert);
-                document.getElementById("comment").value = "";
-            }
-        }
-
-        function hideComments() {
-            console.log("Icon clicked");
-            comment_container_block = document.getElementById('comment-submission');
-            if (comment_container_block.style.display != "none") {
-                comment_container_block.style.display = "none";
-            } else if (comment_container_block.style.display == "none") {
-                comment_container_block.style.display = "block"
-            }
-        }
-
-        // second predefined card
-
-        var block_to_insert_2;
-        var comment_container_block_2;
-        // When the user clicks anywhere outside of the modal, close it
-        window.onclick = function (event) {
-            var commentCheckerPopUp2 = document.getElementById("comment-presence-checkup");
-            if (event.target == commentCheckerPopUp2) {
-                commentCheckerPopUp2.style.display = "none";
-            }
-        }
-
-        function myScript2() {
-            // presence check for the reply
-            var comment = document.getElementById("comment-2").value;
-            var commentCheckerPopUp2 = document.getElementById("comment-presence-checkup");
-            if (comment == "") {
-                console.log("no comment");
-                commentCheckerPopUp2.style.display = "block";
-
-            } else {
-                commentCheckerPopUp2.style.display = "none";
-                block_to_insert_2 = document.createElement('div');
-                document.getElementById("display-comment-2").innerHTML = comment;
-                block_to_insert_2.innerHTML = document.getElementById("reply-section-2").innerHTML;
-                comment_container_block_2 = document.getElementById('comment-submission-2');
-                comment_container_block_2.appendChild(block_to_insert_2);
-                document.getElementById("comment").value = "";
-            }
-        }
-
-        function hideComments2() {
-            comment_container_block_2 = document.getElementById('comment-submission-2');
-            if (comment_container_block_2.style.display != "none") {
-                comment_container_block_2.style.display = "none";
-            } else if (comment_container_block_2.style.display == "none") {
-                comment_container_block_2.style.display = "block"
-            }
-            comment_container_block = document.getElementById('comment-submission');
-            if (comment_container_block.style.display != "none") {
-                comment_container_block.style.display = "none";
-            } else if (comment_container_block.style.display == "none") {
-                comment_container_block.style.display = "block"
-            }
-        }
-
-        function hey(){
-            console.log("what up baby");
-        }
-    </script>
-</head>
-
-<body>
-
-
-    <style>
-        .card {
-            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-            transition: 0.3s;
-            width: 100%;
-        }
-
-        .card:hover {
-            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-        }
-
-        .container {
-            padding: 2px 16px;
-        }
-
-        /* The Modal (background) */
-        .modal {
-            display: none;
-            /* Hidden by default */
-            position: fixed;
-            /* Stay in place */
-            z-index: 1;
-            /* Sit on top */
-            padding-top: 100px;
-            /* Location of the box */
-            left: 0;
-            top: 0;
-            width: 100%;
-            /* Full width */
-            height: 100%;
-            /* Full height */
-            overflow: auto;
-            /* Enable scroll if needed */
-            background-color: rgb(0, 0, 0);
-            /* Fallback color */
-            background-color: rgba(0, 0, 0, 0.4);
-            /* Black w/ opacity */
-        }
-
-        /* Modal Content */
-        .modal-content {
-            background-color: #fefefe;
-            margin: auto;
-            padding: 20px;
-            border: 1px solid #888;
-            width: 80%;
-        }
-
-        .avatar {
-            vertical-align: middle;
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-        }
-
-        .comment-header-position {
-            margin-top: 16px;
-            margin-left: 5px;
-        }
-    </style>
-
-
-    <div class="card ui-block-solo">
-        <div style="background-color: #F2F2F2;">
-            <div style="display: flex;">
-                <img src="../assets/images//profile_photos/deshan-dp.jpg" class="avatar" alt="Profile photo">
-                <span style="font-weight: bold;" class="comment-header-position">Deshan Koswatte </span>
-                <span style="font-weight: lighter; color: darkgrey;" class="comment-header-position">1 month ago</span>
-                <div style="display: flex;
-                justify-content: center;
-                align-items: center;
-                height: 20px;
-                width: 50px;
-                font-size: 11px;
-                background: #FFD77C;
-                border-radius: 25px;" class="comment-header-position">
-                    <span style="font-size: 12px;">4.5<i class='fa fa-star fa-fw'
-                            style="margin-left: 0.25em; color: #ffffff;"></i></span>
-                </div>
-
-                <div class="ui-btn-right" onclick="hideComments()">
-                    <span><a href="#" class="ui-btn ui-icon-carat-u ui-btn-icon-notext ui-corner-all"
-                            style="background-color: white;">No text</a> </span>
-                </div>
-            </div>
-            <div class="container">
-                <p>This soup is absolutely... disappointing. “World-renowned Chef Gonagala Ramsey” - pfffttt. My dog can
-                    cook better.</p>
-                <a href="#report-comment-popup" data-rel="popup" data-transition="flow"
-                    style="text-decoration: underline; color: #EB5757;">Report Comment</a>
-            </div>
-        </div>
-
-        <div class="container" id="comment-submission">
-            <textarea
-                style="display:block; height: 33px; padding-left: 25px; width: -webkit-fill-available; background-color: #F2F2F2; border-radius: 50px; box-shadow: none;"
-                placeholder="Type your reply here" id="comment"></textarea>
-            <div style="text-align: center;">
-                <button onclick="myScript()"
-                    style="width: auto; height: auto; margin-inline-start: auto;">Submit</button>
-            </div>
-
-        </div>
-        <!-- Comments section -->
-        <div id="reply-section" style="display: none;" class="collapsible">
-            <img src="../assets/images//profile_photos/thenuka-dp.jpg" class="avatar" width="100%" alt="Profile photo">
-            <span style="font-weight: bold;">Cheif Gonagala</span>
-            <span style="font-weight: lighter; color: darkgrey;">1 month ago</span>
-
-
-            <div class="container" style="margin-bottom: 5px;">
-                <p id="display-comment">Teeheehee. *wink wink*</p>
-                <a href="#report-comment-popup" data-rel="popup" data-transition="flow"
-                    style="text-decoration: underline; color: #EB5757;">Report Comment</a>
-                <br>
-            </div>
-        </div>
-
-    </div>
-
-    <span><br><br></span>
-
-    <!-- second comment card -->
-
-    <div class="card ui-block-solo">
-        <div style="background-color: #F2F2F2;">
-            <div style="display: flex;">
-                <img src="../assets/images//profile_photos/vinula.jpg" class="avatar" alt="Profile photo">
-                <span style="font-weight: bold;" class="comment-header-position">Vinula Uthsara </span>
-                <span style="font-weight: lighter; color: darkgrey;" class="comment-header-position">1 month ago</span>
-                <div style="display: flex;
-                justify-content: center;
-                align-items: center;
-                height: 20px;
-                width: 50px;
-                font-size: 11px;
-                background: #FFD77C;
-                border-radius: 25px;" class="comment-header-position">
-                    <span style="font-size: 12px;">4.5<i class='fa fa-star fa-fw'
-                            style="margin-left: 0.25em; color: #ffffff;"></i></span>
-                </div>
-
-                <div class="ui-btn-right" onclick="hideComments2()">
-                    <span><a href="#" class="ui-btn ui-icon-carat-u ui-btn-icon-notext ui-corner-all"
-                            style="background-color: white;">No text</a> </span>
-                </div>
-            </div>
-            <div class="container">
-                <p>This soup is absolutely... disappointing. “World-renowned Chef Gonagala Ramsey” - pfffttt. My dog can
-                    cook better.</p>
-                <a href="#report-comment-popup" data-rel="popup" data-transition="flow"
-                    style="text-decoration: underline; color: #EB5757;">Report Comment</a>
-            </div>
-        </div>
-
-        <div class="container" id="comment-submission-2">
-            <textarea
-                style="display:block; height: 33px; padding-left: 25px; width: -webkit-fill-available; background-color: #F2F2F2; border-radius: 50px; box-shadow: none;"
-                placeholder="Type your reply here" id="comment-2"></textarea>
-            <div style="text-align: center;">
-                <button onclick="myScript2()"
-                    style="width: auto; height: auto; margin-inline-start: auto;">Submit</button>
-            </div>
-
-        </div>
-         <!-- Comments section -->
-        <div id="reply-section-2" style="display: none;" class="collapsible">
-            <img src="../assets/images//profile_photos/thenuka-dp.jpg" class="avatar" width="100%" alt="Profile photo">
-            <span style="font-weight: bold;">Cheif Gonagala</span>
-            <span style="font-weight: lighter; color: darkgrey;">1 month ago</span>
-
-
-            <div class="container">
-                <p id="display-comment-2">Teeheehee. *wink wink*</p>
-                <a href="#report-comment-popup" data-rel="popup" data-transition="flow"
-                    style="text-decoration: underline; color: #EB5757;">Report Comment</a>
-                <br>
-            </div>
-        </div>
-
-    </div> 
-
-</body>
-
-<div data-role="popup" id="report-comment-popup" data-overlay-theme="a">
-    <p>Comment has been reported successfully.
-    </p>
-</div>
-
-<div class="modal" style="display: none;" id="comment-presence-checkup">
-    <div class="modal-content">
-        <p>Please type a comment before submitting.
-        </p>
-    </div>
-</div>
-
-</html>
\ No newline at end of file
diff --git a/src/pages/comments_list.html b/src/pages/comments_list.html
new file mode 100644
index 0000000..be1547c
--- /dev/null
+++ b/src/pages/comments_list.html
@@ -0,0 +1,338 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Feed U - Comments Card</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../css/base.css" />
+    <script src="../bundle.js"></script>
+    <script type="text/javascript">
+        var block_to_insert;
+        var comment_container_block;
+        // When the user clicks anywhere outside of the modal, close it
+        window.onclick = function (event) {
+            var commentCheckerPopUp = document.getElementById("comment-presence-checkup");
+            if (event.target == commentCheckerPopUp) {
+                commentCheckerPopUp.style.display = "none";
+            }
+        }
+
+        function myScript() {
+            // presence check for the reply
+            var comment = document.getElementById("comment").value;
+            var commentCheckerPopUp = document.getElementById("comment-presence-checkup");
+            if (comment == "") {
+                console.log("no comment");
+                // commentCheckerPopUp.style.display = "block";
+                document.getElementById("comment").value = "PLEASE ENTER A COMMENT FIRST";
+
+            } else {
+                commentCheckerPopUp.style.display = "none";
+                block_to_insert = document.createElement('div');
+                document.getElementById("display-comment").innerHTML = comment;
+                block_to_insert.innerHTML = document.getElementById("reply-section").innerHTML;
+                comment_container_block = document.getElementById('comment-submission');
+                comment_container_block.appendChild(block_to_insert);
+                document.getElementById("comment").value = "";
+            }
+        }
+
+        function hideComments() {
+            console.log("Icon clicked");
+            comment_container_block = document.getElementById('comment-submission');
+            if (comment_container_block.style.display != "none") {
+                comment_container_block.style.display = "none";
+            } else if (comment_container_block.style.display == "none") {
+                comment_container_block.style.display = "block"
+            }
+        }
+
+        // second predefined card
+
+        var block_to_insert_2;
+        var comment_container_block_2;
+        // When the user clicks anywhere outside of the modal, close it
+        window.onclick = function (event) {
+            var commentCheckerPopUp2 = document.getElementById("comment-presence-checkup");
+            if (event.target == commentCheckerPopUp2) {
+                commentCheckerPopUp2.style.display = "none";
+            }
+        }
+
+        function myScript2() {
+            // presence check for the reply
+            var comment = document.getElementById("comment-2").value;
+            var commentCheckerPopUp2 = document.getElementById("comment-presence-checkup");
+            if (comment == "") {
+                console.log("no comment");
+                document.getElementById("comment-2").value = "PLEASE ENTER A COMMENT FIRST";
+                // commentCheckerPopUp2.style.display = "block";
+
+
+            } else {
+                commentCheckerPopUp2.style.display = "none";
+                block_to_insert_2 = document.createElement('div');
+                document.getElementById("display-comment-2").innerHTML = comment;
+                block_to_insert_2.innerHTML = document.getElementById("reply-section-2").innerHTML;
+                comment_container_block_2 = document.getElementById('comment-submission-2');
+                comment_container_block_2.appendChild(block_to_insert_2);
+                document.getElementById("comment-2").value = "";
+            }
+        }
+
+        function hideComments2() {
+            comment_container_block_2 = document.getElementById('comment-submission-2');
+            if (comment_container_block_2.style.display != "none") {
+                comment_container_block_2.style.display = "none";
+            } else if (comment_container_block_2.style.display == "none") {
+                comment_container_block_2.style.display = "block"
+            }
+        }
+        //     comment_container_block = document.getElementById('comment-submission');
+        //     if (comment_container_block.style.display != "none") {
+        //         comment_container_block.style.display = "none";
+        //     } else if (comment_container_block.style.display == "none") {
+        //         comment_container_block.style.display = "block"
+        //     }
+        // }
+
+        function hey() {
+            console.log("what up baby");
+        }
+    </script>
+</head>
+
+<body>
+
+    <div data-role="page" id="comments-list-page" class="feedU-page ui-responsive-panel">
+
+        <style>
+            #comments-list-page .card {
+                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+                transition: 0.3s;
+                width: 100%;
+            }
+
+            #comments-list-page .card:hover {
+                box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+            }
+
+            /* .container {
+                padding: 2px 16px;
+            } */
+
+            /* The Modal (background) */
+            #comments-list-page .modal {
+                display: none;
+                /* Hidden by default */
+                position: fixed;
+                /* Stay in place */
+                z-index: 1;
+                /* Sit on top */
+                padding-top: 100px;
+                /* Location of the box */
+                left: 0;
+                top: 0;
+                width: 100%;
+                /* Full width */
+                height: 100%;
+                /* Full height */
+                overflow: auto;
+                /* Enable scroll if needed */
+                background-color: rgb(0, 0, 0);
+                /* Fallback color */
+                background-color: rgba(0, 0, 0, 0.4);
+                /* Black w/ opacity */
+            }
+
+            /* Modal Content */
+            #comments-list-page .modal-content {
+                background-color: #fefefe;
+                margin: auto;
+                padding: 20px;
+                border: 1px solid #888;
+                width: 100%;
+            }
+
+            #comments-list-page .avatar {
+                vertical-align: middle;
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+            }
+
+            #comments-list-page .comment-header-position {
+                margin-top: 16px;
+                margin-left: 5px;
+            }
+
+            #comments-list-page .card>div {
+                padding: 15px 15px;
+            }
+
+            #comments-list-page .hide-comments-btn {
+                display: flex;
+                margin-left: auto;
+            }
+        </style>
+
+        <div data-role="header" id="checkout-header" data-position="fixed" data-tap-toggle="false">
+            <a class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-corner-all" href="#" data-rel="back"
+                data-icon="arrow-l" data-theme="c" data-role="button">Back</a>
+            <span class="ui-title"></span>
+            <img src="../assets/logo.png"></img>
+        </div>
+
+        <div role="main" class="ui-content">
+            <h1>Comments</h1>
+
+            <div class="card ui-block-solo">
+                <div style="background-color: #F2F2F2;">
+                    <div style="display: flex;">
+                        <img src="../assets/images//profile_photos/deshan-dp.jpg" class="avatar" alt="Profile photo">
+                        <span style="font-weight: bold;" class="comment-header-position">Deshan Koswatte </span>
+                        <span style="font-weight: 400; color: darkgrey;" class="comment-header-position">1 month
+                            ago</span>
+                        <div style="display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 20px;
+                width: 50px;
+                font-size: 11px;
+                background: #FFD77C;
+                border-radius: 25px;" class="comment-header-position">
+                            <span style="font-size: 12px;">4.5<i class='fa fa-star fa-fw'
+                                    style="margin-left: 0.25em; color: #ffffff;"></i></span>
+                        </div>
+
+                        <!-- <div class="ui-btn-right" onclick="hideComments()">
+                        <span><a href="#" class="ui-btn ui-icon-carat-u ui-btn-icon-notext ui-corner-all"
+                                style="background-color: white;">No text</a> </span>
+                    </div> -->
+                        <!-- <div class="container>"> -->
+                        <!-- <div class="row"> </div> -->
+                        <a onclick="hideComments()"
+                            class="hide-comments-btn ui-btn ui-shadow ui-corner-all ui-icon-carat-u ui-btn-icon-notext">collapsible</a>
+                        <!-- </div> -->
+                    </div>
+                    <div class="container">
+                        <p>This soup is absolutely... disappointing. “World-renowned Chef Gonagala Ramsey” - pfffttt. My
+                            dog
+                            can
+                            cook better.</p>
+                        <a href="#report-comment-popup" data-rel="popup" data-transition="flow"
+                            style="text-decoration: underline; color: #EB5757;">Report Comment</a>
+                    </div>
+                </div>
+
+                <div class="container" id="comment-submission">
+                    <textarea
+                        style="display:block; height: 33px; padding-left: 25px; padding-top: 13px; width: -webkit-fill-available; background-color: #F2F2F2; border-radius: 50px; box-shadow: none;"
+                        placeholder="Type your reply here" id="comment"
+                        onfocus="if(this.value == 'PLEASE ENTER A COMMENT FIRST') { this.value = ''; }"></textarea>
+                    <div style="text-align: center;">
+                        <button onclick="myScript()"
+                            style="width: auto; height: auto; margin-inline-start: auto;background-color: #EB5757; color: white;">Submit</button>
+                    </div>
+
+                </div>
+                <!-- Comments section -->
+                <div id="reply-section" style="display: none;" class="collapsible">
+                    <img src="../assets/images//profile_photos/thenuka-dp.jpg" class="avatar" width="100%"
+                        alt="Profile photo">
+                    <span style="font-weight: bold;">Chef Gonagala</span>
+                    <span style="font-weight: 400; color: darkgrey;">1 month ago</span>
+
+
+                    <div class="container" style="margin-bottom: 5px;">
+                        <p id="display-comment">Teeheehee. *wink wink*</p>
+                        <a href="#report-comment-popup" data-rel="popup" data-transition="flow"
+                            style="text-decoration: underline; color: #EB5757;">Report Comment</a>
+                        <br>
+                    </div>
+                </div>
+
+            </div>
+
+            <span><br><br></span>
+
+            <!-- second comment card -->
+
+            <div class="card ui-block-solo">
+                <div style="background-color: #F2F2F2;">
+                    <div style="display: flex;">
+                        <img src="../assets/images//profile_photos/vinula.jpg" class="avatar" alt="Profile photo">
+                        <span style="font-weight: bold;" class="comment-header-position">Vinula Uthsara </span>
+                        <span style="font-weight: 400; color: darkgrey;" class="comment-header-position">1 month
+                            ago</span>
+                        <div style="display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 20px;
+                width: 50px;
+                font-size: 11px;
+                background: #FFD77C;
+                border-radius: 25px;" class="comment-header-position">
+                            <span style="font-size: 12px;">3.0<i class='fa fa-star fa-fw'
+                                    style="margin-left: 0.25em; color: #ffffff;"></i></span>
+                        </div>
+
+                        <!-- <div class="container>"> -->
+                        <!-- <div class="row"> </div> -->
+                        <a onclick="hideComments2()"
+                            class="hide-comments-btn ui-btn ui-shadow ui-corner-all ui-icon-carat-u ui-btn-icon-notext">collapsible</a>
+                        <!-- </div> -->
+                    </div>
+                    <div class="container">
+                        <p>This item took me back to my childhood.</p>
+                        <a href="#report-comment-popup" data-rel="popup" data-transition="flow"
+                            style="text-decoration: underline; color: #EB5757;">Report Comment</a>
+                    </div>
+                </div>
+
+                <div class="container" id="comment-submission-2">
+                    <textarea
+                        style="display:block; height: 33px; padding-left: 25px; padding-top: 13px; width: -webkit-fill-available; background-color: #F2F2F2; border-radius: 50px; box-shadow: none;"
+                        placeholder="Type your reply here" id="comment-2"
+                        onfocus="if(this.value == 'PLEASE ENTER A COMMENT FIRST') { this.value = ''; }"></textarea>
+                    <div style="text-align: center;">
+                        <button onclick="myScript2()"
+                            style="width: auto; height: auto; margin-inline-start: auto; background-color: #EB5757; color: white;">Submit</button>
+                    </div>
+
+                </div>
+                <!-- Comments section -->
+                <div id="reply-section-2" style="display: none;" class="collapsible">
+                    <img src="../assets/images//profile_photos/thenuka-dp.jpg" class="avatar" width="100%"
+                        alt="Profile photo">
+                    <span style="font-weight: bold;">Cheif Gonagala</span>
+                    <span style="font-weight: 400; color: darkgrey;">1 month ago</span>
+
+
+                    <div class="container">
+                        <p id="display-comment-2">Teeheehee. *wink wink*</p>
+                        <a href="#report-comment-popup" data-rel="popup" data-transition="flow"
+                            style="text-decoration: underline; color: #EB5757;">Report Comment</a>
+                        <br>
+                    </div>
+                </div>
+
+            </div>
+
+            <div data-role="popup" id="report-comment-popup" data-overlay-theme="a">
+                <p>Comment has been reported successfully.
+                </p>
+            </div>
+
+            <div class="modal" style="display: none;" id="comment-presence-checkup">
+                <div class="modal-content">
+                    <p>Please type a comment before submitting.
+                    </p>
+                </div>
+            </div>
+
+        </div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/pages/item_detail.html b/src/pages/item_detail.html
index aea3819..61678f7 100644
--- a/src/pages/item_detail.html
+++ b/src/pages/item_detail.html
@@ -184,22 +184,18 @@
             }
 
             /* comments style */
-            .card {
+            #item-detail-page .card {
                 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
                 transition: 0.3s;
                 width: 100%;
             }
 
-            .card:hover {
+            #item-detail-page .card:hover {
                 box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
             }
 
-            .container {
-                padding: 2px 16px;
-            }
-
             /* The Modal (background) */
-            .modal {
+            #item-detail-page .modal {
                 display: none;
                 /* Hidden by default */
                 position: fixed;
@@ -223,7 +219,7 @@
             }
 
             /* Modal Content */
-            .modal-content {
+            #item-detail-page .modal-content {
                 background-color: #fefefe;
                 margin: auto;
                 padding: 20px;
@@ -231,17 +227,26 @@
                 width: 100%;
             }
 
-            .avatar {
+            #item-detail-page .avatar {
                 vertical-align: middle;
                 width: 50px;
                 height: 50px;
                 border-radius: 50%;
             }
 
-            .comment-header-position {
+            #item-detail-page .comment-header-position {
                 margin-top: 16px;
                 margin-left: 5px;
             }
+
+            #item-detail-page .card>div {
+                padding: 15px 15px;
+            }
+
+            #item-detail-page .hide-comments-btn {
+                display: flex;
+                margin-left: auto;
+            }
         </style>
         <div data-role="header" data-tap-toggle="false" data-position="fixed">
             <span class="ui-title"></span>
@@ -362,11 +367,11 @@ <h1 style="margin: 5px 0px; margin-bottom: 15px;">Comments</h1>
                                     style="margin-left: 0.25em; color: #ffffff;"></i></span>
                         </div>
 
-                        <div class="container>">
-                            <div class="row"> </div>
-                            <a onclick="hideComments()"
-                                class="ui-btn ui-shadow ui-corner-all ui-icon-carat-u ui-btn-icon-notext">collapsible</a>
-                        </div>
+                        <!-- <div class="container>"> -->
+                        <!-- <div class="row"> </div> -->
+                        <a onclick="hideComments()"
+                            class="hide-comments-btn ui-btn ui-shadow ui-corner-all ui-icon-carat-u ui-btn-icon-notext">collapsible</a>
+                        <!-- </div> -->
 
                     </div>
                     <div class="container">
@@ -384,7 +389,7 @@ <h1 style="margin: 5px 0px; margin-bottom: 15px;">Comments</h1>
 
                 <div class="container" id="comment-submission">
                     <textarea
-                        style="display:block; height: 33px; padding-left: 25px; width: -webkit-fill-available; background-color: #F2F2F2; border-radius: 50px; box-shadow: none;"
+                        style="display:block; height: 33px; padding-left: 25px; padding-top: 13px; width: -webkit-fill-available; background-color: #F2F2F2; border-radius: 50px; box-shadow: none;"
                         placeholder="Type your reply here" id="comment"
                         onfocus="if(this.value == 'PLEASE ENTER A COMMENT FIRST') { this.value = ''; }"></textarea>
                     <div style="text-align: center;">
diff --git a/src/pages/vendor_page.html b/src/pages/vendor_page.html
index 3ad1b5a..2c26b5e 100644
--- a/src/pages/vendor_page.html
+++ b/src/pages/vendor_page.html
@@ -210,7 +210,7 @@
                     <span id="vendor-page-vendor-rating-value">0.0</span>
                     <small id="vendor-page-vendor-no-of-ratings">(0)</small>
                 </div>
-                <a id="vendor-page-vendor-comments">View Comments</a>
+                <a id="vendor-page-vendor-comments" href="comments_list.html">View Comments</a>
                 </p>
             </div>
             <!-- Gamification process section  -->
