diff --git a/src/App.jsx b/src/App.jsx
index 86df210..fb4e769 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,9 @@ import Navbar from './components/Navbar';
 import Home from './pages/Home';
 import Test from './pages/Test';
 import Footer from './components/Footer';
+import ErrorPage from './pages/Error';
+import TopPicks from './pages/TopPicks';
+
 function App() {
   return (
     <div className="flex flex-col justify-start items-start min-h-screen bg-gray-100">
@@ -11,8 +14,10 @@ function App() {
 
         <Routes>
           <Route exact path="/artistry-hub/" element={<Home />} />
-          <Route exact path="/test" element={<Test />} />
+          <Route exact path="/artistry-hub/test" element={<Test />} />
+          <Route exact path="/artistry-hub/top-picks" element={<TopPicks />} />
           {/* <Route component={GenericNotFound} /> */}
+          <Route path="*" element={<ErrorPage />} />
         </Routes>
       </Router>
       <Footer />
diff --git a/src/assets/images/4errorPage/404image.png b/src/assets/images/4errorPage/404image.png
new file mode 100644
index 0000000..37cc0a2
Binary files /dev/null and b/src/assets/images/4errorPage/404image.png differ
diff --git a/src/data/list/abstracts-list.js b/src/data/list/abstracts-list.js
index 33a2386..18600c8 100644
--- a/src/data/list/abstracts-list.js
+++ b/src/data/list/abstracts-list.js
@@ -15,6 +15,7 @@ export const abstractsList = [
     dimensions: '170.2 cm x 137.2 cm',
     style: 'Abstract Expressionism',
     artistInfo: artists['Jasper Johns'] || {},
+    likes: 1,
   },
   {
     id: 1002,
@@ -28,5 +29,6 @@ export const abstractsList = [
     dimensions: '200.7 cm x 175.3 cm',
     style: 'Abstract Expressionism',
     artistInfo: artists['Willem de Kooning'] || {},
+    likes: 3,
   },
 ];
diff --git a/src/data/list/landscapes-list.js b/src/data/list/landscapes-list.js
index 54c283f..f3f39fc 100644
--- a/src/data/list/landscapes-list.js
+++ b/src/data/list/landscapes-list.js
@@ -16,6 +16,7 @@ export const landscapesList = [
     dimensions: '73.7 cm x 92.1 cm',
     style: 'Post-Impressionism',
     artistInfo: artists['Vincent Van Gogh'] || {},
+    likes: 6,
   },
   {
     id: 2002,
@@ -28,6 +29,7 @@ export const landscapesList = [
     location: 'Private Collection',
     dimensions: '69.8 cm x 119.4 cm',
     style: 'Rococo',
+    likes: 9,
   },
   {
     id: 2003,
@@ -41,5 +43,6 @@ export const landscapesList = [
       'Huntington Library, Art Museum, and Botanical Gardens, California',
     dimensions: '178 cm x 122 cm',
     style: 'Rococo',
+    likes: 5,
   },
 ];
diff --git a/src/data/list/paintings-list.js b/src/data/list/paintings-list.js
index 55a67da..bdb95a5 100644
--- a/src/data/list/paintings-list.js
+++ b/src/data/list/paintings-list.js
@@ -22,6 +22,7 @@ export const paintingsList = [
     dimensions: '73 cm x 92.5cm',
     style: 'Impressionism',
     artistInfo: artists['Claude Monet'] || {},
+    likes: 13,
   },
   {
     id: 3002,
@@ -35,6 +36,7 @@ export const paintingsList = [
     dimensions: '243.9 cm x 233.7 cm',
     style: 'Cubism',
     artistInfo: artists['Pablo Picasso'] || {},
+    likes: 19,
   },
   {
     id: 3003,
@@ -48,6 +50,7 @@ export const paintingsList = [
     dimensions: '20.1 cm x 20.1cm',
     style: 'Floral',
     artistInfo: artists['Mariam Omar'] || {},
+    likes: 8,
   },
   {
     id: 3004,
@@ -61,6 +64,7 @@ export const paintingsList = [
     dimensions: '15.1 cm x 20.1cm',
     style: 'Floral',
     artistInfo: artists['Mariam Omar'] || {},
+    likes: 11,
   },
   {
     id: 3005,
@@ -74,6 +78,7 @@ export const paintingsList = [
     dimensions: '78 cm x 78 cm',
     style: 'Symbolism, Art Nouveau',
     artistInfo: artists['Gustav Klimt'] || {},
+    likes: 18,
   },
   {
     id: 3006,
@@ -87,6 +92,7 @@ export const paintingsList = [
     dimensions: '84.1 cm x 152.4 cm',
     style: 'American Realism',
     artistInfo: artists['Edward Hopper'] || {},
+    likes: 6,
   },
   {
     id: 3007,
@@ -100,6 +106,7 @@ export const paintingsList = [
     dimensions: '71.4 cm x 91.4 cm',
     style: 'American Realism',
     artistInfo: artists['Edward Hopper'] || {},
+    likes: 2,
   },
   {
     id: 3008,
@@ -113,6 +120,7 @@ export const paintingsList = [
     dimensions: '71.4 cm x 102.2 cm',
     style: 'American Realism',
     artistInfo: artists['Edward Hopper'] || {},
+    likes: 1,
   },
   {
     id: 3009,
@@ -126,5 +134,6 @@ export const paintingsList = [
     dimensions: '365 cm x 260 cm (when opened)',
     style: 'Northern Renaissance',
     artistInfo: artists['Jan Van Eyck'] || {},
+    likes: 0,
   },
 ];
diff --git a/src/data/list/portraits-list.js b/src/data/list/portraits-list.js
index 093eb93..8df8d20 100644
--- a/src/data/list/portraits-list.js
+++ b/src/data/list/portraits-list.js
@@ -20,6 +20,7 @@ export const portraitsList = [
     dimensions: '77 cm x 53 cm',
     style: 'Renaissance',
     artistInfo: artists['Leonardo Da Vinci'] || {},
+    likes: 36,
   },
   {
     id: 4002,
@@ -33,6 +34,7 @@ export const portraitsList = [
     dimensions: '144.3 cm x 162.5 cm',
     style: 'Realism',
     artistInfo: artists['James Abbott McNeill Whistler'] || {},
+    likes: 24,
   },
   {
     id: 4003,
@@ -46,6 +48,7 @@ export const portraitsList = [
     dimensions: '44.5 cm x 39 cm',
     style: 'Baroque',
     artistInfo: artists['Johannes Vermeer'] || {},
+    likes: 19,
   },
   {
     id: 4004,
@@ -59,6 +62,7 @@ export const portraitsList = [
     dimensions: '180 cm x 180 cm',
     style: 'Symbolism, Art Nouveau',
     artistInfo: artists['Gustav Klimt'] || {},
+    likes: 2,
   },
   {
     id: 4005,
@@ -72,6 +76,7 @@ export const portraitsList = [
     dimensions: '138 cm x 138 cm',
     style: 'Symbolism, Art Nouveau',
     artistInfo: artists['Gustav Klimt'] || {},
+    likes: 13,
   },
   {
     id: 4006,
@@ -85,6 +90,7 @@ export const portraitsList = [
     dimensions: '82.2 cm x 60 cm',
     style: 'Northern Renaissance',
     artistInfo: artists['Jan Van Eyck'] || {},
+    likes: 11,
   },
   {
     id: 4007,
@@ -98,5 +104,6 @@ export const portraitsList = [
     dimensions: '98.4 cm x 74.8 cm',
     style: 'Romanticism',
     artistInfo: artists['Caspar David Friedrich'] || {},
+    likes: 10,
   },
 ];
diff --git a/src/pages/Error.jsx b/src/pages/Error.jsx
new file mode 100644
index 0000000..6311a45
--- /dev/null
+++ b/src/pages/Error.jsx
@@ -0,0 +1,28 @@
+import bobotimg from '../assets/images/4errorPage/404image.png';
+
+const ErrorPage = () => {
+  return (
+    <div className="flex flex-col justify-start items-start min-h-screen bg-gray-100 overflow-hidden p-10 ml-20">
+      <div className="flex items-center justify-between w-full p-10 ml-20">
+        <div className="p-10 ml-20">
+          <h1 className="text-4xl font-bold text-black-500 mb-10 mt-12">
+            ArtistryHub.
+          </h1>
+          <h2 className="text-3xl font-bold text-black-500 mb-5">404 Error.</h2>
+          <h2 className="text-3xl font-bold text-red-500">
+            Oops! Something went wrong.
+          </h2>
+          <p className="font-bold text-gray-400 mt-3">
+            This page does not exist.
+          </p>
+        </div>
+        <div className="text-6xl p-10 ml-20">
+          {' '}
+          <img src={bobotimg} alt="Bot Image" />{' '}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorPage;
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index dbdf7c3..015bf00 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,10 +1,5 @@
-import { useState, useEffect } from 'react';
 import { Tooltip, Image } from '@nextui-org/react';
 import { categories } from '../data/categories';
-import { landscapesList } from '../data/list/landscapes-list';
-import { paintingsList } from '../data/list/paintings-list';
-import { portraitsList } from '../data/list/portraits-list';
-import { abstractsList } from '../data/list/abstracts-list';
 import MoreArt from './MoreArt';
 
 const CategoryItem = ({ category }) => (
@@ -21,33 +16,7 @@ const CategoryItem = ({ category }) => (
   </Tooltip>
 );
 
-const shuffleArray = (array) => {
-  const shuffledArray = [...array];
-  for (let i = shuffledArray.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
-  }
-  return shuffledArray;
-};
-
 const Home = () => {
-  // State to hold the new list
-  const [newList, setNewList] = useState([]);
-
-  useEffect(() => {
-    // Combine and shuffle the lists when the component mounts
-    const combinedAndShuffledList = shuffleArray([
-      ...landscapesList,
-      ...paintingsList,
-      ...portraitsList,
-      ...abstractsList,
-    ]);
-    setNewList(combinedAndShuffledList);
-  }, []);
-
-  // Limit the number of items to show in the Top Picks section
-  const limitedTopPicksList = newList.slice(0, 7);
-
   return (
     <div className="p-6">
       <header className="text-2xl font-bold">ArtistryHub.</header>
@@ -63,30 +32,6 @@ const Home = () => {
         </div>
       </div>
 
-      <div className="mt-5">
-        <h2 className="text-2xl font-bold">Top Picks</h2>
-        <br />
-        <div className="top-picks-container flex overflow-x-auto">
-          {limitedTopPicksList.map((item) => (
-            <Tooltip
-              key={item.name}
-              content={'View ' + item.name}
-              placement="bottom"
-              showArrow
-            >
-              <div className="flex flex-col items-center mr-3">
-                <div className="w-48 h-48 rounded-lg overflow-hidden bg-white shadow-md border border-gray-300">
-                  <img
-                    src={item.img}
-                    alt={item.name}
-                    className="object-cover w-full h-full"
-                  />
-                </div>
-              </div>
-            </Tooltip>
-          ))}
-        </div>
-      </div>
       <div className="mt-5">
         <MoreArt />
       </div>
diff --git a/src/pages/TopPicks.jsx b/src/pages/TopPicks.jsx
new file mode 100644
index 0000000..d31f2f6
--- /dev/null
+++ b/src/pages/TopPicks.jsx
@@ -0,0 +1,55 @@
+import { Tooltip } from '@nextui-org/react';
+import { landscapesList } from '../data/list/landscapes-list';
+import { paintingsList } from '../data/list/paintings-list';
+import { portraitsList } from '../data/list/portraits-list';
+import { abstractsList } from '../data/list/abstracts-list';
+
+const Top = () => {
+  // Combine all lists
+  const combinedList = [
+    ...landscapesList,
+    ...paintingsList,
+    ...portraitsList,
+    ...abstractsList,
+  ];
+
+  // Sort the combined list based on the "likes" attribute in descending order
+  const sortedList = combinedList.sort((a, b) => b.likes - a.likes);
+
+  // Limit the number of items to show in the Top Picks section
+  const limitedTopPicksList = sortedList.slice(0, 18);
+
+  return (
+    <div className="p-6">
+      <header className="text-2xl font-bold">ArtistryHub.</header>
+      <p className="text-gray-700">Explore our world of creative designs.</p>
+
+      <div className="mt-5">
+        <h2 className="text-2xl font-bold">Top Picks</h2>
+        <br />
+        <div className="top-picks-container flex flex-wrap overflow-x-auto">
+          {limitedTopPicksList.map((item) => (
+            <Tooltip
+              key={item.name}
+              content={'View ' + item.name}
+              placement="bottom"
+              showArrow
+            >
+              <div className="flex flex-col items-center mr-3 mb-3">
+                <div className="w-48 h-48 rounded-lg overflow-hidden bg-white shadow-md border border-gray-300">
+                  <img
+                    src={item.img}
+                    alt={item.name}
+                    className="object-cover w-full h-full"
+                  />
+                </div>
+              </div>
+            </Tooltip>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Top;