diff --git a/apps/app/components/pages/single-page-list-item.tsx b/apps/app/components/pages/single-page-list-item.tsx
index bdb7d4bb9..bb9589502 100644
--- a/apps/app/components/pages/single-page-list-item.tsx
+++ b/apps/app/components/pages/single-page-list-item.tsx
@@ -69,7 +69,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
     <li>
       <Link href={`/${workspaceSlug}/projects/${projectId}/pages/${page.id}`}>
         <a>
-          <div className="relative rounded p-4 text-brand-secondary hover:bg-brand-base">
+          <div className="relative rounded p-4 text-brand-secondary hover:bg-brand-surface-2">
             <div className="flex items-center justify-between">
               <div className="flex flex-wrap items-center gap-2">
                 <DocumentTextIcon className="h-4 w-4" />
diff --git a/apps/app/components/views/single-view-item.tsx b/apps/app/components/views/single-view-item.tsx
index 0bb913222..5e5ff3cc0 100644
--- a/apps/app/components/views/single-view-item.tsx
+++ b/apps/app/components/views/single-view-item.tsx
@@ -83,18 +83,18 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
   };
 
   return (
-    <li>
+    <div className="first:rounded-t-[10px] last:rounded-b-[10px] hover:bg-brand-surface-2">
       <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
         <a>
-          <div className="relative rounded p-4 hover:bg-gray-100">
+          <div className="relative rounded p-4">
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <StackedLayersIcon height={18} width={18} />
-                <p className="mr-2 truncate text-sm font-medium">{truncateText(view.name, 75)}</p>
+                <p className="mr-2 truncate text-sm">{truncateText(view.name, 75)}</p>
               </div>
               <div className="ml-2 flex flex-shrink-0">
                 <div className="flex items-center gap-2">
-                  <p className="text-xs bg-gray-300 text-gray-600 py-0.5 px-2 rounded-full">
+                  <p className="rounded-full bg-brand-surface-2 py-0.5 px-2 text-xs text-brand-secondary">
                     {Object.keys(view.query_data)
                       .map((key: string) =>
                         view.query_data[key as keyof typeof view.query_data] !== null
@@ -109,7 +109,9 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
                       view.updated_at
                     )} ${renderShortDate(view.updated_at)}`}
                   >
-                    <p className="text-sm text-gray-400">{renderShortTime(view.updated_at)}</p>
+                    <p className="text-sm text-brand-secondary">
+                      {renderShortTime(view.updated_at)}
+                    </p>
                   </Tooltip>
                   {view.is_favorite ? (
                     <button
@@ -164,13 +166,13 @@ export const SingleViewItem: React.FC<Props> = ({ view, handleEditView, handleDe
               </div>
             </div>
             {view?.description && (
-              <p className="text-sm text-gray-400 font-normal leading-5 px-[27px]">
+              <p className="px-[27px] text-sm font-normal leading-5 text-brand-secondary">
                 {view.description}
               </p>
             )}
           </div>
         </a>
       </Link>
-    </li>
+    </div>
   );
 };
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index e6a7eb10a..06599742b 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -99,7 +99,7 @@ const ProjectViews: NextPage = () => {
         views.length > 0 ? (
           <div className="space-y-5">
             <h3 className="text-3xl font-semibold text-brand-base">Views</h3>
-            <div className="rounded-[10px] border border-brand-base">
+            <div className="divide-y divide-brand-base rounded-[10px] border border-brand-base">
               {views.map((view) => (
                 <SingleViewItem
                   key={view.id}