diff --git a/components/rating/rating-modal.tsx b/components/rating/rating-modal.tsx
index 20292686..28fbd3e5 100644
--- a/components/rating/rating-modal.tsx
+++ b/components/rating/rating-modal.tsx
@@ -1,5 +1,17 @@
-import React, { useState } from 'react';
-import { RatingStars } from './rating-stars';
+"use client";
+
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { RatingStars } from "./rating-stars";
 
 interface RatingModalProps {
   contributor: {
@@ -15,16 +27,21 @@ interface RatingModalProps {
   onClose: () => void;
 }
 
-export const RatingModal: React.FC<RatingModalProps> = ({ contributor, bounty, onSubmit, onClose }) => {
+export const RatingModal = ({
+  contributor,
+  bounty,
+  onSubmit,
+  onClose,
+}: RatingModalProps) => {
   const [rating, setRating] = useState(0);
-  const [feedback, setFeedback] = useState('');
+  const [feedback, setFeedback] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
 
   const handleSubmit = async () => {
     if (rating < 1 || rating > 5) {
-      setError('Please select a rating between 1 and 5.');
+      setError("Please select a rating between 1 and 5.");
       return;
     }
     setLoading(true);
@@ -33,50 +50,84 @@ export const RatingModal: React.FC<RatingModalProps> = ({ contributor, bounty, o
       await onSubmit(rating, feedback);
       setSuccess(true);
     } catch (err) {
-      console.error(err)
-      setError('Failed to submit rating. Please try again.');
+      console.error(err);
+      setError("Failed to submit rating. Please try again.");
     } finally {
       setLoading(false);
     }
   };
 
-  if (success) {
-    return (
-      <div className="modal">
-        <h2>Success!</h2>
-        <p>Rating submitted. Contributor reputation updated.</p>
-        <button onClick={onClose}>Close</button>
-      </div>
-    );
-  }
-
   return (
-    <div className="modal">
-      <h2>Rate Contributor</h2>
-      <div>
-        <strong>Bounty:</strong> {bounty.title}
-      </div>
-      <div>
-        <strong>Contributor:</strong> {contributor.name}
-      </div>
-      <div>
-        <strong>Current Reputation:</strong> {contributor.reputation}
-      </div>
-      <div style={{ margin: '16px 0' }}>
-        <RatingStars value={rating} onChange={setRating} />
-      </div>
-      <textarea
-        placeholder="Optional feedback"
-        value={feedback}
-        onChange={e => setFeedback(e.target.value)}
-        rows={3}
-        style={{ width: '100%', marginBottom: 8 }}
-      />
-      {error && <div style={{ color: 'red', marginBottom: 8 }}>{error}</div>}
-      <button onClick={handleSubmit} disabled={loading}>
-        {loading ? 'Submitting...' : 'Submit'}
-      </button>
-      <button onClick={onClose} style={{ marginLeft: 8 }}>Cancel</button>
-    </div>
+    <Dialog open onOpenChange={(open: boolean) => !open && onClose()}>
+      <DialogContent>
+        {success ? (
+          <>
+            <DialogHeader>
+              <DialogTitle>Success!</DialogTitle>
+              <DialogDescription>
+                Rating submitted. Contributor reputation updated.
+              </DialogDescription>
+            </DialogHeader>
+
+            <DialogFooter>
+              <Button variant="ghost" onClick={onClose}>
+                Close
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          <>
+            <DialogHeader>
+              <DialogTitle>Rate Contributor</DialogTitle>
+              <DialogDescription>
+                Provide a rating and optional feedback for the contributor.
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-2">
+              <div className="flex items-center">
+                <span className="text-muted-foreground">Bounty:</span>
+                <span className="ml-2 font-medium">{bounty.title}</span>
+              </div>
+              <div className="flex items-center">
+                <span className="text-muted-foreground">Contributor:</span>
+                <span className="ml-2 font-medium">{contributor.name}</span>
+              </div>
+              <div className="flex items-center">
+                <span className="text-muted-foreground">
+                  Current Reputation:
+                </span>
+                <span className="ml-2 font-medium">
+                  {contributor.reputation}
+                </span>
+              </div>
+
+              <div className="mt-4">
+                <RatingStars value={rating} onChange={setRating} />
+              </div>
+
+              <Textarea
+                placeholder="Optional feedback"
+                value={feedback}
+                onChange={(e) => setFeedback(e.target.value)}
+                rows={3}
+                className="min-h-[6rem]"
+              />
+
+              {error && <div className="text-destructive">{error}</div>}
+            </div>
+
+            <DialogFooter>
+              <Button variant="ghost" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button onClick={handleSubmit} disabled={loading}>
+                {loading ? "Submitting..." : "Submit"}
+              </Button>
+            </DialogFooter>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
   );
 };
diff --git a/components/rating/rating-stars.tsx b/components/rating/rating-stars.tsx
index 01f74b87..4873d8a2 100644
--- a/components/rating/rating-stars.tsx
+++ b/components/rating/rating-stars.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
 
 interface RatingStarsProps {
   value: number;
@@ -7,39 +7,51 @@ interface RatingStarsProps {
   displayOnly?: boolean;
 }
 
-export const RatingStars: React.FC<RatingStarsProps> = ({ value, onChange, disabled, displayOnly }) => {
+export const RatingStars: React.FC<RatingStarsProps> = ({
+  value,
+  onChange,
+  disabled,
+  displayOnly,
+}) => {
   const [hovered, setHovered] = useState<number | null>(null);
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if (!onChange || disabled || displayOnly) return;
-    if (e.key === 'ArrowLeft' && value > 1) onChange(value - 1);
-    if (e.key === 'ArrowRight' && value < 5) onChange(value + 1);
+    if (e.key === "ArrowLeft" && value > 1) onChange(value - 1);
+    if (e.key === "ArrowRight" && value < 5) onChange(value + 1);
   };
 
   return (
     <div
       tabIndex={displayOnly ? -1 : 0}
-      role={displayOnly ? 'img' : 'slider'}
+      role={displayOnly ? "img" : "slider"}
       aria-valuenow={value}
       aria-valuemin={1}
       aria-valuemax={5}
       onKeyDown={handleKeyDown}
-      style={{ display: 'flex', gap: 4, outline: 'none', cursor: displayOnly ? 'default' : 'pointer' }}
+      className={
+        displayOnly
+          ? "flex items-center gap-1 outline-none"
+          : "flex items-center gap-1 cursor-pointer outline-none"
+      }
     >
       {[1, 2, 3, 4, 5].map((star) => (
         <span
           key={star}
           onMouseEnter={() => !displayOnly && setHovered(star)}
           onMouseLeave={() => !displayOnly && setHovered(null)}
-          onClick={() => onChange && !disabled && !displayOnly && onChange(star)}
-          style={{
-            color: (hovered ?? value) >= star ? '#FFD700' : '#CCC',
-            fontSize: 28,
-            transition: 'color 0.2s',
-            pointerEvents: displayOnly ? 'none' : 'auto',
-            userSelect: 'none',
-          }}
-          aria-label={star + ' star'}
+          onClick={() =>
+            onChange && !disabled && !displayOnly && onChange(star)
+          }
+          className={
+            displayOnly
+              ? "select-none text-2xl text-muted-foreground"
+              : "select-none text-2xl transition-colors duration-200 " +
+                ((hovered ?? value) >= star
+                  ? "text-yellow-400"
+                  : "text-muted-foreground")
+          }
+          aria-label={star + " star"}
         >
           ★
         </span>