diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..dd4b29f
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+
+// NextJs
+import Link from 'next/link'
+
+// Lib
+import ImageHolder from '@/lib/ImageHolder'
+import { Tooltip } from '@mui/material'
+
+
+export default function Footer() {
+    const portfolioImg = 'https://i.ibb.co/L0pf86z/portfolio.png'
+    const themealdbImg = 'https://themealdb.com/images/meal-icon.png'
+
+    return (
+        <footer className='bg-black text-white container-fluid'>
+            <div className='container py-2 d-flex flex-row flex-wrap justify-content-center algin-items-center gap-3'>
+                <Tooltip title='Portfolio' arrow>
+                    <Link style={{width: '30px', height: '30px'}} className='bg-dark overflow-hidden rounded-1' href='https://xvpc.dev' target='_blank'>
+                        <ImageHolder img={portfolioImg} title={'xvpc.dev'} network />
+                    </Link>
+                </Tooltip>
+                
+                <Tooltip title='GitHub' arrow>
+                    <Link style={{width: '30px', height: '30px'}} className='bg-white d-flex justify-content-center algin-items-center overflow-hidden rounded-1' href='https://github.com/xvpc/quickrecipes' target='_blank'>
+                        <svg height="32" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="32" data-view-component="true" className="octicon octicon-mark-github v-align-middle color-fg-default">
+                            <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
+                        </svg>
+                    </Link>
+                </Tooltip>
+
+                <Tooltip title='API' arrow>
+                    <Link style={{width: '30px', height: '30px', backgroundColor: "#2d2013"}} className='pt-1 d-flex justify-content-center algin-items-center overflow-hidden rounded-1' href='https://themealdb.com' target='_blank'>
+                        <ImageHolder img={themealdbImg} title={'themealdb.com'} network />
+                    </Link>
+                </Tooltip>
+
+            </div>
+        </footer>
+    )
+}
diff --git a/components/Header.tsx b/components/Header.tsx
index ced80a2..ad4ad34 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -20,9 +20,9 @@ export default function Header() {
     return (
         <header className='container-fluid px-0 bg-dark'>
             <nav className='container px-0 py-2 d-flex flex-row flex-wrap justify-content-center justify-content-sm-between align-items-center gap-5'>
-                <div style={{maxWidth: 50, maxHeight: 50}} className='rounded overflow-hidden'>
-                    <ImageHolder img={iconImage} title="Icon" />
-                </div>
+                <Link href="/" style={{maxWidth: 40, maxHeight: 40}} className='bg-white rounded overflow-hidden'>
+                    <ImageHolder img={iconImage} title="Site icon" network />
+                </Link>
                 <div className='d-flex flex-row justify-content-center algin-items-center gap-2'>
                     <Link href="/">
                         <Button className='fw-bold' variant="text" color="info">Home</Button>
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 613dcaa..22c3768 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -9,6 +9,7 @@ import styles from '@/styles/Home.module.css'
 
 // Components
 import Header from '@/components/Header'
+import Footer from './Footer'
 
 // Parallax
 import { ParallaxProvider } from 'react-scroll-parallax'
@@ -47,11 +48,7 @@ export default function Layout({ children, title } : LayoutProps) {
                     </ParallaxProvider>
                 </main>
 
-                <footer className='bg-black container-fluid '>
-                <div className='container d-flex flex-row flex-wrap justify-content-center algin-items-center gap-4'>
-                    <p className='p-0 m-0'>Hello world</p>
-                </div>
-                </footer>
+                <Footer />
             </div>
         </div>
     )
diff --git a/components/SearchContainer.tsx b/components/SearchContainer.tsx
index 1fedb2d..4b41d23 100644
--- a/components/SearchContainer.tsx
+++ b/components/SearchContainer.tsx
@@ -27,7 +27,7 @@ export default function SearchContainer({ id, name, image, ingredients }:SearchC
     return (
         <Link href={`${id ? "/recipes/" + id : "#"}`}>
             <motion.div 
-            className='delaclos-bg h-100 pb-2 d-flex flex-column justify-content-start algin-items-center gap-4 rounded overflow-hidden shadow'
+            className='delaclos-bg h-100 pb-2 d-flex flex-column justify-content-between algin-items-center gap-4 rounded overflow-hidden shadow'
             initial={{y: "100px", opacity: 0}}
             whileInView={{y: 0, opacity: 1}}
             viewport={{once: true}}
@@ -61,7 +61,7 @@ export default function SearchContainer({ id, name, image, ingredients }:SearchC
 
                     <div>
                         <Link href={`${id ? "/recipes/" + id : "#"}`}>
-                            <Button className='text-capitalize py-1 px-2 mt-2' variant="contained" color="primary">
+                            <Button className='text-capitalize py-1 px-2 mt-2' variant="contained" color="success">
                                 View Recipe
                             </Button>
                         </Link>
diff --git a/components/sections/Introduction.tsx b/components/sections/Introduction.tsx
index ee9f3e0..e7d6567 100644
--- a/components/sections/Introduction.tsx
+++ b/components/sections/Introduction.tsx
@@ -36,7 +36,7 @@ export default function Introduction({ title, country, image, home }: Introducti
         ref={parallax.ref}
         >
             <motion.div 
-            className={`order-1 rounded overflow-hidden shadow ${matchSm ? "w-25" : ""} m-auto`}
+            className={`order-1 rounded overflow-hidden ${home ? "shadow-lg" : "shadow"} ${matchSm ? "w-25" : ""} m-auto`}
             initial={{y: "100vh", opacity: 0}}
             animate={{y: 0, opacity: 1}}
             transition={{duration: 0.8, delay: 1.2}}
diff --git a/lib/ImageHolder.tsx b/lib/ImageHolder.tsx
index 490a77c..bd7a65f 100644
--- a/lib/ImageHolder.tsx
+++ b/lib/ImageHolder.tsx
@@ -14,11 +14,11 @@ export default function ImageHolder({ img, title, network }: ImageHolderProps) {
 
     if(!network && process.env.NODE_ENV == 'production'){
         return (
-            <Image className='img-fluid h-100 remove-selecting' src={`.${img}`} alt={title || 'Image title'} height={720} width={1080} />
+            <Image className='img-fluid h-100 remove-selecting' src={`.${img}`} alt={title || 'Image placeholder'} height={720} width={1080} />
         )
     }else{
         return (
-            <Image className='img-fluid h-100' src={img} alt={title || 'Image Placeholder'} height={720} width={1080} />
+            <Image className='img-fluid h-100 remove-selecting' src={img} alt={title || 'Image placeholder'} height={720} width={1080} />
         )
     }
 }
diff --git a/pages/random.tsx b/pages/random.tsx
index e084b4d..de5eb6c 100644
--- a/pages/random.tsx
+++ b/pages/random.tsx
@@ -6,6 +6,10 @@ import { useRouter } from 'next/router'
 // Lib
 import getRandom from '@/lib/getRandom'
 
+
+// Components
+import Layout from '@/components/Layout'
+
 export default function Random(){
     const router = useRouter()
 
@@ -13,14 +17,16 @@ export default function Random(){
         (async() => {
             const data = await getRandom();
             if(data?.error){
-                router.push(`/recipes/53022`)
+                router.replace(`/`)
             }else{
-                router.push(`/recipes/${data}`)
+                router.replace(`/recipes/${data}`)
             }
         })()
     }, [])
     
     return (
-        <div></div>
+        <Layout>
+            <h1 className='fw-bold text-center'>Loading Recipe..</h1>
+        </Layout>
     )
 }
diff --git a/pages/recipes/[id].tsx b/pages/recipes/[id].tsx
index f03c70f..7a81c3d 100644
--- a/pages/recipes/[id].tsx
+++ b/pages/recipes/[id].tsx
@@ -19,13 +19,13 @@ export default function InfoPage() {
     useEffect(() => {
         const id = router.query?.id;
         
-        let times = 1
-        console.log(`${id} => ${times}`)
-        times+=1
+        // let times = 1
+        // console.log(`${id} => ${times}`)
+        // times+=1
         
         if(id){
             (async() => {
-                console.log(`${id} => ${times}`)
+                console.log(`Id => ${id}`)
                 try{
                     const data = await getInfo({id: String(id)})
 
diff --git a/styles/style.css b/styles/style.css
index de838b8..acb6b15 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -1,7 +1,3 @@
-:root{
-    --main-color: lightblue;
-}
-
 a{ color: inherit !important; text-decoration: none !important; }
 ul{ margin: 0 !important; padding: 0 !important; list-style-type: none !important; }
 
diff --git a/utils/assets.ts b/utils/assets.ts
index c94c814..ec9ae2f 100644
--- a/utils/assets.ts
+++ b/utils/assets.ts
@@ -1,2 +1,2 @@
-export const apiUrl: string = process.env.NEXT_PUBLIC_API || "https://www.themealdb.com/api/json/v1/1/";
-export const iconImage: string = "/favicon/siteicon.png";
\ No newline at end of file
+export const apiUrl: string = process.env.NEXT_PUBLIC_API as string;
+export const iconImage: string = "https://i.ibb.co/zJ8hp32/siteicon.png";
\ No newline at end of file