diff --git a/src/app/pages/pagesAndPosts/ProductsPages.js b/src/app/pages/pages-and-posts/ProductsPages.js
similarity index 95%
rename from src/app/pages/pagesAndPosts/ProductsPages.js
rename to src/app/pages/pages-and-posts/ProductsPages.js
index d04eea7fa..fd3dc49dd 100644
--- a/src/app/pages/pagesAndPosts/ProductsPages.js
+++ b/src/app/pages/pages-and-posts/ProductsPages.js
@@ -3,7 +3,7 @@ import { Button, Card, Title } from '@newfold/ui-component-library';
 const ProductsPages = () => {
 	return (
 		<Card
-			className="hover:nfd-bg-[#FEFCEA] wppbh-app-products"
+			className="wppbh-app-products nfd-border-0 md:nfd-border-r nfd-shadow-none hover:nfd-bg-[#FEFCEA]"
 			style={ {
 				borderRadius: 0,
 			} }
diff --git a/src/app/pages/pagesAndPosts/blogPosts.js b/src/app/pages/pages-and-posts/blogPosts.js
similarity index 93%
rename from src/app/pages/pagesAndPosts/blogPosts.js
rename to src/app/pages/pages-and-posts/blogPosts.js
index cd5ef59c7..fe0920101 100644
--- a/src/app/pages/pagesAndPosts/blogPosts.js
+++ b/src/app/pages/pages-and-posts/blogPosts.js
@@ -3,7 +3,7 @@ import { Button, Card, Title } from '@newfold/ui-component-library';
 const BlogPosts = () => {
 	return (
 		<Card
-			className="hover:nfd-bg-[#F9F5FE] wppbh-app-blog-posts"
+			className="wppbh-app-blog-posts nfd-border-0 nfd-border-b nfd-shadow-none hover:nfd-bg-[#F9F5FE]"
 			style={ {
 				borderRadius: 0,
 			} }
diff --git a/src/app/pages/pagesAndPosts/bookingAndAppointments.js b/src/app/pages/pages-and-posts/bookingAndAppointments.js
similarity index 94%
rename from src/app/pages/pagesAndPosts/bookingAndAppointments.js
rename to src/app/pages/pages-and-posts/bookingAndAppointments.js
index cfac5d7b4..fcf6484e1 100644
--- a/src/app/pages/pagesAndPosts/bookingAndAppointments.js
+++ b/src/app/pages/pages-and-posts/bookingAndAppointments.js
@@ -3,7 +3,7 @@ import { Button, Card, Title } from '@newfold/ui-component-library';
 const BookingAndAppointments = () => {
 	return (
 		<Card
-			className="hover:nfd-bg-[#F2F9FE] wppbh-app-bookings"
+			className="wppbh-app-bookings nfd-border-0 nfd-border-t md:nfd-border-t-0 nfd-shadow-none hover:nfd-bg-[#F2F9FE]"
 			style={ {
 				borderRadius: 0,
 			} }
diff --git a/src/app/pages/pagesAndPosts/index.js b/src/app/pages/pages-and-posts/index.js
similarity index 95%
rename from src/app/pages/pagesAndPosts/index.js
rename to src/app/pages/pages-and-posts/index.js
index e32466da2..ea359e715 100644
--- a/src/app/pages/pagesAndPosts/index.js
+++ b/src/app/pages/pages-and-posts/index.js
@@ -9,12 +9,13 @@ import AppStore from '../../data/store';
 
 const PagesAndPosts = () => {
 	const { store } = useContext( AppStore );
+
 	return (
 		<Page
 			title="Pages & Posts"
 			className={ 'wppbh-app-pagesAndPosts-page' }
 		>
-			<Container>
+			<Container className="nfd-overflow-hidden">
 				<Container.Header
 					title={ __( 'Pages & Posts', 'wp-plugin-bluehost' ) }
 					description={
@@ -23,7 +24,7 @@ const PagesAndPosts = () => {
 								variant="warning"
 								className="nfd-text-sm nfd-bg-transparent nfd-p-0 "
 							>
-								<span className="nfd-text-red-700">
+								<span className="nfd-font-semibold nfd-text-red-700">
 									{ __(
 										'Your site is not live.',
 										'wp-plugin-bluehost'
@@ -73,13 +74,13 @@ const PagesAndPosts = () => {
 				<div className="nfd-grid md:nfd-grid-cols-2 nfd-gap-0 sm:nfd-grid-cols-1">
 					<SitePages />
 					<BlogPosts />
+					{ window.NewfoldRuntime.isWoocommerceActive && (
+						<ProductsPages />
+					) }
 					{ window.NewfoldRuntime.isYithBookingActive &&
 						window.NewfoldRuntime.isWoocommerceActive && (
 							<BookingAndAppointments />
 						) }
-					{ window.NewfoldRuntime.isWoocommerceActive && (
-						<ProductsPages />
-					) }
 				</div>
 			</Container>
 		</Page>
diff --git a/src/app/pages/pagesAndPosts/sitePages.js b/src/app/pages/pages-and-posts/sitePages.js
similarity index 93%
rename from src/app/pages/pagesAndPosts/sitePages.js
rename to src/app/pages/pages-and-posts/sitePages.js
index 2141af4dc..b2cbe38e1 100644
--- a/src/app/pages/pagesAndPosts/sitePages.js
+++ b/src/app/pages/pages-and-posts/sitePages.js
@@ -3,7 +3,7 @@ import { Button, Card, Title } from '@newfold/ui-component-library';
 const SitePages = () => {
 	return (
 		<Card
-			className="hover:nfd-bg-[#F2FDFA] wppbh-app-site-page"
+			className="wppbh-app-site-page nfd-border-0 nfd-border-r-0 md:nfd-border-r nfd-border-b nfd-shadow-none hover:nfd-bg-[#F2FDFA]"
 			style={ {
 				borderRadius: 0,
 			} }