diff --git a/src/components/DurationInput.jsx b/src/components/LoanDurationInput.jsx
similarity index 100%
rename from src/components/DurationInput.jsx
rename to src/components/LoanDurationInput.jsx
diff --git a/src/components/InterestInput.jsx b/src/components/LoanInterestInput.jsx
similarity index 100%
rename from src/components/InterestInput.jsx
rename to src/components/LoanInterestInput.jsx
diff --git a/src/components/LoanPanel.jsx b/src/components/LoanPanel.jsx
index b8763f6..32e0e11 100644
--- a/src/components/LoanPanel.jsx
+++ b/src/components/LoanPanel.jsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
-import PrincipalInput from "./PrincipalInput";
-import DurationInput from "./DurationInput";
-import InterestInput from "./InterestInput";
+import LoanPrincipalInput from "./LoanPrincipalInput";
+import LoanDurationInput from "./LoanDurationInput";
+import LoanInterestInput from "./LoanInterestInput";
 
 const LoanPanel = () => {
   const [hasBeenInteracted, setHasBeenInteracted] = useState(false);
@@ -28,15 +28,15 @@ const LoanPanel = () => {
     <>
       <div className="p-5 bg-gray-50 rounded-3xl border border-gray-400">
         <form className="flex flex-col justify-end items-end my-5 text-white bg-blue-600 p-5 rounded-3xl shadow-[0_4px_0_rgba(0,255,255,1)]">
-          <PrincipalInput
+          <LoanPrincipalInput
             onChangeCallback={handleLoanPrincipalChange}
             loanPrincipal={loanPrincipal}
           />
-          <DurationInput
+          <LoanDurationInput
             onChangeCallback={handleLoanDurationChange}
             loanDuration={loanDuration}
           />
-          <InterestInput
+          <LoanInterestInput
             onChangeCallback={handleLoanInterestChange}
             loanInterest={loanInterest}
           />
diff --git a/src/components/PrincipalInput.jsx b/src/components/LoanPrincipalInput.jsx
similarity index 100%
rename from src/components/PrincipalInput.jsx
rename to src/components/LoanPrincipalInput.jsx