diff --git a/package.json b/package.json
index 8e07dfa..875941f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neynar/react",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "description": "Farcaster frontend component library powered by Neynar",
   "main": "dist/bundle.cjs.js",
   "module": "dist/bundle.es.js",
diff --git a/src/components/atoms/icons/ExternalLinkIcon.tsx b/src/components/atoms/icons/ExternalLinkIcon.tsx
index c1921bd..7fa2248 100644
--- a/src/components/atoms/icons/ExternalLinkIcon.tsx
+++ b/src/components/atoms/icons/ExternalLinkIcon.tsx
@@ -1,37 +1,10 @@
 import React from 'react';
 
-interface ExternalLinkIconProps {
-  width?: number;
-  height?: number;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const ExternalLinkIcon: React.FC<ExternalLinkIconProps> = ({
-  width = 12,
-  height = 12,
-  className = 'ml-1 text-faint',
-  style = {},
-}) => {
+const ExternalLinkIcon = () => {
   return (
-    <svg
-      aria-hidden="true"
-      focusable="false"
-      role="img"
-      viewBox="0 0 16 16"
-      width={width}
-      height={height}
-      fill="currentColor"
-      className={className}
-      style={{
-        display: 'inline-block',
-        userSelect: 'none',
-        verticalAlign: 'text-bottom',
-        overflow: 'visible',
-        ...style,
-      }}
-    >
-      <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path>
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M5.85855 0.555664H8.31281M8.31281 0.555664V2.73754M8.31281 0.555664L4.31445 4.11122" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.31445 1H1.31445C0.762168 1 0.314453 1.44772 0.314453 2V8C0.314453 8.55228 0.762168 9 1.31445 9H7.31445C7.86674 9 8.31445 8.55228 8.31445 8V6H7.31445V8H1.31445V2H3.31445V1Z" fill="#FFFFFF"/>
     </svg>
   );
 };
diff --git a/src/components/atoms/icons/LightningIcon.tsx b/src/components/atoms/icons/LightningIcon.tsx
new file mode 100644
index 0000000..da43248
--- /dev/null
+++ b/src/components/atoms/icons/LightningIcon.tsx
@@ -0,0 +1,7 @@
+export const LightningIcon = () => {
+    return(
+        <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M5.01451 12.5187L4.96833 12.5174L4.93914 12.522C4.93113 12.516 4.92402 12.5087 4.91808 12.5005L4.51231 12.7926L4.91808 12.5005C4.9049 12.4822 4.89824 12.46 4.89913 12.4375L4.89953 12.4275V12.4176V8.81194V8.31194H4.39953H1.8876H1.88753C1.76188 8.31196 1.63853 8.27825 1.53036 8.21433C1.42218 8.1504 1.33315 8.05862 1.27256 7.94854C1.21196 7.83847 1.18203 7.71415 1.18588 7.58856C1.18973 7.46301 1.2272 7.34079 1.29438 7.23466C1.2944 7.23463 1.29442 7.23459 1.29444 7.23456L4.90001 1.54377L4.90567 1.53483L4.91095 1.52567C4.92227 1.50601 4.93988 1.49074 4.96094 1.48232C4.982 1.47389 5.00528 1.47281 5.02703 1.47924L5.02912 1.47985C5.05077 1.48614 5.06969 1.4995 5.08286 1.5178C5.09603 1.53609 5.1027 1.55827 5.1018 1.58079L5.10141 1.59073V1.60067V5.20631V5.70631H5.60141H8.11333H8.1134C8.23905 5.70629 8.3624 5.74 8.47058 5.80392C8.57875 5.86784 8.66778 5.95963 8.72838 6.06971C8.78897 6.17978 8.81891 6.3041 8.81506 6.42969C8.81121 6.55528 8.77371 6.67753 8.70649 6.78369L5.10232 12.4723C5.10219 12.4725 5.10205 12.4727 5.10191 12.4729C5.09255 12.4873 5.07969 12.499 5.06452 12.507C5.04914 12.5152 5.03191 12.5192 5.01451 12.5187Z" stroke="#FFFFFF"/>
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/src/components/molecules/FrameCard.tsx b/src/components/molecules/FrameCard.tsx
index 8b292bc..508e0d9 100644
--- a/src/components/molecules/FrameCard.tsx
+++ b/src/components/molecules/FrameCard.tsx
@@ -1,89 +1,144 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { styled } from "@pigment-css/react";
 import ExternalLinkIcon from "../atoms/icons/ExternalLinkIcon";
 import { NeynarFrame } from "../organisms/NeynarFrameCard";
+import { LightningIcon } from "../atoms/icons/LightningIcon";
 
 export type FrameCardProps = {
-  frames: NeynarFrame[];
+  frame: NeynarFrame | null;
   onFrameBtnPress: (
     btnIndex: number,
     localFrame: NeynarFrame,
     setLocalFrame: React.Dispatch<React.SetStateAction<NeynarFrame>>,
     inputValue?: string
-  ) => void;
+  ) => Promise<void>;
 };
 
 const FrameButton = styled.button({
-  border: "1px solid rgba(0, 0, 0, 0.75)",
-  borderRadius: "12px",
-  padding: "4px 16px",
-  fontSize: "12px",
+  border: "1px solid rgba(255, 255, 255, 0.2)",
+  borderRadius: "8px",
+  padding: "6px 16px",
+  fontSize: "14px",
   display: "flex",
   alignItems: "center",
+  justifyContent: "center",
   gap: "8px",
-  '@media (min-width: 768px)': {
-    fontSize: "16px",
-  },
-  cursor: 'pointer'
+  cursor: 'pointer',
+  backgroundColor: "#1E1E1E",
+  color: "white",
+  flex: "1 1 0",
+  minWidth: "0",
+  '&:hover': {
+    backgroundColor: "#2E2E2E",
+  }
 });
 
 const FrameContainer = styled.div({
-  border: "0.5px solid rgba(128, 128, 128, 0.7)",
+  border: "1px solid rgba(255, 255, 255, 0.1)",
   margin: "8px 0",
-  padding: "16px",
-  backgroundColor: "transparent",
+  backgroundColor: "#121212",
   borderRadius: "12px",
   display: "flex",
   flexDirection: "column",
-  alignItems: "center",
+  alignItems: "right",
+  width: "100%",
+  maxWidth: "400px",
+  position: "relative",
 });
 
 const ButtonContainer = styled.div({
-  margin: "8px 0",
+  margin: "7px",
   display: "flex",
-  flexDirection: "row",
+  flexWrap: "wrap",
   gap: "8px",
-  justifyContent: "center",
+  width: "97%",
 });
 
 const FrameImage = styled.img({
   width: "100%",
-  height: "auto",
-  borderRadius: "8px",
+  borderTopLeftRadius: "8px",
+  borderTopRightRadius: "8px",
 });
 
 const FrameDomain = styled.div({
   fontSize: "12px",
-  color: "#aaa",
-  marginTop: "4px",
-  textAlign: "right",
+  color: "#888",
+  marginTop: "auto",
   width: "100%",
+  padding: "4px 0"
 });
 
 const FlexContainer = styled.div({
   display: "flex",
   flexDirection: "column",
   gap: "4px",
+  width: "100%",
 });
 
 const InputField = styled.input({
-  border: "1px solid rgba(0, 0, 0, 0.75)",
-  borderRadius: "12px",
+  border: "1px solid rgba(255, 255, 255, 0.2)",
+  borderRadius: "8px",
   padding: "8px",
   marginTop: "8px",
-  width: "80%",
-  fontSize: "16px",
-  '@media (min-width: 768px)': {
-    fontSize: "16px",
-  },
+  width: "100%",
+  fontSize: "14px",
+  backgroundColor: "#1E1E1E",
+  color: "white",
 });
 
-function CastFrameBtn({ number, text, actionType, target, frameUrl, handleOnClick }: any) {
+const SpinnerOverlay = styled.div({
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(0, 0, 0, 0.5)",
+  borderRadius: "12px",
+  zIndex: 10,
+});
+
+const FrameSpinnerSVG = () => {
+  const spinnerRef = useRef<SVGSVGElement>(null);
+
+  useEffect(() => {
+    if (spinnerRef.current) {
+      let rotation = 0;
+      const animate = () => {
+        rotation += 6;
+        if (spinnerRef.current) {
+          spinnerRef.current.style.transform = `rotate(${rotation}deg)`;
+        }
+        requestAnimationFrame(animate);
+      };
+      requestAnimationFrame(animate);
+    }
+  }, []);
+
+  return (
+    <svg
+      ref={spinnerRef}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      className="size-6 text-white"
+      style={{ width: '24px', height: '24px' }}
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+    </svg>
+  );
+};
 
+function CastFrameBtn({ number, text, actionType, target, frameUrl, handleOnClick }: any) {
   return (
     <FrameButton onClick={() => handleOnClick(number)}>
       {text}
       {(actionType === "link" || actionType === "post_redirect" || actionType === "mint") && <ExternalLinkIcon />}
+      {actionType === "tx" && <LightningIcon />}
     </FrameButton>
   )
 }
@@ -91,6 +146,7 @@ function CastFrameBtn({ number, text, actionType, target, frameUrl, handleOnClic
 function CastFrame({ frame, onFrameBtnPress }: { frame: NeynarFrame, onFrameBtnPress: FrameCardProps['onFrameBtnPress'] }) {
   const [localFrame, setLocalFrame] = useState<NeynarFrame>(frame);
   const [inputValue, setInputValue] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
 
   const renderFrameButtons = () => {
     const buttons = localFrame.buttons.map((btn) => (
@@ -101,7 +157,11 @@ function CastFrame({ frame, onFrameBtnPress }: { frame: NeynarFrame, onFrameBtnP
         actionType={btn.action_type}
         target={btn.target}
         frameUrl={frame.frames_url}
-        handleOnClick={(btnIndex: number) => onFrameBtnPress(btnIndex, localFrame, setLocalFrame, inputValue)}
+        handleOnClick={(btnIndex: number) => {
+          setLoading(true);
+          onFrameBtnPress(btnIndex, localFrame, setLocalFrame, inputValue)
+            .finally(() => setLoading(false));
+        }}
       />
     ));
     return <ButtonContainer>{buttons}</ButtonContainer>;
@@ -119,13 +179,27 @@ function CastFrame({ frame, onFrameBtnPress }: { frame: NeynarFrame, onFrameBtnP
     }
   };
 
+  const getImageStyle = () => {
+    switch (localFrame.image_aspect_ratio) {
+      case "1:1":
+        return { aspectRatio: "1 / 1" };
+      case "1.91:1":
+        return { aspectRatio: "1.91 / 1" };
+      default:
+        return {};
+    }
+  };
+
   return (
     <>
       <FrameContainer>
+        {loading && (
+          <SpinnerOverlay><FrameSpinnerSVG /></SpinnerOverlay>
+        )}
         {localFrame.frames_url && (
           <>
-            <a href={localFrame.frames_url} target="_blank" rel="noopener noreferrer">
-              <FrameImage src={localFrame.image} alt={`Frame image for ${localFrame.frames_url}`} />
+            <a href={localFrame.frames_url} target="_blank" rel="noopener noreferrer" style={{ width: '100%' }}>
+              <FrameImage src={localFrame.image} alt={`Frame image for ${localFrame.frames_url}`} style={getImageStyle()} />
             </a>
             {localFrame.input?.text && (
               <InputField
@@ -139,17 +213,17 @@ function CastFrame({ frame, onFrameBtnPress }: { frame: NeynarFrame, onFrameBtnP
           </>
         )}
       </FrameContainer>
-      <FrameDomain>{extractDomain(localFrame.frames_url)}</FrameDomain>
+      {localFrame.frames_url && <FrameDomain>{extractDomain(localFrame.frames_url)}</FrameDomain>}
     </>
   );
 }
 
-export const FrameCard: React.FC<FrameCardProps> = ({ frames, onFrameBtnPress }) => {
+export const FrameCard: React.FC<FrameCardProps> = ({ frame, onFrameBtnPress }) => {
   return (
     <FlexContainer>
-      {frames.map((frame: NeynarFrame, index: number) => (
-        <CastFrame key={`cast-frame-${index}`} frame={frame} onFrameBtnPress={onFrameBtnPress} />
-      ))}
+      {frame ? 
+        <CastFrame frame={frame} onFrameBtnPress={onFrameBtnPress} />
+      : <></>}
     </FlexContainer>
   );
 };
diff --git a/src/components/organisms/NeynarFrameCard/index.tsx b/src/components/organisms/NeynarFrameCard/index.tsx
index 9008e5f..5aeccde 100644
--- a/src/components/organisms/NeynarFrameCard/index.tsx
+++ b/src/components/organisms/NeynarFrameCard/index.tsx
@@ -12,6 +12,7 @@ export type NeynarFrame = {
   version: string;
   title: string;
   image: string;
+  image_aspect_ratio: string;
   buttons: {
     index: number;
     title: string;
@@ -158,7 +159,7 @@ export const NeynarFrameCard: React.FC<NeynarFrameCardProps> = ({ url, onFrameBt
 
   return (
     <FrameCard
-      frames={frame ? [frame] : []}
+      frame={frame}
       onFrameBtnPress={handleFrameBtnPress}
     />
   );
diff --git a/src/components/stories/NeynarFrameCard.stories.tsx b/src/components/stories/NeynarFrameCard.stories.tsx
index 4f9be91..19ec90e 100644
--- a/src/components/stories/NeynarFrameCard.stories.tsx
+++ b/src/components/stories/NeynarFrameCard.stories.tsx
@@ -24,7 +24,7 @@ const TemplateWithInteractions: StoryFn<NeynarFrameCardProps> = (args) => (
 
 export const Primary = Template.bind({});
 Primary.args = {
-  frames: [
+  frame:
     {
       version: "vNext",
       title: "Introducing Smart Wallets on Paragraph",
@@ -59,12 +59,11 @@ Primary.args = {
       state: {},
       frames_url: "https://paragraph.xyz/@blog/introducing-smart-wallets",
     },
-  ],
 };
 
 Primary.argTypes = {
   hash: { table: { disable: true } },
-  frames: { table: { disable: true } },
+  frame: { table: { disable: true } },
 };
 
 export const EventsFrame = TemplateWithInteractions.bind({});
@@ -87,8 +86,7 @@ ZoraFrame.args = {
   url: "https://zora.co/collect/base:0xcf6e80defd9be067f5adda2924b55c2186d3e930/5"
 };
 
-
 ParagraphFrame.argTypes = {
   hash: { table: { disable: true } },
-  frames: { table: { disable: true } },
+  frame: { table: { disable: true } },
 };
\ No newline at end of file