diff --git a/apps/app/components/pages/single-page-detailed-item.tsx b/apps/app/components/pages/single-page-detailed-item.tsx
index 0c47e43174..c7ebec25d1 100644
--- a/apps/app/components/pages/single-page-detailed-item.tsx
+++ b/apps/app/components/pages/single-page-detailed-item.tsx
@@ -49,10 +49,10 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
   return (
     <div className="relative">
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
-        <a className="block py-4 px-6">
+        <a className="block p-4">
           <div className="flex items-center justify-between gap-2">
             <div className="flex items-center gap-2">
-              <p className="mr-2 truncate text-xl font-semibold">{truncateText(page.name, 75)}</p>
+              <p className="mr-2 truncate font-medium">{truncateText(page.name, 75)}</p>
               {page.label_details.length > 0 &&
                 page.label_details.map((label) => (
                   <div
diff --git a/apps/app/components/pages/single-page-list-item.tsx b/apps/app/components/pages/single-page-list-item.tsx
index 99987ece65..55baea26f7 100644
--- a/apps/app/components/pages/single-page-list-item.tsx
+++ b/apps/app/components/pages/single-page-list-item.tsx
@@ -1,7 +1,5 @@
 import React from "react";
 
-import useSWR from "swr";
-
 import Link from "next/link";
 import { useRouter } from "next/router";
 
@@ -11,13 +9,14 @@ import useUser from "hooks/use-user";
 import { CustomMenu, Tooltip } from "components/ui";
 // icons
 import {
+  DocumentTextIcon,
   LockClosedIcon,
   LockOpenIcon,
   PencilIcon,
   StarIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-import { ExclamationIcon, PencilScribbleIcon } from "components/icons";
+import { ExclamationIcon } from "components/icons";
 // helpers
 import { truncateText } from "helpers/string.helper";
 import { renderLongDateFormat, renderShortDate, renderShortTime } from "helpers/date-time.helper";
@@ -54,9 +53,9 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
         <a>
           <div className="relative rounded p-4 hover:bg-gray-200">
             <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2 flex-wrap">
-                <PencilScribbleIcon className="h-4 w-4" />
-                <p className="mr-2 truncate text-base text-gray-800 font-medium">
+              <div className="flex flex-wrap items-center gap-2">
+                <DocumentTextIcon className="h-4 w-4" />
+                <p className="mr-2 truncate text-base font-medium text-gray-800">
                   {truncateText(page.name, 75)}
                 </p>
                 {page.label_details.length > 0 &&