diff --git a/parent_app/package-lock.json b/parent_app/package-lock.json
index 63d33a6..0abfdda 100644
--- a/parent_app/package-lock.json
+++ b/parent_app/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
+        "@mui/material": "^6.1.1",
         "@mui/x-charts": "^7.18.0",
         "@types/react-chartjs-2": "^2.0.2",
         "chart.js": "^4.4.4",
@@ -636,7 +637,6 @@
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.1.tgz",
       "integrity": "sha512-VdQC1tPIIcZAnf62L2M1eQif0x2vlKg3YK4kGYbtijSH4niEgI21GnstykW1vQIs+Bc6L+Hua2GATYVjilJ22A==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
@@ -647,7 +647,6 @@
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.1.tgz",
       "integrity": "sha512-b+eULldTqtqTCbN++2BtBWCir/1LwEYw+2mIlOt2GiEUh1EBBw4/wIukGKKNt3xrCZqRA80yLLkV6tF61Lq3cA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.25.6",
         "@mui/core-downloads-tracker": "^6.1.1",
@@ -696,15 +695,13 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@mui/private-theming": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.1.tgz",
       "integrity": "sha512-JlrjIdhyZUtewtdAuUsvi3ZnO0YS49IW4Mfz19ZWTlQ0sDGga6LNPVwHClWr2/zJK2we2BQx9/i8M32rgKuzrg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.25.6",
         "@mui/utils": "^6.1.1",
@@ -732,7 +729,6 @@
       "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.1.tgz",
       "integrity": "sha512-HJyIoMpFb11fnHuRtUILOXgq6vj4LhIlE8maG4SwP/W+E5sa7HFexhnB3vOMT7bKys4UKNxhobC8jwWxYilGsA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.25.6",
         "@emotion/cache": "^11.13.1",
@@ -766,7 +762,6 @@
       "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.1.tgz",
       "integrity": "sha512-PaYsCz2tUOcpu3T0okDEsSuP/yCDIj9JZ4Tox1JovRSKIjltHpXPsXZSGr3RiWdtM1MTQMFMCZzu0+CKbyy+Kw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.25.6",
         "@mui/private-theming": "^6.1.1",
@@ -821,7 +816,6 @@
       "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.1.tgz",
       "integrity": "sha512-HlRrgdJSPbYDXPpoVMWZV8AE7WcFtAk13rWNWAEVWKSanzBBkymjz3km+Th/Srowsh4pf1fTSP1B0L116wQBYw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.25.6",
         "@mui/types": "^7.2.17",
@@ -851,8 +845,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@mui/x-charts": {
       "version": "7.18.0",
@@ -1228,7 +1221,6 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -1460,7 +1452,6 @@
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
       "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -2665,7 +2656,6 @@
       "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
       "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.8.7",
         "csstype": "^3.0.2"
@@ -5505,7 +5495,6 @@
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
       "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.5.5",
         "dom-helpers": "^5.0.1",
diff --git a/parent_app/package.json b/parent_app/package.json
index 26e8444..162132b 100644
--- a/parent_app/package.json
+++ b/parent_app/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.1",
     "@mui/x-charts": "^7.18.0",
     "@types/react-chartjs-2": "^2.0.2",
     "chart.js": "^4.4.4",
diff --git a/parent_app/src/app/list/page.tsx b/parent_app/src/app/list/page.tsx
index 34cd8d2..ea70276 100644
--- a/parent_app/src/app/list/page.tsx
+++ b/parent_app/src/app/list/page.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import Card from '../../components/Card';
 import { convertISOToTime } from '@/utils/dateTimeConverter';
 import { convertISOToDate } from '@/utils/dateTimeConverter';
+import Navbar from '../../components/Navbar';
 
 
 type ImageData = {
@@ -25,6 +26,12 @@ const ImageGallery = () => {
       try {
         const response = await fetch('/api/get-images');
         const data = await response.json();
+
+        data.sort((a: ImageData, b: ImageData) => {
+          return new Date(b.submittedAt).getTime() - new Date(a.submittedAt).getTime();
+        });
+
+
         setImages(data);
       } catch (error) {
         console.error('Error fetching images:', error);
@@ -41,19 +48,11 @@ const ImageGallery = () => {
   }
 
   return (
+    <div>
     <div className='min-h-screen bg-gray-100 p-4'>
-      <h1 className="text-black">Image Gallery</h1>
+      {/* <h1 className="text-black">Image Gallery</h1> */}
+      <p className=" text-4xl font-bold text-gray-800 mb-4">Image Gallery</p>
       <ul style={{ listStyleType: 'none', padding: 0 }}>
-        {/* {images.map((image) => (
-          <li key={image._id} style={{ marginBottom: '20px' }}>
-            <img
-              src={`data:image/png;base64,${image.buffer}`}
-              alt="Submitted"
-              style={{ width: '200px', height: '200px', objectFit: 'cover' }}
-            />
-            <p>Submitted at: {new Date(image.submittedAt).toLocaleString()}</p>
-          </li> 
-        ))} */}
         {images.map((image) => (
           <Card 
             key={image._id}
@@ -66,6 +65,8 @@ const ImageGallery = () => {
         ))}
       </ul>
     </div>
+    <Navbar />
+    </div>
   );
 };
 
diff --git a/parent_app/src/app/page.tsx b/parent_app/src/app/page.tsx
index 21e389f..57e799c 100644
--- a/parent_app/src/app/page.tsx
+++ b/parent_app/src/app/page.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { format } from 'date-fns';
 import { LineChart } from '@mui/x-charts/LineChart';
 import {BarChart} from "@mui/x-charts";
+import Navbar from "../components/Navbar";
 
 
 
@@ -70,7 +71,7 @@ const HomePage = () => {
                     scaleType: 'band', // Ustawienie typu "band" dla osi X
                   },
                 ]}
-                tooltip={{trigger: 'none'}}
+                // tooltip={{trigger: 'none'}}
                 series={[
                   {
                     id: 'auto-generated-id-0', // Dodanie identyfikatora do serii danych
@@ -106,7 +107,7 @@ const HomePage = () => {
                 ]}
                 width={400} // Dostosowanie szerokości wykresu
                 height={275} // Dostosowanie wysokości wykresu
-                tooltip={{trigger: 'none'}}
+                // tooltip={{trigger: 'none'}}
             />
           </div>
         </div>
@@ -114,7 +115,7 @@ const HomePage = () => {
 
       </div >
         {/* Bottom Navigation */}
-        <div className="sticky bottom-0 left-0 right-0 bg-white py-4 flex justify-around border border-gray-400 ">
+        {/* <div className="sticky bottom-0 left-0 right-0 bg-white py-4 flex justify-around border border-gray-400 ">
           <a className="text-center text-pink-500">
             <span className="block text-[2rem]">🏠</span>
             <span className="text-xs">Home</span>
@@ -123,7 +124,8 @@ const HomePage = () => {
             <span className="block text-[2rem]">📅️</span>
             <span className="text-xs">Poop history</span>
           </a>
-        </div>
+        </div>         */}
+        <Navbar />
       </div>
 
   );
diff --git a/parent_app/src/components/Card.js b/parent_app/src/components/Card.js
index 9d7c30a..b0486a6 100644
--- a/parent_app/src/components/Card.js
+++ b/parent_app/src/components/Card.js
@@ -1,32 +1,67 @@
 import smile from '../icons/smile.svg';
 import sad from '../icons/sad.svg';
 import Image from 'next/image';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import { useState } from 'react';
+
+const Card = ({ image, weight, hour, date, face }) => {
+    const [open, setOpen] = useState(false);
+    const handleClickOpen = () => {
+      setOpen(true);
+    };
+    const handleClose = () => {
+      setOpen(false);
+    };
 
-const Card = ({ image, waga, godzina, data, face }) => {
     return ( <>
-      <div className="bg-white rounded-lg p-4 mb-4 shadow-md items-center" style={{ width: '350px', height: '150px' }}>
+      <button 
+        onClick={() => {
+            handleClickOpen();
+        }}
+        className="bg-white rounded-lg p-4 mb-4 shadow-md items-center" style={{ width: '350px', height: '150px' }}>
         <div>
-            <p className="text-black">{data}</p>
+            <p className="text-black border-b-2 text-xl text-left pl-2">{date}</p>
         </div>
         <div className="w-full h-full flex">
             {/* Left side: Image */}
-            <div className="w-1/3 h-full">
+            <div className="w-1/3 h-full m-auto">
                 {face === '1' ? (
-                <Image src={smile} alt="smile" width={100} height={100} />
+                <Image className="p-4 pb-7 m-auto items-center h-full" src={smile} alt="smile" width={80} height={80} />
                 ) : (
-                <Image src={sad} alt="sad" width={100} height={100} />
+                <Image className="p-4 pb-7 m-auto items-center h-full" src={sad} alt="sad" width={80} height={80} />
                 )}
             </div>
     
             {/* Right side: Text fields */}
             <div className="w-2/3 h-full pl-4 flex flex-col justify-center">
-            <p className="text-black">Waga: {waga} g</p>
-            <p className="text-black">Godzina: {godzina}</p>
-            console.log(`data:image/png;base64,${image.buffer}`);
-            console.log(face);
+            <p className="text-black text-xl pb-1">Waga: {weight} g</p>
+            <p className="text-black text-xl pb-2">Godzina: {hour}</p>
+            {/* console.log(`data:image/png;base64,${image.buffer}`); */}
             </div>
         </div>
-      </div>
+      </button>
+
+        {/* Dialog */}
+        <Dialog open={open} onClose={handleClose} className='rounded-3xl'>
+            <DialogTitle className='text-xl'>Poop from {date} </DialogTitle>
+            <DialogContent>
+            {/* <p>Waga: {waga} g</p>
+            <p>Godzina: {godzina}</p>
+            <p>Data: {date}</p>
+            <p>Face: {face === '1' ? '😊' : '😢'}</p> */}
+            <img src={`data:image/png;base64,${image.buffer}`} alt="image" className='rounded-lg' />
+            </DialogContent>
+            <DialogActions>
+            <Button onClick={handleClose} color="primary">
+                ❌
+            </Button>
+            </DialogActions>
+        </Dialog>
+
       </>
     );
   };
diff --git a/parent_app/src/components/Navbar.js b/parent_app/src/components/Navbar.js
new file mode 100644
index 0000000..036d6eb
--- /dev/null
+++ b/parent_app/src/components/Navbar.js
@@ -0,0 +1,22 @@
+import Link from 'next/link';
+
+const Navbar = () => {
+    return (
+        <div className="sticky bottom-0 left-0 right-0 bg-white py-4 flex justify-around border border-gray-400">
+            <Link href="/" legacyBehavior>
+                <a className="text-center text-pink-500">
+                    <span className="block text-[2rem]">🏠</span>
+                    <span className="text-xs">Home</span>
+                </a>
+            </Link>
+            <Link href="/list" legacyBehavior>
+                <a className="text-center text-pink-500">
+                    <span className="block text-[2rem]">📅️</span>
+                    <span className="text-xs">Poop history</span>
+                </a>
+            </Link>
+        </div>
+    );
+};
+
+export default Navbar;