diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
new file mode 100644
index 0000000..e1e6cd6
--- /dev/null
+++ b/app/components/Footer.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import Image from "next/image";
+import { FaGithub } from "react-icons/fa";
+import { FaXTwitter, FaTelegram } from "react-icons/fa6";
+
+const Footer = () => {
+  return (
+    <footer className="flex flex-col mt-8 space-y-2">
+      <hr className=" border-t-2 border-[#00DCF7]" />
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:px-6">
+        <div className="flex flex-row items-center justify-center space-x-2">
+          <Image
+            src={"/images/AmirKakavand.jpg"}
+            width={"80"}
+            height={"80"}
+            alt="Photo of Amir Kakavand"
+            className="rounded-full w-14 h-14 hidden sm:block"
+          />
+          <span className="text-xs sm:text-xl">
+            Designed and developed by Amir Kakavand
+          </span>
+        </div>
+        {/* Social Media */}
+        <div className="flex flex-row items-center justify-center space-x-10 mt-2 sm:mt-0">
+          <a
+            href="https://github.com/AmirKakavand"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FaGithub className="text-3xl" />
+          </a>
+          <a
+            href="https://x.com/Amirkkvnd"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FaXTwitter className="text-3xl" />
+          </a>
+          <a
+            href="https://t.me/Amirkkvnd"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <FaTelegram className="text-3xl" />
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index fb377d6..eb92270 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,5 +1,6 @@
 import { useState, Dispatch, SetStateAction } from "react";
-import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { IoCloseOutline } from "react-icons/io5";
+import { IoIosSearch } from "react-icons/io";
 
 interface IHeaderProps {
   name: string;
@@ -33,9 +34,9 @@ const Header = ({ name, setName, setSearchQuery }: IHeaderProps) => {
         />
         <div className="hidden md:inline text-slate-600 inset-y-auto right-0.5 md:right-4 absolute">
           {name === "" ? (
-            <MagnifyingGlassIcon className="w-7 h-7" />
+            <IoIosSearch className="w-7 h-7" />
           ) : (
-            <XMarkIcon
+            <IoCloseOutline
               className={mouseHover ? "w-7 h-7 cursor-pointer" : "w-7 h-7"}
               onMouseEnter={() => setMouseHover(true)}
               onMouseLeave={() => setMouseHover(false)}
diff --git a/app/page.tsx b/app/page.tsx
index affa14f..67aa909 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,6 +3,7 @@ import { useState, useEffect } from "react";
 import { CharactersPage } from "./components/CharactersPage";
 import { handleSearch } from "./utils/handleSearch";
 import Header from "./components/Header";
+import Footer from "./components/Footer";
 
 export default function Home() {
   const [pageNo, setPageNo] = useState<number>(1);
@@ -23,6 +24,8 @@ export default function Home() {
           searchQuery={searchQuery}
         />
       )}
+
+      {searchQuery === "" && pageNo === 1 && <Footer />}
     </main>
   );
 }
diff --git a/package-lock.json b/package-lock.json
index ae46691..de0dd15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "next": "14.2.5",
         "react": "^18",
         "react-dom": "^18",
+        "react-icons": "^5.2.1",
         "swr": "^2.2.5"
       },
       "devDependencies": {
@@ -4015,6 +4016,15 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index beaf555..a8d0c72 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.2.1",
     "swr": "^2.2.5"
   },
   "devDependencies": {
diff --git a/public/images/AmirKakavand.jpg b/public/images/AmirKakavand.jpg
new file mode 100644
index 0000000..b13b092
Binary files /dev/null and b/public/images/AmirKakavand.jpg differ
diff --git a/public/images/github.png b/public/images/github.png
new file mode 100644
index 0000000..7fec712
Binary files /dev/null and b/public/images/github.png differ
diff --git a/public/images/telegram.jpg b/public/images/telegram.jpg
new file mode 100644
index 0000000..5bb3d82
Binary files /dev/null and b/public/images/telegram.jpg differ