diff --git a/packages/ui/src/stories/examples/Footer.stories.tsx b/packages/ui/src/stories/examples/Footer.stories.tsx
index 7fbef57..0939eb1 100644
--- a/packages/ui/src/stories/examples/Footer.stories.tsx
+++ b/packages/ui/src/stories/examples/Footer.stories.tsx
@@ -2,6 +2,7 @@ import { Meta } from "@storybook/react";
 import { Card } from '@bootwind/card'
 import { Table, TableBody, TableCell, TableRow } from '@bootwind/table'
 import { HiEnvelope } from 'react-icons/hi2'
+import { BiLogoDribbble, BiLogoFacebook, BiLogoFacebookCircle, BiLogoFigma, BiLogoWhatsapp, BiLogoYoutube } from 'react-icons/bi'
 import { Input } from '@bootwind/forms'
 import { Button } from '@bootwind/button'
 
@@ -54,10 +55,61 @@ export const FooterWithNewsletter = () => {
         </footer>
     )
 }
-export const FooterWithMenu = () => {
-    return (
-        <footer>
+const SocialMediaIcons = () => (
+    <div className="social-media">
+        <ul className="flex gap-3">
+            {
+            [<BiLogoFacebookCircle/>, <BiLogoYoutube/>, <BiLogoDribbble/>, <BiLogoFigma/>, <BiLogoWhatsapp/>].map(logo => {
+                return (
+                <li>
+                    <a href="#" className="p-3 bg-indigo-100 block rounded-full">
+                        {logo}
+                    </a>
+                </li>
+                )
+                })
+            }
+        </ul>
+    </div>
+)
 
+export const FooterWithLogo = () => {
+    return (
+        <footer className="py-8 border-t color-default">
+            <div className="container mx-auto">
+                <section className="footer-top grid lg:grid-cols-2 ">
+                    <div className="footer-left pr-48">
+                        <h4 className="font-bold text-lg mb-5">Logo</h4>
+                        <p className="mb-8">
+                        We ara a lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... Read More
+                        </p>
+                        <SocialMediaIcons/>
+                    </div>
+                    <div className="footer-menus grid lg:grid-cols-3">
+                        {
+                            Object.keys(menus).map(menu => (
+                                <div className="footer-menu">
+                                    <div className="footer-menu-title font-bold mb-5">
+                                        <h4>{menu}</h4>
+                                    </div>
+                                    <div className="footer-menu-items ">
+                                            {menus[menu as keyof typeof menus].map(item => {
+                                                return (
+                                                    <div className="footer-menu-item mb-5">
+                                                        <a href="#" className="color-default">{item}</a>
+                                                    </div>
+                                                )
+                                            })}
+                                    </div>
+                                </div>
+                            ))
+                        }
+                    </div>
+                </section>
+                <section className="footer-copyright text-center py-5">
+                    &copy; 2000-2023, All Rights Reserved
+                </section>
+            </div>
         </footer>
     )
-}
+}
\ No newline at end of file