diff --git a/package-lock.json b/package-lock.json
index 5eec38e..88610a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@types/firebase": "^3.2.1",
         "@types/next-auth": "^3.15.0",
+        "axios": "^1.6.7",
         "firebase": "^10.8.0",
         "gray-matter": "^4.0.3",
         "next": "14.1.0",
@@ -1632,6 +1633,11 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.17",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz",
@@ -1690,6 +1696,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -2014,6 +2030,17 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -2166,6 +2193,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -3107,6 +3142,25 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -3132,6 +3186,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -5364,6 +5431,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -6205,6 +6291,11 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/package.json b/package.json
index 02ba3d4..a13363c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@types/firebase": "^3.2.1",
     "@types/next-auth": "^3.15.0",
+    "axios": "^1.6.7",
     "firebase": "^10.8.0",
     "gray-matter": "^4.0.3",
     "next": "14.1.0",
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/home-1.jpg b/public/home-1.jpg
new file mode 100644
index 0000000..654a3b8
Binary files /dev/null and b/public/home-1.jpg differ
diff --git a/public/home-2.jpg b/public/home-2.jpg
new file mode 100644
index 0000000..2302377
Binary files /dev/null and b/public/home-2.jpg differ
diff --git a/public/home-3.jpg b/public/home-3.jpg
new file mode 100644
index 0000000..b2a2104
Binary files /dev/null and b/public/home-3.jpg differ
diff --git a/public/home-4.jpg b/public/home-4.jpg
new file mode 100644
index 0000000..94285cd
Binary files /dev/null and b/public/home-4.jpg differ
diff --git a/public/home-5.jpg b/public/home-5.jpg
new file mode 100644
index 0000000..929d2f0
Binary files /dev/null and b/public/home-5.jpg differ
diff --git a/public/home-6.jpg b/public/home-6.jpg
new file mode 100644
index 0000000..c80b898
Binary files /dev/null and b/public/home-6.jpg differ
diff --git a/public/home-7.jpg b/public/home-7.jpg
new file mode 100644
index 0000000..c01d1bf
Binary files /dev/null and b/public/home-7.jpg differ
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f8422..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 86cd0be..abda1ce 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 const Footer: React.FC = () => {
   return (
     <footer className="flex flex-col font-medium w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto my-4">
diff --git a/src/components/HomeImageGrid.tsx b/src/components/HomeImageGrid.tsx
new file mode 100644
index 0000000..e1de863
--- /dev/null
+++ b/src/components/HomeImageGrid.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable @next/next/no-img-element */
+import React from 'react';
+
+const images = [
+    '/home-1.jpg',
+    '/home-2.jpg',
+    '/home-3.jpg',
+    '/home-4.jpg',
+    '/home-5.jpg',
+    '/home-6.jpg',
+    '/home-7.jpg',
+];
+
+const HomeImageGrid: React.FC = () => {
+    return (
+        <div className="columns-2 md:columns-3 my-2 gap-2 md:gap-4">
+            {images.map((src, index) => (
+                <div key={index} className="mb-2 md:mb-4">
+                    <img className="h-auto max-w-full rounded-lg grayscale  transition-all duration-300 ease-in-out transform hover:grayscale-0" src={src} alt="" />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default HomeImageGrid;
\ No newline at end of file
diff --git a/src/components/ImageGallery.tsx b/src/components/ImageGallery.tsx
new file mode 100644
index 0000000..4e77cbd
--- /dev/null
+++ b/src/components/ImageGallery.tsx
@@ -0,0 +1,42 @@
+/* eslint-disable @next/next/no-img-element */
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+interface Image {
+    urls: { regular: string; };
+}
+
+const ImageGallery: React.FC = () => {
+    const [imageData, setImageData] = useState<Image[]>([]);
+
+    const fetchImagesFromUnsplash = async () => {
+        try {
+            const response = await axios.get('https://api.unsplash.com/users/pranshu05/photos', {
+                params: {
+                    client_id: 'IpuBMtdoSBFo8bS7L1gevS7rRFBdEDN9Wp7du9QFh1A',
+                    per_page: 30,
+                },
+            });
+
+            setImageData(response.data);
+        } catch (error) {
+            console.error('Error fetching images:', error);
+        }
+    };
+
+    useEffect(() => {
+        fetchImagesFromUnsplash();
+    }, []);
+
+    return (
+        <div className="columns-2 md:columns-3 gap:2 md:gap-4">
+            {imageData.map((image, index) => (
+                <div className="mb-2 md:mb-4" key={index}>
+                    <img className='h-auto max-w-full rounded-lg grayscale transition-all duration-300 ease-in-out transform hover:grayscale-0' src={image.urls.regular} alt="" loading="lazy" />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default ImageGallery;
\ No newline at end of file
diff --git a/src/components/MessageList.tsx b/src/components/MessageList.tsx
index 9fe7dcf..e7ecdf2 100644
--- a/src/components/MessageList.tsx
+++ b/src/components/MessageList.tsx
@@ -26,7 +26,6 @@ const MessageList: React.FC = () => {
                     const data = doc.data();
                     return { id: doc.id, ...data, timestamp: data.timestamp.toDate(), };
                 }) as Message[];
-
                 setMessages(newMessages);
                 setLoading(false);
                 setError(null);
@@ -36,7 +35,6 @@ const MessageList: React.FC = () => {
                 setError('Error fetching messages. Please try again.');
             }
         });
-
         return () => unsubscribe();
     }, []);
 
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index d09ff84..d3b6476 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,17 +5,12 @@ import Footer from "@/components/Footer";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <>
-      <div className="min-h-dvh w-dvw p-0 m-0 text-zinc-100 flex flex-col">
-        <NavBar />
-        <div className="flex-1">
-          <Component {...pageProps} />
-        </div>
-        <Footer />
+    <div className="min-h-dvh w-dvw p-0 m-0 bg-neutral-950 text-zinc-100 flex flex-col">
+      <NavBar />
+      <div className="flex-1">
+        <Component {...pageProps} />
       </div>
-      <div className="fixed left-0 top-0 -z-10 h-dvh w-dvw">
-        <div className="absolute top-0 left-0 z-[-2] h-screen w-screen bg-neutral-950 bg-[radial-gradient(100%_50%_at_50%_0%,rgba(0,163,255,0.2)_0,rgba(0,163,255,0.12)_50%,rgba(0,163,255,0)_100%)]"></div>
-      </div>
-    </>
+      <Footer />
+    </div>
   );
 }
\ No newline at end of file
diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx
new file mode 100644
index 0000000..01becda
--- /dev/null
+++ b/src/pages/gallery/index.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from 'next';
+import ImageGallery from '../../components/ImageGallery';
+
+export const metadata: Metadata = {
+    title: 'Pranshu05 // Gallary',
+    description: 'My Gallary, feel free to explore!',
+};
+
+const ImageGalleryPage: React.FC = () => {
+    return (
+        <div className="w-11/12 md:w-4/5 lg:w-3/4 xl:w-2/3 2xl:w-1/2 mx-auto">
+            <div className="pb-8">
+                <h1 className="text-3xl font-bold">Gallary</h1>
+                <p>Welcome to my Gallary! Visit my <a href='https://unsplash.com/@pranshu05' target="_blank" className='link'>Unsplash Profile</a></p>
+            </div>
+            <ImageGallery />
+        </div>
+    );
+};
+
+export default ImageGalleryPage;
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2fafc1d..8bc2553 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,6 +5,7 @@ import type { Metadata } from "next";
 import { ageInYears } from '@/lib/AgeInYears';
 import { useEffect, useState } from 'react';
 import { getFormattedTime } from '@/lib/Time';
+import HomeImageGrid from '@/components/HomeImageGrid';
 
 const socialLinks = [
   { href: 'https://github.com/pranshu05', icon: <FaGithub />, text: 'GitHub' },
@@ -50,6 +51,7 @@ const Home: React.FC = () => {
           </div>
         ))}
       </div>
+      <HomeImageGrid />
     </div>
   );
 };