diff --git a/frontend/src/app/components/GlassPanel.tsx b/frontend/src/app/components/GlassPanel.tsx
new file mode 100644
index 0000000..654c62b
--- /dev/null
+++ b/frontend/src/app/components/GlassPanel.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+interface GlassPanelProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function GlassPanel({ children, className }: GlassPanelProps) {
+  return (
+    <div className={`glass-panel${className ? ` ${className}` : ""}`}>
+      {children}
+    </div>
+  );
+}
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index f5f6967..6978cbf 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -29,6 +29,7 @@ import {
 import { WalletModal } from "./components/WalletModal";
 import { ChatInterface, type ChatMessage } from "./components/ChatInterface";
 import { GoalTracker } from "./components/GoalTracker";
+import { GlassPanel } from "./components/GlassPanel";
 
 export default function Home() {
   const {
@@ -172,7 +173,7 @@ export default function Home() {
         />
         <main className="app-container" aria-label="Portfolio dashboard">
           {/* Left Panel - Dashboard */}
-          <div className="glass-panel">
+          <GlassPanel>
             <h1>Smasage Portfolio</h1>
             <p className="text-muted" style={{ marginBottom: "2.5rem" }}>
               Real-time on-chain tracking • Stellar Mainnet 🚀
@@ -231,16 +232,16 @@ export default function Home() {
                 </div>
               )}
             </div>
-          </div>
+          </GlassPanel>
 
           {/* Right Panel - Chat Agent */}
-          <div className="glass-panel">
+          <GlassPanel>
             <ChatInterface
               messages={messages}
               isTyping={isTyping}
               onSendMessage={handleSendMessage}
             />
-          </div>
+          </GlassPanel>
         </main>
       </>
     </ErrorBoundary>