diff --git a/src/components/ProposalVoteCard.tsx b/src/components/ProposalVoteCard.tsx
index 06a1d7e0..e555d7f5 100644
--- a/src/components/ProposalVoteCard.tsx
+++ b/src/components/ProposalVoteCard.tsx
@@ -1,19 +1,26 @@
 import { Avatar, AvatarImage, AvatarFallback } from '@radix-ui/react-avatar';
 import { Label } from '@radix-ui/react-label';
-import { RadioGroup, RadioGroupItem } from '@radix-ui/react-radio-group';
 import { ThumbsUpIcon, ThumbsDownIcon, MinusIcon } from 'lucide-react';
 import { CardHeader, CardContent, Card } from './ui/card.tsx';
 import { Button } from './ui/button.tsx';
+import { RadioGroup, RadioGroupItem } from './ui/radio-group.tsx';
 import type { Proposal } from './ProposalsPagenatedList.tsx';
+import { cn } from '../utils.ts';
 
 export type ProposalVoteCardProps = {
   proposal: Proposal;
-  author?: string;
 };
 
+export type Vote =
+  | '-2' // Strongly Disinterested
+  | '-1' // Slightly Disinterested
+  | '0' // Neutral
+  | '1' // Slightly Interested
+  | '2'; // Strongly Interested
+
 export type VotePayload = {
   initiativeId: string;
-  vote: number;
+  vote: Vote;
   comment: string;
   authorId: string;
   authorName: string;
@@ -37,36 +44,43 @@ export function ProposalVoteCard(props: ProposalVoteCardProps) {
       hour12: true,
     },
   );
-  const numUpvotes = 72; // TODO: Replace with actual data
-  const numDownvotes = 18; // TODO: Replace with actual data
+  const numberUpvotes = 72; // TODO: Replace with actual data
+  const numberDownvotes = 18; // TODO: Replace with actual data
 
-  const handleVote = async (type: 'up' | 'down') => {
+  const handleInterestVote = (value: Vote) => {
     const votePayload: VotePayload = {
       initiativeId: props.proposal.id,
-      vote: type === 'up' ? 1 : -1,
+      vote: value,
       comment: '',
       authorId: '1234', // TODO: Replace with auth data
-      authorName: props.author ?? '',
+      authorName: props.proposal.author ?? '',
       authorEmail: '', // TODO: Replace with auth data
     };
 
-    const url = `https://api.tulsawebdevs.org/proposals/${props.proposal.id}/vote`;
-
-    try {
-      const response = await fetch(url, {
-        credentials: 'include',
-        headers: {
-          Authorization: '3fa85f64-5717-4562-b3fc-2c963f66afa6', // TODO: Add auth token
-          'Content-Type': 'application/json',
-        },
-        method: 'POST',
-        body: JSON.stringify(votePayload),
+    console.log('cast vote', votePayload);
+
+    fetch(`https://api.tulsawebdevs.org/proposals/${props.proposal.id}/vote`, {
+      credentials: 'include',
+      headers: {
+        Authorization: '3fa85f64-5717-4562-b3fc-2c963f66afa6', // TODO: Add auth token
+        'Content-Type': 'application/json',
+      },
+      method: 'POST',
+      body: JSON.stringify(votePayload),
+    })
+      .then((res) => res.json())
+      .then((data) => {
+        console.log('do something with data', data);
+      })
+      .catch((error) => {
+        // TODO: Handle inability to cast vote
+        console.error(error);
       });
+  };
 
-      console.log('response', response);
-    } catch (error) {
-      console.error(error);
-    }
+  // TODO: Implement like vote functionality. What API to call?
+  const handleLikeVote = (type: 'up' | 'down') => {
+    console.log('handle like vote', type);
   };
 
   return (
@@ -82,25 +96,11 @@ export function ProposalVoteCard(props: ProposalVoteCardProps) {
             </p>
           </div>
 
-          <div className="flex items-center gap-2">
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => handleVote('up')}
-            >
-              <ThumbsUpIcon className="w-5 h-5 text-green-500 mr-1" />
-              <span className="text-green-500 font-medium">{numUpvotes}</span>
-            </Button>
-
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={() => handleVote('down')}
-            >
-              <ThumbsDownIcon className="w-5 h-5 text-red-500 mr-1" />
-              <span className="text-red-500 font-medium">{numDownvotes}</span>
-            </Button>
-          </div>
+          <ProposalLikeButtons
+            handleLikeVote={handleLikeVote}
+            numberUpvotes={numberUpvotes}
+            numberDownvotes={numberDownvotes}
+          />
         </div>
       </CardHeader>
       <CardContent className="flex flex-col items-start justify-between gap-6">
@@ -113,100 +113,114 @@ export function ProposalVoteCard(props: ProposalVoteCardProps) {
           <div className="text-sm text-gray-500 dark:text-gray-400">
             {`Proposed ${proposedDate} at ${proposedTime} by `}
             <span className="font-bold dark:text-gray-200">
-              {props.author ?? 'Anonymous'}
+              {props.proposal.author ?? 'Anonymous'}
             </span>
           </div>
         </div>
 
         <div className="flex items-center gap-2">
-          <RadioGroup
-            aria-label="Vote"
-            className="flex items-center gap-2"
-            defaultValue="0"
-          >
-            <Label
-              className="flex items-center gap-2 cursor-pointer"
-              htmlFor="vote-strongly-disinterested"
-            >
-              <RadioGroupItem
-                className="peer sr-only"
-                id="vote-strongly-disinterested"
-                value="-2"
-              />
-              <div className="w-5 h-5 flex items-center justify-center rounded-full border border-gray-300 peer-checked:bg-red-500 peer-checked:border-red-500 dark:border-gray-600 dark:peer-checked:bg-red-500 dark:peer-checked:border-red-500">
-                <ThumbsDownIcon className="w-4 h-4 text-white" />
-              </div>
-              <span className="text-sm text-gray-500 dark:text-gray-400">
-                Strongly Disinterested
-              </span>
-            </Label>
-            <Label
-              className="flex items-center gap-2 cursor-pointer"
-              htmlFor="vote-slightly-disinterested"
-            >
-              <RadioGroupItem
-                className="peer sr-only"
-                id="vote-slightly-disinterested"
-                value="-1"
-              />
-              <div className="w-5 h-5 flex items-center justify-center rounded-full border border-gray-300 peer-checked:bg-red-500 peer-checked:border-red-500 dark:border-gray-600 dark:peer-checked:bg-red-500 dark:peer-checked:border-red-500">
-                <ThumbsDownIcon className="w-4 h-4 text-white" />
-              </div>
-              <span className="text-sm text-gray-500 dark:text-gray-400">
-                Slightly Disinterested
-              </span>
-            </Label>
-            <Label
-              className="flex items-center gap-2 cursor-pointer"
-              htmlFor="vote-neutral"
-            >
-              <RadioGroupItem
-                className="peer sr-only"
-                id="vote-neutral"
-                value="0"
-              />
-              <div className="w-5 h-5 flex items-center justify-center rounded-full border border-gray-300 peer-checked:bg-gray-500 peer-checked:border-gray-500 dark:border-gray-600 dark:peer-checked:bg-gray-500 dark:peer-checked:border-gray-500">
-                <MinusIcon className="w-4 h-4 text-white" />
-              </div>
-              <span className="text-sm text-gray-500 dark:text-gray-400">
-                Neutral
-              </span>
-            </Label>
-            <Label
-              className="flex items-center gap-2 cursor-pointer"
-              htmlFor="vote-slightly-interested"
-            >
-              <RadioGroupItem
-                className="peer sr-only"
-                id="vote-slightly-interested"
-                value="1"
-              />
-              <div className="w-5 h-5 flex items-center justify-center rounded-full border border-gray-300 peer-checked:bg-green-500 peer-checked:border-green-500 dark:border-gray-600 dark:peer-checked:bg-green-500 dark:peer-checked:border-green-500">
-                <ThumbsUpIcon className="w-4 h-4 text-white" />
-              </div>
-              <span className="text-sm text-gray-500 dark:text-gray-400">
-                Slightly Interested
-              </span>
-            </Label>
-            <Label
-              className="flex items-center gap-2 cursor-pointer"
-              htmlFor="vote-strongly-interested"
-            >
-              <RadioGroupItem
-                className="peer sr-only"
-                id="vote-strongly-interested"
-                value="2"
-              />
-              <div className="w-5 h-5 flex items-center justify-center rounded-full border border-gray-300 peer-checked:bg-green-500 peer-checked:border-green-500 dark:border-gray-600 dark:peer-checked:bg-green-500 dark:peer-checked:border-green-500">
-                <ThumbsUpIcon className="w-4 h-4 text-white" />
-              </div>
-              <span className="text-sm text-gray-500 dark:text-gray-400">
-                Strongly Interested
-              </span>
-            </Label>
-          </RadioGroup>
+          <ProposalInterestVote onVoteSelect={handleInterestVote} />
         </div>
       </CardContent>
     </Card>
   );
 }
+
+const voteOptions = [
+  {
+    label: 'Strongly Disinterested',
+    value: '-2',
+    id: 'vote-strongly-disinterested',
+  },
+  {
+    label: 'Slightly Disinterested',
+    value: '-1',
+    id: 'vote-slightly-disinterested',
+  },
+  { label: 'Neutral', value: '0', id: 'vote-neutral' },
+  { label: 'Slightly Interested', value: '1', id: 'vote-slightly-interested' },
+  { label: 'Strongly Interested', value: '2', id: 'vote-strongly-interested' },
+];
+
+function ProposalInterestVote({
+  onVoteSelect,
+}: {
+  onVoteSelect: (vote: Vote) => void;
+}) {
+  return (
+    <RadioGroup
+      aria-label="Vote"
+      className="flex items-center gap-2"
+      defaultValue="0" // TODO: Replace with user's selected vote
+      onValueChange={onVoteSelect}
+    >
+      {voteOptions.map((option) => {
+        const value = parseInt(option.value, 10);
+
+        return (
+          <Label
+            key={option.id}
+            className="flex items-center gap-2 cursor-pointer"
+            htmlFor={option.id}
+          >
+            <RadioGroupItem
+              className="peer sr-only"
+              id={option.id}
+              value={option.value}
+            />
+            <div
+              className={cn(
+                'p-0.5 w-5 h-5 flex items-center justify-center rounded-full border-2 border-gray-400',
+                {
+                  'peer-aria-checked:bg-red-500 peer-aria-checked:border-red-500 dark:border-gray-600 dark:peer-aria-checked:bg-red-500 dark:peer-aria-checked:border-red-500':
+                    value < 0,
+                  'peer-aria-checked:bg-gray-500 peer-aria-checked:border-gray-500 dark:border-gray-600 dark:peer-aria-checked:bg-gray-500 dark:peer-aria-checked:border-gray-500':
+                    value === 0,
+                  'peer-aria-checked:bg-green-500 peer-aria-checked:border-green-500 dark:border-gray-600 dark:peer-aria-checked:bg-green-500 dark:peer-aria-checked:border-green-500':
+                    value > 0,
+                },
+              )}
+            >
+              {value < 0 && <ThumbsDownIcon className="w-4 h-4 text-white" />}
+              {value === 0 && <MinusIcon className="w-4 h-4 text-white" />}
+              {value > 0 && <ThumbsUpIcon className="w-4 h-4 text-white" />}
+            </div>
+            <span className="text-sm text-gray-500 dark:text-gray-400">
+              {option.label}
+            </span>
+          </Label>
+        );
+      })}
+    </RadioGroup>
+  );
+}
+
+type ProposalLikeButtonsProps = {
+  handleLikeVote: (type: 'up' | 'down') => void;
+  numberUpvotes: number;
+  numberDownvotes: number;
+};
+
+function ProposalLikeButtons({
+  handleLikeVote,
+  numberUpvotes,
+  numberDownvotes,
+}: ProposalLikeButtonsProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <Button size="sm" variant="outline" onClick={() => handleLikeVote('up')}>
+        <ThumbsUpIcon className="w-5 h-5 text-green-500 mr-1" />
+        <span className="text-green-500 font-medium">{numberUpvotes}</span>
+      </Button>
+
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={() => handleLikeVote('down')}
+      >
+        <ThumbsDownIcon className="w-5 h-5 text-red-500 mr-1" />
+        <span className="text-red-500 font-medium">{numberDownvotes}</span>
+      </Button>
+    </div>
+  );
+}