diff --git a/components/figlet/FigletConverter.tsx b/components/figlet/FigletConverter.tsx
index c276e06..9f1763f 100644
--- a/components/figlet/FigletConverter.tsx
+++ b/components/figlet/FigletConverter.tsx
@@ -11,6 +11,8 @@ import { addRecentFont } from '@/lib/storage/favorites';
 import { decodeFromUrl, updateUrl, getShareableUrl } from '@/lib/utils/urlSharing';
 import { toast } from 'sonner';
 import type { FigletFont } from '@/types/figlet';
+import { Car } from 'lucide-react';
+import { Card, CardContent } from '../ui/card';
 
 export function FigletConverter() {
   const [text, setText] = React.useState('Figlet');
@@ -118,11 +120,16 @@ export function FigletConverter() {
     <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-stretch lg:max-h-[800px]">
       {/* Left Column - Input and Preview */}
       <div className="lg:col-span-2 space-y-6 overflow-y-auto custom-scrollbar">
-        <TextInput
-          value={text}
-          onChange={setText}
-          placeholder="Type your text here..."
-        />
+        <Card>
+          <CardContent>
+            <TextInput
+              value={text}
+              onChange={setText}
+              placeholder="Type your text here..."
+            />
+          </CardContent>
+        </Card>
+        
 
         <FontPreview
           text={asciiArt}