diff --git a/apps/frontend/next.config.js b/apps/frontend/next.config.js
index df9d3d0e..d9591c0b 100644
--- a/apps/frontend/next.config.js
+++ b/apps/frontend/next.config.js
@@ -38,7 +38,7 @@ const CSP_HEADER = `
     font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com https://static.swaylend.com https://testnet-swaylend.b-cdn.net;
     object-src 'none';
     base-uri 'self';
-    frame-src 'self' https://verify.walletconnect.com https://verify.walletconnect.org;
+    frame-src 'self' https://verify.walletconnect.com https://verify.walletconnect.org https://mira.ly/;
     form-action 'self';
     frame-ancestors 'none';
     upgrade-insecure-requests;
diff --git a/apps/frontend/src/app/(core)/swap/page.tsx b/apps/frontend/src/app/(core)/swap/page.tsx
new file mode 100644
index 00000000..9044d652
--- /dev/null
+++ b/apps/frontend/src/app/(core)/swap/page.tsx
@@ -0,0 +1,17 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Swap',
+};
+
+export default async function Page() {
+  return (
+    <div className="w-full h-full p-4">
+      <iframe
+        title="mira.ly"
+        className="w-full h-screen rounded-2xl border-0 scrollbar-none"
+        src="https://mira.ly/"
+      />
+    </div>
+  );
+}
diff --git a/apps/frontend/src/components/Navbar/index.tsx b/apps/frontend/src/components/Navbar/index.tsx
index ef4a8c3f..84b2f174 100644
--- a/apps/frontend/src/components/Navbar/index.tsx
+++ b/apps/frontend/src/components/Navbar/index.tsx
@@ -215,6 +215,13 @@ export const Navbar = ({ mobile = false }: { mobile?: boolean }) => {
                       </div>
                     </div>
                   </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <Link href="/swap" className="w-full">
+                      <div className="w-full flex items-center justify-between text-md font-medium text-lavender py-1 px-0.5 gap-x-2 cursor-pointer hover:underline">
+                        Embedded
+                      </div>
+                    </Link>
+                  </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
@@ -284,6 +291,21 @@ export const Navbar = ({ mobile = false }: { mobile?: boolean }) => {
                       Dashboard
                     </div>
                   </Link>
+                  <Link
+                    href="/swap"
+                    onMouseDown={() => setOpen(false)}
+                    prefetch={false}
+                  >
+                    <div
+                      className={cn(
+                        pathname === '/swap' ? 'text-primary' : 'text-lavender',
+                        pathname !== '/swap' && 'hover:text-lavender/80',
+                        'flex font-bold text-xl items-center gap-x-2 h-full'
+                      )}
+                    >
+                      Swap
+                    </div>
+                  </Link>
                   {NAVBAR_LINKS.map(({ href, label }) => {
                     if (mobile && href === '/markets') return null;
                     return (