diff --git a/app/planets/[id]/page.tsx b/app/planets/[id]/page.tsx
index 640229bf..6b98954d 100644
--- a/app/planets/[id]/page.tsx
+++ b/app/planets/[id]/page.tsx
@@ -52,7 +52,7 @@ export default function ClassificationDetail({ params }: { params: { id: string
     if (!params.id) return;
 
     const fetchClassification = async () => {
-      if (!params.id || !session) return; // Check if session is available
+      if (!params.id || !session) return;
 
       const { data, error } = await supabase
         .from("classifications")
diff --git a/content/Comments/CommentSingle.tsx b/content/Comments/CommentSingle.tsx
index f242ed30..067573d1 100644
--- a/content/Comments/CommentSingle.tsx
+++ b/content/Comments/CommentSingle.tsx
@@ -12,6 +12,8 @@ interface CommentCardProps {
   createdAt: string;
   children?: React.ReactNode;
   parentCommentId?: number | null;
+  category?: string;
+  value?: string | null;
   replyCount: number;
   isSurveyor?: boolean;
   configuration?: {
@@ -22,7 +24,19 @@ interface CommentCardProps {
   classificationConfig?: any;
 };
 
-export function CommentCard({ author, classificationConfig, classificationId, content, createdAt, replyCount, parentCommentId, isSurveyor, configuration }: CommentCardProps) {
+export function CommentCard({ 
+  author, 
+  classificationConfig, 
+  category, 
+  classificationId, 
+  content, 
+  createdAt, 
+  value, 
+  replyCount, 
+  parentCommentId, 
+  isSurveyor, 
+  configuration 
+}: CommentCardProps) {
   const supabase = useSupabaseClient();
 
   const handleConfirmComment = async () => {
@@ -55,12 +69,17 @@ export function CommentCard({ author, classificationConfig, classificationId, co
           <div>
             <CardTitle>{author}</CardTitle>
             {isSurveyor && <p className="text-red-800">Surveyor</p>}
-            {configuration?.planetType && <p className="text-green-200">{configuration.planetType}</p>}
+            <p className="text-green-300">{category}</p>
           </div>
         </div>
       </CardHeader>
       <CardContent>
         <p>{content}</p>
+        {value && category && (
+          <div className="mt-2 p-2 bg-gray-800 text-gray-200 rounded-md text-sm">
+            <strong>{category}</strong> = {value}
+          </div>
+        )}
         {configuration && (
           <Button onClick={handleConfirmComment} className="text-green-500 mt-2">
             Confirm
diff --git a/content/Posts/PostSingle.tsx b/content/Posts/PostSingle.tsx
index 20a59e45..3e45575a 100644
--- a/content/Posts/PostSingle.tsx
+++ b/content/Posts/PostSingle.tsx
@@ -12,6 +12,7 @@ import { CommentCard } from "../Comments/CommentSingle";
 import { AvatarGenerator } from '@/components/Account/Avatar';
 import html2canvas from 'html2canvas';
 import { SurveyorComments } from "./Surveyor/SurveyorPostCard";
+import PlanetTempCalculator from "@/components/Structures/Missions/Astronomers/PlanetHunters/TemperatureCalc";
 
 interface CommentProps {
   id: number;
@@ -233,7 +234,7 @@ export function PostCardSingle({
 
   return (
     <div ref={shareCardRef}>
-      <Card className="w-full max-w-2xl mx-auto my-8 bg-card text-card-foreground border-primary">
+      <Card className="w-full mx-auto my-8 bg-card text-card-foreground border-primary">
         <CardHeader>
           <div className="flex items-center space-x-4">
             {session && <AvatarGenerator author={session?.user.id} />}
@@ -247,43 +248,52 @@ export function PostCardSingle({
           <Badge variant="secondary">{category}</Badge>
           <p>{content}</p>
           {images.length > 0 && (
-            <div className="relative mt-4">
-              <img
-                src={images[currentIndex]}
-                alt={`Image ${currentIndex + 1}`}
-                className="rounded-lg w-full"
-              />
-              {images.length > 1 && (
-                <>
-                  <button
-                    onClick={goToPreviousImage}
-                    className="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2"
-                  >
-                    &#8592;
-                  </button>
-                  <button
-                    onClick={goToNextImage}
-                    className="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2"
-                  >
-                    &#8594;
-                  </button>
-                  <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-2">
-                    {images.map((_, index) => (
-                      <button
-                        key={index}
-                        onClick={() => setCurrentIndex(index)}
-                        className={`h-2 w-2 rounded-full ${
-                          currentIndex === index ? "bg-white" : "bg-gray-400"
-                        }`}
-                      ></button>
-                    ))}
-                  </div>
-                </>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
+              <div className="relative col-span-1">
+                <img
+                  src={images[currentIndex]}
+                  alt={`Image ${currentIndex + 1}`}
+                  className="rounded-lg w-full h-auto"
+                />
+                {images.length > 1 && (
+                  <>
+                    <button
+                      onClick={goToPreviousImage}
+                      className="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2"
+                    >
+                      &#8592;
+                    </button>
+                    <button
+                      onClick={goToNextImage}
+                      className="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-2"
+                    >
+                      &#8594;
+                    </button>
+                    <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex space-x-2">
+                      {images.map((_, index) => (
+                        <button
+                          key={index}
+                          onClick={() => setCurrentIndex(index)}
+                          className={`h-2 w-2 rounded-full ${
+                            currentIndex === index ? "bg-white" : "bg-gray-400"
+                          }`}
+                        ></button>
+                      ))}
+                    </div>
+                  </>
+                )}
+              </div>
+  
+              {/* Grid cell for the PlanetTempCalculator */}
+              {classificationType === 'planet' && (
+                <div className="col-span-1">
+                  <PlanetTempCalculator />
+                </div>
               )}
             </div>
           )}
         </CardContent>
-        <CardFooter className="flex items-center justify-between">
+        <CardFooter className="flex items-center justify-between space-x-2">
           <div className="flex gap-2">
             <Button onClick={handleVoteClick} size="sm">
               <ThumbsUp className="mr-2" /> {voteCount}
@@ -292,67 +302,40 @@ export function PostCardSingle({
               <MessageSquare className="mr-2" /> {comments.length}
             </Button>
           </div>
-          <div className="relative" ref={dropdownRef}>
-            <Button
-              onClick={() => {
-                toggleDropdown();
-                handleShare();
-              }}
-              size="sm"
-              disabled={isSharing}
-              variant="outline"
-              className="flex items-center gap-2"
-            >
-              <Share2 className="mr-2" />
-              {isSharing ? "Sharing..." : "Share"}
-            </Button>
-            {dropdownOpen && (
-              <div className="absolute right-0 mt-2 w-72 bg-card border rounded shadow-md z-50 p-4">
-                <p className="text-sm mb-2">
-                  Share this post:{" "}
-                  <a
-                    href={`https://starsailors.space/posts/${classificationId}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-blue-600 underline"
-                  >
-                    starsailors.space/posts/{classificationId}
-                  </a>
-                </p>
-                <div className="flex gap-2">
-                  <Button onClick={handleCopyLink} className="flex-1">
-                    Copy Link
+          <Button
+            onClick={() => {
+              handleShare();
+            }}
+            size="sm"
+            disabled={isSharing}
+            variant="outline"
+            className="flex items-center gap-2"
+          >
+            <Share2 className="mr-2" />
+            {isSharing ? "Sharing..." : "Share"}
+          </Button>
+        </CardFooter>
+        {commentStatus !== false && (
+          <CardContent>
+            {!showStats && (
+              <div className="space-y-4">
+                <Textarea
+                  value={newComment}
+                  onChange={(e) => setNewComment(e.target.value)}
+                  placeholder="Add your comment..."
+                  rows={3}
+                  className="w-full"
+                />
+                <CardFooter className="flex flex-col gap-2">
+                  <Button onClick={handleAddComment} className="w-full">
+                    Submit Comment
                   </Button>
-                  <Button onClick={handleShare}>Download postcard</Button>
-                  <Button onClick={openPostInNewTab} className="flex-1">
-                    Open
+                  <Button onClick={() => setShowStats(!showStats)} variant="outline">
+                    Propose new stats
                   </Button>
-                </div>
+                </CardFooter>
               </div>
             )}
-          </div>
-        </CardFooter>
-  
-        {commentStatus !== false && (
-          <CardContent>
-            <div className="space-y-4">
-              <Textarea
-                value={newComment}
-                onChange={(e) => setNewComment(e.target.value)}
-                placeholder="Add your comment..."
-                rows={3}
-                className="w-full"
-              />
-              <CardFooter className="flex flex-col gap-2">
-                <Button onClick={handleAddComment} className="w-full">
-                  Submit Comment
-                </Button>
-                <Button onClick={() => setShowStats(!showStats)} variant="outline">
-                  Propose new stats
-                </Button>
-              </CardFooter>
-            </div>
-  
             {!showStats ? (
               <div className="mt-4 space-y-2">
                 {loadingComments ? (
@@ -369,15 +352,7 @@ export function PostCardSingle({
                       classificationId={classificationId}
                       parentCommentId={classificationId}
                       isSurveyor={comment.isSurveyor}
-                    >
-                      {enableNewCommentingMethod && (
-                        <div className="flex justify-between items-center">
-                          <p className="text-xs text-gray-600">
-                            {comment.configuration?.planetType || "Unknown"}
-                          </p>
-                        </div>
-                      )}
-                    </CommentCard>
+                    />
                   ))
                 ) : (
                   <p>No comments yet. Be the first to comment!</p>
@@ -399,4 +374,5 @@ export function PostCardSingle({
       </Card>
     </div>
   );
+  
 };
\ No newline at end of file
diff --git a/content/Posts/Surveyor/SurveyorPostCard.tsx b/content/Posts/Surveyor/SurveyorPostCard.tsx
index e187872d..fb3b0de6 100644
--- a/content/Posts/Surveyor/SurveyorPostCard.tsx
+++ b/content/Posts/Surveyor/SurveyorPostCard.tsx
@@ -7,6 +7,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { ThumbsUp, MessageSquare } from "lucide-react";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { CommentCard } from "@/content/Comments/CommentSingle";
+import PlanetTempCalculator from "@/components/Structures/Missions/Astronomers/PlanetHunters/TemperatureCalc";
 
 interface CommentProps {
   id: number;
@@ -17,6 +18,8 @@ interface CommentProps {
   configuration?: {
     planetType?: string;
   };
+  category?: string;
+  value?: string;
 };
 
 interface PostCardSingleProps {
@@ -45,8 +48,11 @@ export function SurveyorComments({
   const [comments, setComments] = useState<CommentProps[]>([]);
   const [loadingComments, setLoadingComments] = useState<boolean>(true);
   const [newComment, setNewComment] = useState<string>("");
-  const [commentInputs, setCommentInputs] = useState<Record<number, string>>({});
-  const [temperatureInput, setTemperatureInput] = useState<string>("");
+
+  const [commentInputs, setCommentInputs] = useState<Record<string, string>>({});
+  const [temperatureInputs, setTemperatureInputs] = useState<Record<string, string>>({});  
+  const [densityInputs, setDensityInputs] = useState<Record<string, string>>({});  
+
   const [isSharing, setIsSharing] = useState(false);
   const shareCardRef = useRef<HTMLDivElement>(null);
 
@@ -131,12 +137,12 @@ export function SurveyorComments({
 
   const handleProposePlanetType = async (planetType: "Terrestrial" | "Gaseous") => {
     const commentInput = commentInputs[classificationId];
-
-    if (!commentInput) {
-      console.error("Comment input is required");
+  
+    if (!commentInput?.trim()) {
+      console.error("Comment input must be filled");
       return;
-    };
-
+    }
+  
     try {
       const { error } = await supabase
         .from("comments")
@@ -147,123 +153,271 @@ export function SurveyorComments({
             author: session?.user?.id,
             configuration: { planetType },
             surveyor: "TRUE",
+            category: 'PlanetType'
           },
         ]);
+  
       if (error) throw error;
-      setCommentInputs((prev) => ({ ...prev, [classificationId]: "" }));
+  
+      setCommentInputs((prev) => ({
+        ...prev,
+        [classificationId]: "",
+      }));
+  
       fetchComments();
     } catch (error) {
       console.error("Error inserting comment:", error);
-    };
-  };
+    }
+  };  
 
   const handleAddTemperatureComment = async () => {
-    if (!temperatureInput.trim()) return;
+    const temperatureInput1 = temperatureInputs[`${classificationId}-1`];
+    const temperatureInput2 = temperatureInputs[`${classificationId}-2`];
+
+    if (!temperatureInput1?.trim() || !temperatureInput2?.trim()) {
+      console.error("Both text areas must be filled");
+      return;
+    }
 
     try {
       const { error } = await supabase
         .from("comments")
         .insert([
           {
-            content: temperatureInput,
+            content: `${temperatureInput1}\n\n${temperatureInput2}`,
             classification_id: classificationId,
             author: session?.user?.id,
-            configuration: { temperature: temperatureInput },
+            configuration: { temperature: `${temperatureInput1}, ${temperatureInput2}` },
             surveyor: "TRUE",
+            value: temperatureInput2,
+            category: 'Temperature'
           },
         ]);
 
       if (error) throw error;
-      setTemperatureInput("");
+      setTemperatureInputs((prev) => ({
+        ...prev,
+        [`${classificationId}-1`]: "",
+        [`${classificationId}-2`]: "",
+      }));
       fetchComments();
     } catch (error) {
       console.error("Error adding temperature comment:", error);
-    }
+    };
   };
 
-  const handleSelectPreferredComment = async (commentId: number) => {
-    const selectedComment = comments.find((comment) => comment.id === commentId);
-    if (!selectedComment) return;
-
-    const planetType = selectedComment.configuration?.planetType;
-    if (!planetType) return;
-
+  const handleAddDensityComment = async () => {
+    const densityInput1 = densityInputs[`${classificationId}-1`];
+    const densityInput2 = densityInputs[`${classificationId}-2`];
+  
+    if (!densityInput1?.trim() || !densityInput2?.trim()) {
+      console.error("Both text areas must be filled");
+      return;
+    }
+  
     try {
       const { error } = await supabase
-        .from("classifications")
-        .update({
-          classificationConfiguration: {
-            ...classificationConfig,
-            classificationOptions: {
-              ...classificationConfig?.classificationOptions,
-              planetType: [...(classificationConfig?.classificationOptions?.planetType || []), planetType],
-            },
+        .from("comments")
+        .insert([
+          {
+            content: `${densityInput1}\n\n${densityInput2}`,
+            classification_id: classificationId,
+            author: session?.user?.id,
+            configuration: { density: `${densityInput1}, ${densityInput2}` },
+            surveyor: "TRUE",
+            value: densityInput2,
+            category: "Density",
           },
-        })
-        .eq("id", classificationId);
-
+        ]);
+  
       if (error) throw error;
-
-      console.log("Preferred planet type updated:", planetType);
+  
+      setDensityInputs((prev) => ({
+        ...prev,
+        [`${classificationId}-1`]: "",
+        [`${classificationId}-2`]: "",
+      }));
+  
+      fetchComments();
     } catch (error) {
-      console.error("Error updating preferred comment:", error);
-    };
-  };
+      console.error("Error adding density comment:", error);
+    }
+  };  
+
+  // const handleSelectPreferredComment = async (commentId: number) => {
+  //   const selectedComment = comments.find((comment) => comment.id === commentId);
+  //   if (!selectedComment) return;
+
+  //   const planetType = selectedComment.configuration?.planetType;
+  //   if (!planetType) return;
+
+  //   try {
+  //     const { error } = await supabase
+  //       .from("classifications")
+  //       .update({
+  //         classificationConfiguration: {
+  //           ...classificationConfig,
+  //           classificationOptions: {
+  //             ...classificationConfig?.classificationOptions,
+  //             planetType: [...(classificationConfig?.classificationOptions?.planetType || []), planetType],
+  //           },
+  //         },
+  //       })
+  //       .eq("id", classificationId);
+
+  //     if (error) throw error;
+
+  //     console.log("Preferred planet type updated:", planetType);
+  //   } catch (error) {
+  //     console.error("Error updating preferred comment:", error);
+  //   };
+  // };
 
   return (
-    <div ref={shareCardRef}>
-      <Card className="w-full max-w-2xl mx-auto my-8 bg-card text-card-foreground">
-        {commentStatus !== false && (
-          <CardContent>
-              <div className="space-y-4">
-                <Textarea
-                  value={commentInputs[classificationId] || ""}
-                  onChange={(e) =>
-                    setCommentInputs((prev) => ({ ...prev, [classificationId]: e.target.value }))
-                  }
-                  placeholder="Propose a planet type..."
-                  rows={3}
-                  className="w-full"
-                />
-                <div className="flex space-x-2">
-                  <Button onClick={() => handleProposePlanetType("Terrestrial")}>
-                    Propose Terrestrial
-                  </Button>
-                  <Button onClick={() => handleProposePlanetType("Gaseous")}>
-                    Propose Gaseous
-                  </Button>
-                </div>
-
-                <Textarea
-                  value={temperatureInput}
-                  onChange={(e) => setTemperatureInput(e.target.value)}
-                  placeholder="Suggest a temperature..."
-                  rows={3}
-                  className="w-full"
-                />
-                <div className="flex space-x-2">
-                  <Button onClick={handleAddTemperatureComment}>
-                    Propose Temperature
-                  </Button>
-                </div>
-              </div>
-            <div className="mt-4 space-y-2">
-              {loadingComments ? (
-                <p>Loading comments...</p>
-              ) : comments.length > 0 ? (
-                comments.map((comment) => (
-                  <CommentCard
-                    key={comment.id}
-                    id={comment.id}
-                    author={comment.author}
-                    content={comment.content}
-                    createdAt={comment.created_at}
-                    replyCount={0}
-                    isSurveyor={comment.isSurveyor}
-                    configuration={comment.configuration}
-                    classificationId={classificationId}
-                    classificationConfig={classificationConfig}
-                  />
+    <Card className="w-full max-w-2xl mx-auto my-8 bg-card text-card-foreground">
+    {commentStatus !== false && (
+      <CardContent>
+        {/* <PlanetTempCalculator /> */}
+        <div className="py-4 space-y-6">
+          {/* Planet Type Proposal */}
+          <div className="space-y-2">
+            <div className="flex space-x-2">
+              <Textarea
+                value={commentInputs[`${classificationId}-1`] || ""}
+                onChange={(e) =>
+                  setCommentInputs((prev) => ({
+                    ...prev,
+                    [`${classificationId}-1`]: e.target.value,
+                  }))
+                }
+                placeholder="Discuss planet type"
+                rows={3}
+              />
+              {/* <Textarea
+                value={commentInputs[`${classificationId}-2`] || ""}
+                onChange={(e) =>
+                  setCommentInputs((prev) => ({
+                    ...prev,
+                    [`${classificationId}-2`]: e.target.value,
+                  }))
+                }
+                placeholder="Propose a planet type (part 2)..."
+                rows={3}
+                className="w-1/2"
+              /> */}
+            </div>
+            <div className="flex space-x-2">
+              <Button onClick={() => handleProposePlanetType("Terrestrial")}>
+                Propose Terrestrial
+              </Button>
+              <Button onClick={() => handleProposePlanetType("Gaseous")}>
+                Propose Gaseous
+              </Button>
+            </div>
+          </div>
+
+          {/* Temperature Proposal */}
+          <div className="space-y-2">
+            <div className="flex space-x-2">
+              <Textarea
+                value={temperatureInputs[`${classificationId}-1`] || ""}
+                onChange={(e) =>
+                  setTemperatureInputs((prev) => ({
+                    ...prev,
+                    [`${classificationId}-1`]: e.target.value,
+                  }))
+                }
+                placeholder="Discuss temperature"
+                rows={3}
+                className="w-1/2"
+              />
+              <Textarea
+                value={temperatureInputs[`${classificationId}-2`] || ""}
+                onChange={(e) =>
+                  setTemperatureInputs((prev) => ({
+                    ...prev,
+                    [`${classificationId}-2`]: e.target.value,
+                  }))
+                }
+                placeholder="Temperature value"
+                rows={3}
+                className="w-1/2"
+              />
+            </div>
+            <div className="flex space-x-2">
+              <Button onClick={handleAddTemperatureComment}>
+                Propose Temperature
+              </Button>
+            </div>
+          </div>
+
+          {/* Density */}
+          <div className="space-y-2">
+            <div className="flex space-x-2">
+              <Textarea
+                value={densityInputs[`${classificationId}-1`] || ""}
+                onChange={(e) =>
+                  setDensityInputs((prev) => ({
+                    ...prev,
+                    [`${classificationId}-1`]: e.target.value,
+                  }))
+                }
+                placeholder="Discuss density"
+                rows={3}
+                className="w-1/2"
+              />
+              <Textarea
+                value={densityInputs[`${classificationId}-2`] || ""}
+                onChange={(e) =>
+                  setDensityInputs((prev) => ({
+                    ...prev,
+                    [`${classificationId}-2`]: e.target.value,
+                  }))
+                }
+                placeholder="Density value"
+                rows={3}
+                className="w-1/2"
+              />
+            </div>
+            <div className="flex space-x-2">
+              <Button onClick={handleAddDensityComment}>
+                Propose Density
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Comments Section */}
+        <div className="mt-6 space-y-2">
+          {loadingComments ? (
+            <p>Loading comments...</p>
+          ) : comments.length > 0 ? (
+            comments.map((comment) => (
+              <CommentCard
+                key={comment.id}
+                id={comment.id}
+                author={comment.author}
+                category={comment.category}
+                content={comment.content}
+                value={comment.value}
+                createdAt={comment.created_at}
+                replyCount={0}
+                isSurveyor={comment.isSurveyor}
+                configuration={comment.configuration}
+                classificationId={classificationId}
+                classificationConfig={classificationConfig}
+              />
+            ))
+          ) : (
+            <p>No comments yet. Be the first to comment!</p>
+          )}
+        </div>
+      </CardContent>
+    )}
+  </Card>
+  );
+};
+
                       // <div className="flex justify-between items-center">
                       //   <p className="text-xs text-gray-600">
                       //     {comment.configuration?.planetType || "Unknown"}
@@ -284,15 +438,4 @@ export function SurveyorComments({
                       //       Confirm
                       //     </button>
                       //   )}
-                      // </div>
-                ))
-              ) : (
-                <p>No comments yet. Be the first to comment!</p>
-              )}
-            </div>
-          </CardContent>
-        )}
-      </Card>
-    </div>
-  );
-};
\ No newline at end of file
+                      // </div>
\ No newline at end of file
diff --git a/styles/Projects/Telescope/PlanetTemperatureCalculator.css b/styles/Projects/Telescope/PlanetTemperatureCalculator.css
index a0375372..80b88e10 100644
--- a/styles/Projects/Telescope/PlanetTemperatureCalculator.css
+++ b/styles/Projects/Telescope/PlanetTemperatureCalculator.css
@@ -6,15 +6,10 @@
 };
 
 .planet-temp-calculator-card {
-	width: 100%;
-	max-width: 28rem;
-	padding: 2rem;
-	border-radius: 1.5rem;
-	background-color: #2c4f64;
-	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-	border: 4px solid #5fcbc3;
-	transform: perspective(1000px) rotateX(1deg);
-	transition: transform 0.3s ease;
+    max-width: 24rem;
+    padding: 1rem;
+    border-radius: 1rem;
+    border-width: 3px;
 };
 
 .planet-temp-calculator-card:hover {
@@ -22,19 +17,13 @@
 }
 
 .planet-temp-calculator-heading {
-	font-size: 2rem;
-	font-weight: bold;
-	margin-bottom: 1.5rem;
-	text-align: center;
-	color: #5fcbc3;
-	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+};
 
 .planet-temp-calculator-subheading {
-	color: #ffe3ba;
-	font-size: 0.875rem;
-	margin-bottom: 1rem;
-	text-align: center;
+    font-size: 0.75rem;
+    margin-bottom: 0.75rem;
 }
 
 .planet-temp-calculator-input-container {
@@ -43,15 +32,32 @@
 }
 
 .planet-temp-calculator-input {
-	width: 100%;
-	background-color: #1d2833;
-	border: 1px solid #5fcbc3;
-	color: #ffe3ba;
-	padding: 0.75rem 1rem;
-	font-size: 1.25rem;
-	font-family: monospace;
-	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-	transition: all 0.2s ease;
+	padding: 0.5rem 0.75rem;
+    font-size: 1rem;
+}
+
+.planet-temp-calculator-placeholder {
+    font-size: 0.75rem;
+}
+
+.planet-temp-calculator-placeholder.active {
+    font-size: 0.65rem;
+    top: -0.6rem;
+}
+
+.planet-temp-calculator-output {
+    padding: 0.4rem 0.75rem;
+    font-size: 1.25rem;
+}
+
+.planet-temp-calculator-button-grid {
+    gap: 0.25rem;
+}
+
+.planet-temp-calculator-button {
+    font-size: 1rem;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
 }
 
 .planet-temp-calculator-input:focus {