diff --git a/src/app/page.tsx b/src/app/page.tsx
index 07a01d9..6172c35 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,184 @@
+"use client";
+
+import { useState } from "react";
+import { Seat } from "@/components/ui/seat";
+
 export default function Home() {
-  return (<div className={'h-screen'}></div>);
+  // State for controlling seat properties
+  const [seatType, setSeatType] = useState<"window" | "middle" | "aisle">("window");
+  const [seatSize, setSeatSize] = useState<"default" | "sm" | "lg">("default");
+  const [showAllTypes, setShowAllTypes] = useState(true);
+  const [showAllSizes, setShowAllSizes] = useState(true);
+
+  return (
+    <div className="min-h-screen flex flex-col items-center p-8 bg-gray-50">
+      <h1 className="text-2xl font-bold mb-6">Kiwi.com Seat Selection</h1>
+      
+      {/* Toggle controls */}
+      <div className="w-full max-w-3xl mb-8 p-4 bg-white rounded-lg shadow-sm">
+        <h2 className="text-lg font-semibold mb-4">Toggle Controls</h2>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Seat Type Controls */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <h3 className="font-medium">Seat Type:</h3>
+              <label className="inline-flex items-center">
+                <input
+                  type="checkbox"
+                  checked={showAllTypes}
+                  onChange={() => setShowAllTypes(!showAllTypes)}
+                  className="rounded text-blue-600"
+                />
+                <span className="ml-2 text-sm">Show All Types</span>
+              </label>
+            </div>
+            
+            {!showAllTypes && (
+              <div className="flex space-x-4">
+                {["window", "middle", "aisle"].map((type) => (
+                  <label key={type} className="inline-flex items-center">
+                    <input
+                      type="radio"
+                      name="seatType"
+                      value={type}
+                      checked={seatType === type}
+                      onChange={() => setSeatType(type as any)}
+                      className="text-blue-600"
+                    />
+                    <span className="ml-2 capitalize">{type}</span>
+                  </label>
+                ))}
+              </div>
+            )}
+          </div>
+          
+          {/* Seat Size Controls */}
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <h3 className="font-medium">Seat Size:</h3>
+              <label className="inline-flex items-center">
+                <input
+                  type="checkbox"
+                  checked={showAllSizes}
+                  onChange={() => setShowAllSizes(!showAllSizes)}
+                  className="rounded text-blue-600"
+                />
+                <span className="ml-2 text-sm">Show All Sizes</span>
+              </label>
+            </div>
+            
+            {!showAllSizes && (
+              <div className="flex space-x-4">
+                {[
+                  { value: "default", label: "Default" },
+                  { value: "sm", label: "Small" },
+                  { value: "lg", label: "Large" }
+                ].map((size) => (
+                  <label key={size.value} className="inline-flex items-center">
+                    <input
+                      type="radio"
+                      name="seatSize"
+                      value={size.value}
+                      checked={seatSize === size.value}
+                      onChange={() => setSeatSize(size.value as any)}
+                      className="text-blue-600"
+                    />
+                    <span className="ml-2">{size.label}</span>
+                  </label>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      
+      {/* Display seats based on toggle state */}
+      {showAllTypes ? (
+        <div className="grid grid-cols-3 gap-6 mb-8">
+          <div className="flex flex-col items-center">
+            <Seat 
+              title="12A" 
+              seatType="window" 
+              size={showAllSizes ? "default" : seatSize} 
+            />
+            <p className="mt-2 text-sm text-gray-600">Window Seat</p>
+          </div>
+          
+          <div className="flex flex-col items-center">
+            <Seat 
+              title="24B" 
+              seatType="middle" 
+              size={showAllSizes ? "default" : seatSize} 
+            />
+            <p className="mt-2 text-sm text-gray-600">Middle Seat</p>
+          </div>
+          
+          <div className="flex flex-col items-center">
+            <Seat 
+              title="18C" 
+              seatType="aisle" 
+              size={showAllSizes ? "default" : seatSize} 
+            />
+            <p className="mt-2 text-sm text-gray-600">Aisle Seat</p>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col items-center mb-8">
+          <Seat 
+            title={`Seat ${seatType.charAt(0).toUpperCase()}1`} 
+            seatType={seatType} 
+            size={showAllSizes ? "default" : seatSize} 
+          />
+          <p className="mt-2 text-sm text-gray-600 capitalize">{seatType} Seat</p>
+        </div>
+      )}
+      
+      {/* Size variations */}
+      {showAllSizes ? (
+        <div className="w-full max-w-3xl">
+          <h2 className="text-lg font-semibold mb-4">Size Variations</h2>
+          <div className="grid grid-cols-3 gap-6">
+            <div className="flex flex-col items-center">
+              <Seat 
+                title="S1" 
+                seatType={showAllTypes ? "window" : seatType} 
+                size="sm" 
+              />
+              <p className="mt-2 text-sm text-gray-600">Small</p>
+            </div>
+            
+            <div className="flex flex-col items-center">
+              <Seat 
+                title="M1" 
+                seatType={showAllTypes ? "middle" : seatType} 
+                size="default" 
+              />
+              <p className="mt-2 text-sm text-gray-600">Default</p>
+            </div>
+            
+            <div className="flex flex-col items-center">
+              <Seat 
+                title="L1" 
+                seatType={showAllTypes ? "aisle" : seatType} 
+                size="lg" 
+              />
+              <p className="mt-2 text-sm text-gray-600">Large</p>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col items-center">
+          <Seat 
+            title={`Size ${seatSize}`} 
+            seatType={showAllTypes ? "window" : seatType} 
+            size={seatSize} 
+          />
+          <p className="mt-2 text-sm text-gray-600">
+            {seatSize === "default" ? "Default" : seatSize === "sm" ? "Small" : "Large"} Size
+          </p>
+        </div>
+      )}
+    </div>
+  );
 }
diff --git a/src/components/ui/seat.tsx b/src/components/ui/seat.tsx
new file mode 100644
index 0000000..1bd9cae
--- /dev/null
+++ b/src/components/ui/seat.tsx
@@ -0,0 +1,77 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const seatVariants = cva(
+  "inline-flex flex-col items-center justify-center rounded-md border text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative overflow-hidden",
+  {
+    variants: {
+      variant: {
+        window: "bg-blue-50 border-blue-200 hover:bg-blue-100",
+        aisle: "bg-green-50 border-green-200 hover:bg-green-100",
+        middle: "bg-gray-50 border-gray-200 hover:bg-gray-100",
+      },
+      size: {
+        default: "h-16 w-12",
+        sm: "h-12 w-9",
+        lg: "h-20 w-16",
+      },
+    },
+    defaultVariants: {
+      variant: "middle",
+      size: "default",
+    },
+  }
+)
+
+export interface SeatProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof seatVariants> {
+  title?: string
+  seatType?: "window" | "aisle" | "middle"
+}
+
+const Seat = React.forwardRef<HTMLDivElement, SeatProps>(
+  ({ className, variant, size, title, seatType, ...props }, ref) => {
+    // Use the seatType to determine the variant if provided
+    const seatVariant = seatType || variant
+
+    return (
+      <div
+        className={cn(seatVariants({ variant: seatVariant, size }), className)}
+        ref={ref}
+        {...props}
+      >
+        {/* Seat title (e.g., 24B) */}
+        <div className="font-bold text-center">{title}</div>
+        
+        {/* Seat type label */}
+        <div className="text-xs text-center mt-1 opacity-70 capitalize">
+          {seatType || variant}
+        </div>
+        
+        {/* Seat icon visual */}
+        <div className="absolute inset-0 flex items-center justify-center opacity-10 pointer-events-none">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="w-full h-full p-2"
+          >
+            <rect x="4" y="2" width="16" height="20" rx="2" ry="2" />
+            <line x1="4" y1="10" x2="20" y2="10" />
+          </svg>
+        </div>
+      </div>
+    )
+  }
+)
+
+Seat.displayName = "Seat"
+
+export { Seat, seatVariants }
\ No newline at end of file