diff --git a/components/canvas/frames/Frame3DOverlay.tsx b/components/canvas/frames/Frame3DOverlay.tsx
index 9347c0d..15b3e7a 100644
--- a/components/canvas/frames/Frame3DOverlay.tsx
+++ b/components/canvas/frames/Frame3DOverlay.tsx
@@ -1,8 +1,10 @@
 'use client';
 
+import { useEffect, useState } from 'react';
+
 export interface FrameConfig {
   enabled: boolean;
-  type: 'none' | 'solid' | 'glassy' | 'infinite-mirror' | 'window' | 'stack' | 'ruler' | 'eclipse' | 'dotted' | 'focus';
+  type: 'none' | 'arc-light' | 'arc-dark' | 'macos-dark' | 'macos-light' | 'windows-dark' | 'windows-light' | 'photograph';
   width: number;
   color: string;
   theme?: 'light' | 'dark';
@@ -10,6 +12,16 @@ export interface FrameConfig {
   title?: string;
 }
 
+const borderImageMap: Record<string, string> = {
+  'arc-light': '/border/arc-light.webp',
+  'arc-dark': '/border/arc-dark.webp',
+  'macos-dark': '/border/macos-black.webp',
+  'macos-light': '/border/macos-black.webp',
+  'windows-dark': '/border/macos-black.webp',
+  'windows-light': '/border/macos-black.webp',
+  'photograph': '/border/photograph.webp',
+};
+
 interface Frame3DOverlayProps {
   frame: FrameConfig;
   showFrame: boolean;
@@ -24,6 +36,45 @@ interface Frame3DOverlayProps {
   screenshotRadius: number;
 }
 
+function ImageFrame3D({ 
+  imageUrl, 
+  width, 
+  height, 
+  cornerRadius 
+}: { 
+  imageUrl: string; 
+  width: number; 
+  height: number; 
+  cornerRadius: number;
+}) {
+  const [image, setImage] = useState<HTMLImageElement | null>(null);
+
+  useEffect(() => {
+    const img = new window.Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => setImage(img);
+    img.onerror = () => setImage(null);
+    img.src = imageUrl;
+  }, [imageUrl]);
+
+  if (!image) return null;
+
+  return (
+    <img
+      src={imageUrl}
+      alt="frame"
+      style={{
+        position: 'absolute',
+        inset: 0,
+        width: `${width}px`,
+        height: `${height}px`,
+        objectFit: 'cover',
+        borderRadius: `${cornerRadius}px`,
+      }}
+    />
+  );
+}
+
 export function Frame3DOverlay({
   frame,
   showFrame,
@@ -41,362 +92,23 @@ export function Frame3DOverlay({
     return null;
   }
 
-  switch (frame.type) {
-    case 'solid':
-      return (
-        <div
-          style={{
-            position: 'absolute',
-            inset: 0,
-            backgroundColor: frame.color,
-            borderRadius: `${screenshotRadius}px`,
-          }}
-        />
-      );
-
-    case 'glassy':
-      return (
-        <div
-          style={{
-            position: 'absolute',
-            left: `${frameOffset + windowPadding}px`,
-            top: `${frameOffset + windowPadding + windowHeader}px`,
-            width: `${imageScaledW}px`,
-            height: `${imageScaledH}px`,
-            backgroundColor: 'rgba(255, 255, 255, 0.15)',
-            border: `${frame.width * 4 + 6}px solid rgba(255, 255, 255, 0.3)`,
-            borderRadius: `${screenshotRadius}px`,
-          }}
-        />
-      );
-
-    case 'ruler':
-      return (
-        <div
-          style={{
-            position: 'absolute',
-            inset: 0,
-            borderRadius: `${screenshotRadius}px`,
-            backgroundColor: 'rgba(0, 0, 0, 0.3)',
-            border: '1px solid rgba(255, 255, 255, 0.9)',
-            boxSizing: 'border-box',
-          }}
-        >
-          <div
-            style={{
-              position: 'absolute',
-              inset: 0,
-              backgroundColor: 'rgba(255, 255, 255, 0.2)',
-              borderRadius: `${screenshotRadius}px`,
-              overflow: 'hidden',
-            }}
-          >
-            <div
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                height: '10px',
-              }}
-            >
-              {Array.from({ length: Math.floor(framedW / 10) - 1 }).map(
-                (_, i) => (
-                  <div
-                    key={`t-${i}`}
-                    style={{
-                      position: 'absolute',
-                      left: `${i * 10}px`,
-                      top: '1px',
-                      width: '2px',
-                      height: (i + 1) % 5 === 0 ? '10px' : '5px',
-                      backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                    }}
-                  />
-                )
-              )}
-            </div>
-            <div
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                bottom: 0,
-                width: '10px',
-              }}
-            >
-              {Array.from({ length: Math.floor(framedH / 10) - 1 }).map(
-                (_, i) => (
-                  <div
-                    key={`l-${i}`}
-                    style={{
-                      position: 'absolute',
-                      left: '1px',
-                      top: `${i * 10}px`,
-                      width: (i + 1) % 5 === 0 ? '10px' : '5px',
-                      height: '2px',
-                      backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                    }}
-                  />
-                )
-              )}
-            </div>
-          </div>
-        </div>
-      );
-
-    case 'infinite-mirror':
-      return (
-        <>
-          {Array.from({ length: 4 }).map((_, i) => (
-            <div
-              key={i}
-              style={{
-                position: 'absolute',
-                left: `${-i * 7.5}px`,
-                top: `${-i * 7.5}px`,
-                width: `${framedW + i * 15}px`,
-                height: `${framedH + i * 15}px`,
-                border: `4px solid ${frame.color}`,
-                borderRadius: `${screenshotRadius + i * 5}px`,
-                opacity: 0.3 - i * 0.07,
-                boxSizing: 'border-box',
-              }}
-            />
-          ))}
-        </>
-      );
-
-    case 'eclipse':
-      return (
-        <div
-          style={{
-            position: 'absolute',
-            inset: 0,
-            borderRadius: `${screenshotRadius + eclipseBorder}px`,
-            backgroundColor: frame.color,
-            border: `${eclipseBorder}px solid ${frame.color}`,
-            boxSizing: 'border-box',
-          }}
-        />
-      );
-
-    case 'stack':
-      return (
-        <>
-          <div
-            style={{
-              position: 'absolute',
-              left: `${(framedW - framedW / 1.2) / 2}px`,
-              top: '-40px',
-              width: `${framedW / 1.2}px`,
-              height: `${framedH / 5}px`,
-              backgroundColor: frame.theme === 'dark' ? '#444444' : '#f5f5f5',
-              borderRadius: `${screenshotRadius}px`,
-            }}
-          />
-          <div
-            style={{
-              position: 'absolute',
-              left: `${(framedW - framedW / 1.1) / 2}px`,
-              top: '-20px',
-              width: `${framedW / 1.1}px`,
-              height: `${framedH / 5}px`,
-              backgroundColor: frame.theme === 'dark' ? '#2a2a2a' : '#f0f0f0',
-              borderRadius: `${screenshotRadius}px`,
-            }}
-          />
-          <div
-            style={{
-              position: 'absolute',
-              inset: 0,
-              backgroundColor: frame.theme === 'dark' ? '#555555' : '#e8e8e8',
-              borderRadius: `${screenshotRadius}px`,
-            }}
-          />
-        </>
-      );
-
-    case 'window':
-      return (
-        <>
-          <div
-            style={{
-              position: 'absolute',
-              inset: 0,
-              backgroundColor: frame.theme === 'dark' ? '#2f2f2f' : '#fefefe',
-              borderRadius: `${screenshotRadius}px`,
-            }}
-          />
-          <div
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              right: 0,
-              height: `${windowHeader}px`,
-              backgroundColor: frame.theme === 'dark' ? '#4a4a4a' : '#e2e2e2',
-              borderRadius: `${screenshotRadius}px ${screenshotRadius}px 0 0`,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}
-          >
-            <div
-              style={{
-                position: 'absolute',
-                left: '15px',
-                display: 'flex',
-                gap: '8px',
-              }}
-            >
-              <div
-                style={{
-                  width: '12px',
-                  height: '12px',
-                  borderRadius: '50%',
-                  backgroundColor: '#ff5f57',
-                }}
-              />
-              <div
-                style={{
-                  width: '12px',
-                  height: '12px',
-                  borderRadius: '50%',
-                  backgroundColor: '#febc2e',
-                }}
-              />
-              <div
-                style={{
-                  width: '12px',
-                  height: '12px',
-                  borderRadius: '50%',
-                  backgroundColor: '#28c840',
-                }}
-              />
-            </div>
-            {frame.title && (
-              <div
-                style={{
-                  color: frame.theme === 'dark' ? '#f0f0f0' : '#4f4f4f',
-                  fontSize: '14px',
-                  fontWeight: '500',
-                }}
-              >
-                {frame.title}
-              </div>
-            )}
-          </div>
-        </>
-      );
-
-    case 'dotted':
-      return (
-        <div
-          style={{
-            position: 'absolute',
-            inset: 0,
-            border: `${frame.width}px dashed ${frame.color}`,
-            borderRadius: `${screenshotRadius}px`,
-            boxSizing: 'border-box',
-          }}
-        />
-      );
+  if (frame.type === 'arc-light' || frame.type === 'arc-dark') {
+    return null;
+  }
 
-    case 'focus':
-      return (
-        <>
-          <div
-            style={{
-              position: 'absolute',
-              left: `${frameOffset}px`,
-              top: `${frameOffset}px`,
-              width: `${frame.width * 3}px`,
-              height: `${frame.width}px`,
-              backgroundColor: frame.color,
-              borderRadius: `${frame.width / 2}px 0 0 0`,
-            }}
-          />
-          <div
-            style={{
-              position: 'absolute',
-              left: `${frameOffset}px`,
-              top: `${frameOffset}px`,
-              width: `${frame.width}px`,
-              height: `${frame.width * 3}px`,
-              backgroundColor: frame.color,
-              borderRadius: `${frame.width / 2}px 0 0 0`,
-            }}
-          />
-          <div
-            style={{
-              position: 'absolute',
-              right: `${frameOffset}px`,
-              top: `${frameOffset}px`,
-              width: `${frame.width * 3}px`,
-              height: `${frame.width}px`,
-              backgroundColor: frame.color,
-              borderRadius: `0 ${frame.width / 2}px 0 0`,
-            }}
-          />
-          <div
-            style={{
-              position: 'absolute',
-              right: `${frameOffset}px`,
-              top: `${frameOffset}px`,
-              width: `${frame.width}px`,
-              height: `${frame.width * 3}px`,
-              backgroundColor: frame.color,
-              borderRadius: `0 ${frame.width / 2}px 0 0`,
-            }}
-          />
-          <div
-            style={{
-              position: 'absolute',
-              left: `${frameOffset}px`,
-              bottom: `${frameOffset}px`,
-              width: `${frame.width * 3}px`,
-              height: `${frame.width}px`,
-              backgroundColor: frame.color,
-              borderRadius: `0 0 0 ${frame.width / 2}px`,
-            }}
-          />
-          <div
-            style={{
-              position: 'absolute',
-              left: `${frameOffset}px`,
-              bottom: `${frameOffset}px`,
-              width: `${frame.width}px`,
-              height: `${frame.width * 3}px`,
-              backgroundColor: frame.color,
-              borderRadius: `0 0 0 ${frame.width / 2}px`,
-            }}
-          />
-          <div
-            style={{
-              position: 'absolute',
-              right: `${frameOffset}px`,
-              bottom: `${frameOffset}px`,
-              width: `${frame.width * 3}px`,
-              height: `${frame.width}px`,
-              backgroundColor: frame.color,
-              borderRadius: `0 0 ${frame.width / 2}px 0`,
-            }}
-          />
-          <div
-            style={{
-              position: 'absolute',
-              right: `${frameOffset}px`,
-              bottom: `${frameOffset}px`,
-              width: `${frame.width}px`,
-              height: `${frame.width * 3}px`,
-              backgroundColor: frame.color,
-              borderRadius: `0 0 ${frame.width / 2}px 0`,
-            }}
-          />
-        </>
-      );
+  const imageUrl = borderImageMap[frame.type];
+  if (imageUrl) {
+    return (
+      <ImageFrame3D
+        imageUrl={imageUrl}
+        width={framedW}
+        height={framedH}
+        cornerRadius={screenshotRadius}
+      />
+    );
+  }
 
+  switch (frame.type) {
     default:
       return null;
   }
diff --git a/components/canvas/frames/FrameRenderer.tsx b/components/canvas/frames/FrameRenderer.tsx
index 0294069..66c5ded 100644
--- a/components/canvas/frames/FrameRenderer.tsx
+++ b/components/canvas/frames/FrameRenderer.tsx
@@ -1,11 +1,12 @@
 'use client';
 
-import { Rect, Group, Circle, Text, Path } from 'react-konva';
+import { Image as KonvaImage } from 'react-konva';
+import { useEffect, useState } from 'react';
 import { ShadowProps } from '../utils/shadow-utils';
 
 export interface FrameConfig {
   enabled: boolean;
-  type: 'none' | 'solid' | 'glassy' | 'infinite-mirror' | 'window' | 'stack' | 'ruler' | 'eclipse' | 'dotted' | 'focus';
+  type: 'none' | 'arc-light' | 'arc-dark' | 'macos-dark' | 'macos-light' | 'windows-dark' | 'windows-light' | 'photograph';
   width: number;
   color: string;
   theme?: 'light' | 'dark';
@@ -13,6 +14,16 @@ export interface FrameConfig {
   title?: string;
 }
 
+const borderImageMap: Record<string, string> = {
+  'arc-light': '/border/arc-light.webp',
+  'arc-dark': '/border/arc-dark.webp',
+  'macos-dark': '/border/macos-black.webp',
+  'macos-light': '/border/macos-black.webp',
+  'windows-dark': '/border/macos-black.webp',
+  'windows-light': '/border/macos-black.webp',
+  'photograph': '/border/photograph.webp',
+};
+
 interface FrameRendererProps {
   frame: FrameConfig;
   showFrame: boolean;
@@ -29,6 +40,39 @@ interface FrameRendererProps {
   has3DTransform: boolean;
 }
 
+function ImageFrame({ 
+  imageUrl, 
+  width, 
+  height, 
+  cornerRadius 
+}: { 
+  imageUrl: string; 
+  width: number; 
+  height: number; 
+  cornerRadius: number;
+}) {
+  const [image, setImage] = useState<HTMLImageElement | null>(null);
+
+  useEffect(() => {
+    const img = new window.Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => setImage(img);
+    img.onerror = () => setImage(null);
+    img.src = imageUrl;
+  }, [imageUrl]);
+
+  if (!image) return null;
+
+  return (
+    <KonvaImage
+      image={image}
+      width={width}
+      height={height}
+      cornerRadius={cornerRadius}
+    />
+  );
+}
+
 export function FrameRenderer({
   frame,
   showFrame,
@@ -48,309 +92,23 @@ export function FrameRenderer({
     return null;
   }
 
-  switch (frame.type) {
-    case 'solid':
-      return (
-        <Rect
-          width={framedW}
-          height={framedH}
-          fill={frame.color}
-          cornerRadius={screenshotRadius}
-          {...shadowProps}
-        />
-      );
-
-    case 'glassy':
-      return (
-        <Rect
-          x={frameOffset + windowPadding}
-          y={frameOffset + windowPadding + windowHeader}
-          width={imageScaledW}
-          height={imageScaledH}
-          fill="rgba(255, 255, 255, 0.15)"
-          stroke="rgba(255, 255, 255, 0.3)"
-          strokeWidth={frame.width * 4 + 6}
-          cornerRadius={screenshotRadius}
-          shadowForStrokeEnabled
-          {...shadowProps}
-        />
-      );
-
-    case 'ruler':
-      return (
-        <Group>
-          <Rect
-            width={framedW}
-            height={framedH}
-            cornerRadius={screenshotRadius}
-            fill="rgba(0,0,0,0.3)"
-            shadowForStrokeEnabled
-            {...shadowProps}
-          />
-          <Rect
-            width={framedW - 1}
-            height={framedH - 1}
-            x={1}
-            y={1}
-            stroke="rgba(255, 255, 255, 0.9)"
-            strokeWidth={1}
-            cornerRadius={Math.max(0, screenshotRadius - 2)}
-          />
-          <Group>
-            <Rect
-              width={framedW}
-              height={framedH}
-              fill="rgba(255, 255, 255, 0.2)"
-              cornerRadius={screenshotRadius}
-            />
-            <Group globalCompositeOperation="source-atop">
-              {Array.from({
-                length: Math.floor(framedW / 10) - 1,
-              }).map((_, i) => (
-                <Rect
-                  key={`t-${i}`}
-                  x={i * 10}
-                  y={1}
-                  width={2}
-                  height={(i + 1) % 5 === 0 ? 10 : 5}
-                  fill="rgba(0, 0, 0, 0.8)"
-                />
-              ))}
-              {Array.from({
-                length: Math.floor(framedH / 10) - 1,
-              }).map((_, i) => (
-                <Rect
-                  key={`l-${i}`}
-                  x={1}
-                  y={i * 10}
-                  width={(i + 1) % 5 === 0 ? 10 : 5}
-                  height={2}
-                  fill="rgba(0, 0, 0, 0.8)"
-                />
-              ))}
-              {Array.from({
-                length: Math.floor(framedH / 10) - 1,
-              }).map((_, i) => (
-                <Rect
-                  key={`r-${i}`}
-                  x={framedW - 1}
-                  y={i * 10}
-                  width={(i + 1) % 5 === 0 ? -10 : -5}
-                  height={2}
-                  fill="rgba(0, 0, 0, 0.8)"
-                />
-              ))}
-              {Array.from({
-                length: Math.floor(framedW / 10) - 1,
-              }).map((_, i) => (
-                <Rect
-                  key={`b-${i}`}
-                  x={i * 10}
-                  y={framedH - 1}
-                  width={2}
-                  height={(i + 1) % 5 === 0 ? -10 : -5}
-                  fill="rgba(0, 0, 0, 0.8)"
-                />
-              ))}
-            </Group>
-          </Group>
-          <Rect
-            width={framedW}
-            height={framedH}
-            stroke="rgba(0, 0, 0, 0.15)"
-            strokeWidth={1}
-            cornerRadius={screenshotRadius}
-          />
-        </Group>
-      );
-
-    case 'infinite-mirror':
-      return (
-        <>
-          {Array.from({ length: 4 }).map((_, i) => (
-            <Rect
-              key={i}
-              width={framedW + i * 15}
-              height={framedH + i * 15}
-              x={-i * 7.5}
-              y={-i * 7.5}
-              stroke={frame.color}
-              strokeWidth={4}
-              cornerRadius={screenshotRadius + i * 5}
-              opacity={0.3 - i * 0.07}
-              {...(i === 0
-                ? { ...shadowProps, shadowForStrokeEnabled: true }
-                : {})}
-            />
-          ))}
-        </>
-      );
-
-    case 'eclipse':
-      return (
-        <Group>
-          <Rect
-            width={framedW}
-            height={framedH}
-            fill={frame.color}
-            cornerRadius={screenshotRadius + eclipseBorder}
-            {...shadowProps}
-          />
-          <Rect
-            globalCompositeOperation="destination-out"
-            x={eclipseBorder}
-            y={eclipseBorder}
-            width={framedW - eclipseBorder * 2}
-            height={framedH - eclipseBorder * 2}
-            fill="black"
-            cornerRadius={screenshotRadius}
-          />
-        </Group>
-      );
-
-    case 'stack':
-      return (
-        <>
-          <Rect
-            width={framedW / 1.2}
-            height={framedH / 5}
-            x={(framedW - framedW / 1.2) / 2}
-            y={-40}
-            fill={frame.theme === 'dark' ? '#444444' : '#f5f5f5'}
-            cornerRadius={screenshotRadius}
-            opacity={1}
-            {...shadowProps}
-          />
-          <Rect
-            width={framedW / 1.1}
-            height={framedH / 5}
-            x={(framedW - framedW / 1.1) / 2}
-            y={-20}
-            fill={frame.theme === 'dark' ? '#2a2a2a' : '#f0f0f0'}
-            cornerRadius={screenshotRadius}
-            opacity={1}
-          />
-          <Rect
-            width={framedW}
-            height={framedH}
-            fill={frame.theme === 'dark' ? '#555555' : '#e8e8e8'}
-            cornerRadius={screenshotRadius}
-            {...shadowProps}
-          />
-        </>
-      );
-
-    case 'window':
-      return (
-        <>
-          <Rect
-            width={framedW}
-            height={framedH}
-            fill={frame.theme === 'dark' ? '#2f2f2f' : '#fefefe'}
-            cornerRadius={[
-              screenshotRadius / 2,
-              screenshotRadius / 2,
-              screenshotRadius,
-              screenshotRadius,
-            ]}
-            {...shadowProps}
-          />
-          <Rect
-            width={framedW}
-            height={windowHeader}
-            fill={frame.theme === 'dark' ? '#4a4a4a' : '#e2e2e2'}
-            cornerRadius={[
-              screenshotRadius,
-              screenshotRadius,
-              0,
-              0,
-            ]}
-          />
-          <Circle x={25} y={20} radius={10} fill="#ff5f57" />
-          <Circle x={50} y={20} radius={10} fill="#febc2e" />
-          <Circle x={75} y={20} radius={10} fill="#28c840" />
-          <Text
-            text={frame.title || ''}
-            x={0}
-            y={0}
-            width={framedW}
-            height={windowHeader}
-            align="center"
-            verticalAlign="middle"
-            fill={frame.theme === 'dark' ? '#f0f0f0' : '#4f4f4f'}
-            fontSize={16}
-          />
-        </>
-      );
-
-    case 'dotted':
-      return (
-        <Rect
-          width={framedW}
-          height={framedH}
-          stroke={frame.color}
-          strokeWidth={frame.width}
-          dash={[frame.width * 2, frame.width * 1.2]}
-          cornerRadius={screenshotRadius}
-        />
-      );
+  if (frame.type === 'arc-light' || frame.type === 'arc-dark') {
+    return null;
+  }
 
-    case 'focus':
-      return (
-        <Group>
-          <Path
-            data={`M ${frameOffset}, ${
-              frameOffset + frame.width * 1.5
-            } Q ${frameOffset}, ${frameOffset} ${
-              frameOffset + frame.width * 1.5
-            }, ${frameOffset}`}
-            stroke={frame.color}
-            strokeWidth={frame.width}
-            lineCap="round"
-            {...shadowProps}
-          />
-          <Path
-            data={`M ${frameOffset + imageScaledW}, ${
-              frameOffset + imageScaledH - frame.width * 1.5
-            } Q ${frameOffset + imageScaledW}, ${
-              frameOffset + imageScaledH
-            } ${frameOffset + imageScaledW - frame.width * 1.5}, ${
-              frameOffset + imageScaledH
-            }`}
-            stroke={frame.color}
-            strokeWidth={frame.width}
-            lineCap="round"
-            {...shadowProps}
-          />
-          <Path
-            data={`M ${
-              frameOffset + imageScaledW - frame.width * 1.5
-            }, ${frameOffset} Q ${
-              frameOffset + imageScaledW
-            }, ${frameOffset} ${frameOffset + imageScaledW}, ${
-              frameOffset + frame.width * 1.5
-            }`}
-            stroke={frame.color}
-            strokeWidth={frame.width}
-            lineCap="round"
-            {...shadowProps}
-          />
-          <Path
-            data={`M ${frameOffset + frame.width * 1.5}, ${
-              frameOffset + imageScaledH
-            } Q ${frameOffset}, ${
-              frameOffset + imageScaledH
-            } ${frameOffset}, ${
-              frameOffset + imageScaledH - frame.width * 1.5
-            }`}
-            stroke={frame.color}
-            strokeWidth={frame.width}
-            lineCap="round"
-            {...shadowProps}
-          />
-        </Group>
-      );
+  const imageUrl = borderImageMap[frame.type];
+  if (imageUrl) {
+    return (
+      <ImageFrame
+        imageUrl={imageUrl}
+        width={framedW}
+        height={framedH}
+        cornerRadius={screenshotRadius}
+      />
+    );
+  }
 
+  switch (frame.type) {
     default:
       return null;
   }
diff --git a/components/canvas/layers/MainImageLayer.tsx b/components/canvas/layers/MainImageLayer.tsx
index 340ecf4..da0803f 100644
--- a/components/canvas/layers/MainImageLayer.tsx
+++ b/components/canvas/layers/MainImageLayer.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Layer, Group, Image as KonvaImage, Transformer } from 'react-konva';
+import { Layer, Group, Image as KonvaImage, Rect, Transformer } from 'react-konva';
 import Konva from 'konva';
 import { useRef, useEffect } from 'react';
 import { FrameRenderer } from '../frames/FrameRenderer';
@@ -147,13 +147,7 @@ export function MainImageLayer({
           width={imageScaledW}
           height={imageScaledH}
           opacity={has3DTransform ? 0 : imageOpacity}
-          cornerRadius={
-            showFrame && frame.type === 'window'
-              ? [0, 0, screenshot.radius, screenshot.radius]
-              : showFrame && frame.type === 'ruler'
-              ? screenshot.radius * 0.8
-              : screenshot.radius
-          }
+          cornerRadius={frame.type === 'arc-light' || frame.type === 'arc-dark' ? 8 : screenshot.radius}
           imageSmoothingEnabled={false}
           draggable={false}
           onClick={(e) => {
@@ -182,6 +176,19 @@ export function MainImageLayer({
           }}
           {...shadowProps}
         />
+        {!has3DTransform && showFrame && (frame.type === 'arc-light' || frame.type === 'arc-dark') && (
+          <Rect
+            x={frameOffset + windowPadding}
+            y={frameOffset + windowPadding + windowHeader}
+            width={imageScaledW}
+            height={imageScaledH}
+            cornerRadius={8}
+            stroke={frame.type === 'arc-light' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.7)'}
+            strokeWidth={6}
+            fillEnabled={false}
+            listening={false}
+          />
+        )}
       </Group>
       <Transformer
         ref={mainImageTransformerRef}
diff --git a/components/canvas/overlays/Perspective3DOverlay.tsx b/components/canvas/overlays/Perspective3DOverlay.tsx
index 97d5fe9..2d78642 100644
--- a/components/canvas/overlays/Perspective3DOverlay.tsx
+++ b/components/canvas/overlays/Perspective3DOverlay.tsx
@@ -171,16 +171,18 @@ export function Perspective3DOverlay({
               position: 'absolute',
               left: `${frameOffset + windowPadding}px`,
               top: `${frameOffset + windowPadding + windowHeader}px`,
-              width: `${imageScaledW}px`,
+              width: frame.type === 'arc-light' || frame.type === 'arc-dark' ? '100%' : `${imageScaledW}px`,
               height: `${imageScaledH}px`,
               objectFit: 'cover',
               opacity: imageOpacity,
-              borderRadius:
-                showFrame && frame.type === 'window'
-                  ? `0 0 ${screenshot.radius}px ${screenshot.radius}px`
-                  : showFrame && frame.type === 'ruler'
-                  ? `${screenshot.radius * 0.8}px`
-                  : `${screenshot.radius}px`,
+              borderRadius: frame.type === 'arc-light' || frame.type === 'arc-dark' ? '8px' : `${screenshot.radius}px`,
+              border: frame.type === 'arc-light' 
+                ? '6px solid rgba(255, 255, 255, 0.5)' 
+                : frame.type === 'arc-dark' 
+                ? '6px solid rgba(0, 0, 0, 0.7)' 
+                : 'none',
+              boxSizing: 'border-box',
+              overflow: 'hidden',
             }}
           />
         </div>
diff --git a/components/controls/BorderControls.tsx b/components/controls/BorderControls.tsx
index 93ad1fe..a092ae3 100644
--- a/components/controls/BorderControls.tsx
+++ b/components/controls/BorderControls.tsx
@@ -1,456 +1,68 @@
 'use client'
 
 import * as React from 'react'
-
 import { useImageStore } from '@/lib/store'
 
-import { Slider } from '@/components/ui/slider'
-
-import { Input } from '@/components/ui/input'
-
-import { useState, useEffect } from 'react'
-
-const isValidHex = (color: string) => /^#[0-9A-F]{6}$/i.test(color)
-
-function ColorInput({
-
-  value,
-
-  onChange,
-
-  className = '',
-
-}: {
-
-  value: string
-
-  onChange: (value: string) => void
-
-  className?: string
-
-}) {
-
-  const [localValue, setLocalValue] = useState(value)
-
-  useEffect(() => {
-
-    setLocalValue(value)
-
-  }, [value])
-
-  const handleBlur = () => {
-
-    if (isValidHex(localValue)) {
-
-      onChange(localValue)
-
-    } else {
-
-      setLocalValue(value)
-
-    }
-
-  }
-
-  return (
-
-    <Input
-
-      type="text"
-
-      value={localValue}
-
-      onChange={(e) => setLocalValue(e.target.value)}
-
-      onBlur={handleBlur}
-
-      className={className}
-
-    />
-
-  )
-
-}
-
-const frameOptions = [
-
-  { value: 'none', label: 'None' },
-
-  { value: 'solid', label: 'Solid' },
-
-  { value: 'glassy', label: 'Glassy' },
-
-  { value: 'infinite-mirror', label: 'Mirror' },
-
-  { value: 'window-light', label: 'Window' },
-
-  { value: 'window-dark', label: 'Dark Window' },
-
-  { value: 'stack-light', label: 'Stack' },
-
-  { value: 'stack-dark', label: 'Dark Stack' },
-
-  { value: 'ruler', label: 'Ruler' },
-
-  { value: 'eclipse', label: 'Neo' },
-
-  { value: 'dotted', label: 'Dotted' },
-
-  { value: 'focus', label: 'Focus' },
-
+const borderOptions = [
+  { value: 'none', label: 'None', image: '/border/none.webp' },
+  { value: 'arc-light', label: 'Arc Light', image: '/border/arc-light.webp' },
+  { value: 'arc-dark', label: 'Arc Dark', image: '/border/arc-dark.webp' },
+  { value: 'macos-dark', label: 'macOS Dark', image: '/border/macos-black.webp' },
+  { value: 'macos-light', label: 'macOS Light', image: '/border/macos-black.webp' },
+  { value: 'windows-dark', label: 'Windows Dark', image: '/border/macos-black.webp' },
+  { value: 'windows-light', label: 'Windows Light', image: '/border/macos-black.webp' },
+  { value: 'photograph', label: 'Photograph', image: '/border/photograph.webp' },
 ] as const
 
-type FrameType = (typeof frameOptions)[number]['value']
-
-function FramePreview({
-
-  type,
-
-  selected,
-
-  onSelect,
-
-  children,
-
-}: {
-
-  type: FrameType
-
-  selected: boolean
-
-  onSelect: () => void
-
-  children: React.ReactNode
-
-}) {
-
-  return (
-
-    <div className="flex flex-col items-center gap-2">
-
-      <button
-
-        onClick={onSelect}
-
-        aria-selected={selected}
-
-        className="flex h-14 w-full cursor-pointer items-center justify-center rounded-lg border-2 border-border/50 bg-secondary transition-colors duration-200 aria-selected:border-primary hover:bg-secondary/80 hover:border-border"
-
-        title={type}
-
-      >
-
-        <div className="relative h-8 w-10">{children}</div>
-
-      </button>
-
-      <div className="text-xs text-muted-foreground">{frameOptions.find((f) => f.value === type)?.label}</div>
-
-    </div>
-
-  )
-
-}
-
-const framePreviews: Record<FrameType, React.ReactNode> = {
-
-  none: <div className="size-full rounded-md border-2 border-dashed border-muted-foreground/50" />,
-
-  solid: <div className="size-full rounded-md border-4 border-primary/80" />,
-
-  glassy: <div className="size-full rounded-md border-2 border-foreground/20 bg-background/10 backdrop-blur-sm" />,
-
-  'window-light': (
-
-    <div className="flex size-full flex-col rounded-md border-2 border-border bg-white">
-
-      <div className="flex h-2 items-center gap-0.5 rounded-t-sm bg-muted px-1">
-
-        <div className="size-1 rounded-full bg-red-400" />
-
-        <div className="size-1 rounded-full bg-yellow-400" />
-
-        <div className="size-1 rounded-full bg-green-400" />
-
-      </div>
-
-    </div>
-
-  ),
-
-  'window-dark': (
-
-    <div className="flex size-full flex-col rounded-md border-2 border-neutral-700 bg-black/80">
-
-      <div className="flex h-2 items-center gap-0.5 rounded-t-sm bg-neutral-800 px-1">
-
-        <div className="size-1 rounded-full bg-red-500" />
-
-        <div className="size-1 rounded-full bg-yellow-500" />
-
-        <div className="size-1 rounded-full bg-green-500" />
-
-      </div>
-
-    </div>
-
-  ),
-
-  'infinite-mirror': (
-
-    <div className="size-full rounded-md border-2 border-primary/80 p-1">
-
-      <div className="size-full rounded-[3px] border-2 border-primary/60 p-0.5">
-
-        <div className="size-full rounded-[2px] border-2 border-primary/40" />
-
-      </div>
-
-    </div>
-
-  ),
-
-  ruler: (
-
-    <div className="relative size-full overflow-hidden rounded-sm bg-amber-400/80">
-
-      <div className="absolute left-0 top-0 h-full w-px bg-black/70" />
-
-      <div className="absolute left-0 top-0 h-px w-full bg-black/70" />
-
-      <div className="absolute left-2 top-0 h-1 w-px bg-black/70" />
-
-      <div className="absolute left-4 top-0 h-1.5 w-px bg-black/70" />
-
-      <div className="absolute left-6 top-0 h-1 w-px bg-black/70" />
-
-      <div className="absolute left-8 top-0 h-2 w-px bg-black/70" />
-
-      <div className="absolute top-2 left-0 w-1 h-px bg-black/70" />
-
-      <div className="absolute top-4 left-0 w-1.5 h-px bg-black/70" />
-
-      <div className="absolute top-6 left-0 w-1 h-px bg-black/70" />
-
-    </div>
-
-  ),
-
-  eclipse: <div className="size-full rounded-full bg-black" />,
-
-  'stack-light': (
-
-    <div className="relative size-full">
-
-      <div className="absolute left-0 top-0 h-5/6 w-5/6 rounded-md border-2 border-border bg-white" />
-
-      <div className="absolute bottom-0 right-0 h-5/6 w-5/6 rounded-md border-2 border-border/80 bg-white/80" />
-
-    </div>
-
-  ),
-
-  'stack-dark': (
-
-    <div className="relative size-full">
-
-      <div className="absolute left-0 top-0 h-5/6 w-5/6 rounded-md border-2 border-neutral-700 bg-black/80" />
-
-      <div className="absolute bottom-0 right-0 h-5/6 w-5/6 rounded-md border-2 border-neutral-600/80 bg-black/60" />
-
-    </div>
-
-  ),
-
-  dotted: <div className="size-full rounded-md border-2 border-dashed border-primary/80" />,
-
-  focus: (
-
-    <div className="relative size-full">
-
-      <div className="absolute -top-0.5 -left-0.5 h-3 w-3 rounded-tl-md border-t-2 border-l-2 border-primary/80" />
-
-      <div className="absolute -top-0.5 -right-0.5 h-3 w-3 rounded-tr-md border-t-2 border-r-2 border-primary/80" />
-
-      <div className="absolute -bottom-0.5 -left-0.5 h-3 w-3 rounded-bl-md border-b-2 border-l-2 border-primary/80" />
-
-      <div className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-br-md border-b-2 border-r-2 border-primary/80" />
-
-    </div>
-
-  ),
-
-}
+type BorderType = (typeof borderOptions)[number]['value']
 
 export function BorderControls() {
-
   const { imageBorder, setImageBorder } = useImageStore()
 
-  const handleSelect = (value: FrameType) => {
-
-    if (value.startsWith('window-') || value.startsWith('stack-')) {
-
-      const [type, theme] = value.split('-')
-
-      setImageBorder({ type: type as 'window' | 'stack', theme: theme as 'light' | 'dark', enabled: true })
-
-    } else {
-
-      setImageBorder({ type: value as Exclude<FrameType, `${'window' | 'stack'}-${'light' | 'dark'}`>, enabled: true })
-
-    }
-
+  const handleSelect = (value: BorderType) => {
+    setImageBorder({ type: value, enabled: value !== 'none' })
   }
 
-  const isSelected = (value: FrameType) => {
-
-    if (value.startsWith('window-') || value.startsWith('stack-')) {
-
-      const [type, theme] = value.split('-')
-
-      return imageBorder.type === type && imageBorder.theme === theme
-
-    }
-
+  const isSelected = (value: BorderType) => {
     return imageBorder.type === value
-
   }
 
   return (
     <div className="space-y-4">
       <div className="text-sm font-semibold text-foreground">Frame</div>
       <div className="space-y-4 pt-2">
-
-        <div>
-
-          <label className="mb-2 block text-xs text-muted-foreground">Style</label>
-
-          <div className="grid grid-cols-3 gap-x-2 gap-y-4">
-
-            {frameOptions.map(({ value }) => (
-
-              <FramePreview
-
-                key={value}
-
-                type={value}
-
-                selected={isSelected(value)}
-
-                onSelect={() => handleSelect(value)}
-
-              >
-
-                {framePreviews[value]}
-
-              </FramePreview>
-
-            ))}
-
-          </div>
-
-        </div>
-
-        {['solid', 'dotted', 'infinite-mirror', 'eclipse', 'focus', 'ruler'].includes(imageBorder.type) && (
-
-          <div>
-
-            <label className="text-xs text-muted-foreground mb-2 block">Color</label>
-
-            <div className="flex items-center gap-2">
-
-              <div
-
-                className="relative size-9 shrink-0 overflow-hidden rounded-lg"
-
-                style={{ backgroundColor: imageBorder.color }}
-
-              >
-
-                <input
-
-                  type="color"
-
-                  value={imageBorder.color}
-
-                  onChange={(e) => setImageBorder({ color: e.target.value, enabled: true })}
-
-                  className="absolute inset-0 size-full cursor-pointer opacity-0"
-
+        <div className="flex overflow-x-scroll space-x-4 select-none pb-2 -mx-1 px-1">
+          {borderOptions.map((option) => (
+            <button
+              key={option.value}
+              onClick={() => handleSelect(option.value)}
+              className={`shrink-0 flex flex-col items-center transition-all ${
+                isSelected(option.value)
+                  ? 'opacity-100 scale-105'
+                  : 'opacity-60 hover:opacity-80'
+              }`}
+            >
+              <div className="w-[80px] p-1 h-full flex flex-col items-center">
+                <img
+                  loading="lazy"
+                  src={option.image}
+                  alt={option.label}
+                  className="h-auto object-contain mb-2 w-full"
                 />
-
+                <p
+                  className={`text-center text-xs ${
+                    option.value === 'photograph'
+                      ? 'text-gray-950 dark:text-gray-50'
+                      : 'text-gray-400'
+                  }`}
+                >
+                  {option.label}
+                </p>
               </div>
-
-              <ColorInput
-
-                value={imageBorder.color}
-
-                onChange={(color) => setImageBorder({ color, enabled: true })}
-
-              />
-
-            </div>
-
-          </div>
-
-        )}
-
-        {['solid', 'glassy', 'dotted', 'eclipse', 'ruler', 'focus'].includes(imageBorder.type) && (
-
-          <div className="p-3 rounded-lg bg-muted/50 border border-border/50">
-            <Slider
-              value={[imageBorder.width]}
-              onValueChange={([value]) => setImageBorder({ width: value })}
-              min={1}
-              max={50}
-              step={0.5}
-              label="Width"
-              valueDisplay={`${imageBorder.width}px`}
-            />
-          </div>
-
-        )}
-
-        {imageBorder.type === 'window' && (
-
-          <>
-
-            <div>
-
-              <label className="text-xs text-muted-foreground mb-2 block">Title</label>
-
-              <Input
-
-                type="text"
-
-                value={imageBorder.title || ''}
-
-                onChange={(e) => setImageBorder({ title: e.target.value, enabled: true })}
-
-              />
-
-            </div>
-
-            <div className="p-3 rounded-lg bg-muted/50 border border-border/50">
-              <Slider
-                value={[imageBorder.padding || 20]}
-                onValueChange={([value]) => setImageBorder({ padding: value })}
-                min={0}
-                max={100}
-                step={1}
-                label="Padding"
-                valueDisplay={`${imageBorder.padding || 20}px`}
-              />
-            </div>
-
-          </>
-
-        )}
-
+            </button>
+          ))}
+        </div>
       </div>
-
     </div>
-
   )
-
 }
diff --git a/lib/store/index.ts b/lib/store/index.ts
index 7896443..fbd47c0 100644
--- a/lib/store/index.ts
+++ b/lib/store/index.ts
@@ -49,7 +49,7 @@ export interface ImageBorder {
   enabled: boolean
   width: number
   color: string
-  type: 'none' | 'solid' | 'glassy' | 'infinite-mirror' | 'window' | 'stack' | 'ruler' | 'eclipse' | 'dotted' | 'focus'
+  type: 'none' | 'arc-light' | 'arc-dark' | 'macos-dark' | 'macos-light' | 'windows-dark' | 'windows-light' | 'photograph'
   theme?: 'light' | 'dark'
   padding?: number
   title?: string
@@ -157,7 +157,7 @@ export interface EditorState {
   // Frame state (same as imageBorder)
   frame: {
     enabled: boolean
-    type: 'none' | 'solid' | 'glassy' | 'infinite-mirror' | 'window' | 'stack' | 'ruler' | 'eclipse' | 'dotted' | 'focus'
+    type: 'none' | 'arc-light' | 'arc-dark' | 'macos-dark' | 'macos-light' | 'windows-dark' | 'windows-light' | 'photograph'
     width: number
     color: string
     theme?: 'light' | 'dark'
@@ -509,7 +509,7 @@ export const useImageStore = create<ImageState>((set, get) => ({
     enabled: false,
     width: 2,
     color: '#000000',
-    type: 'none',
+    type: 'none' as const,
     theme: 'light',
     padding: 20,
     title: '',
diff --git a/public/border/arc-dark.webp b/public/border/arc-dark.webp
new file mode 100644
index 0000000..d7de3fd
Binary files /dev/null and b/public/border/arc-dark.webp differ
diff --git a/public/border/arc-light.webp b/public/border/arc-light.webp
new file mode 100644
index 0000000..7c955a5
Binary files /dev/null and b/public/border/arc-light.webp differ
diff --git a/public/border/macos-black.webp b/public/border/macos-black.webp
new file mode 100644
index 0000000..5e9836e
Binary files /dev/null and b/public/border/macos-black.webp differ
diff --git a/public/border/none.webp b/public/border/none.webp
new file mode 100644
index 0000000..29fb9dd
Binary files /dev/null and b/public/border/none.webp differ
diff --git a/public/border/photograph.webp b/public/border/photograph.webp
new file mode 100644
index 0000000..120266c
Binary files /dev/null and b/public/border/photograph.webp differ