diff --git a/src/App.jsx b/src/App.jsx
index eb80a6c..f2c3af1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,6 @@
 import AppHeader from "./components/AppHeader";
 import AppSubHeader from "./components/AppSubHeader";
+import LoanPanel from "./components/LoanPanel";
 
 const App = () => {
   return (
@@ -12,46 +13,7 @@ const App = () => {
           <AppSubHeader />
         </div>
       </div>
-      <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)]">
-          <div className="flex">
-            <label className="my-1" htmlFor="">
-              Capital prestado
-            </label>
-            <input
-              className="ml-3 w-[120px] w-min-0 bg-white rounded-tl-md rounded-bl-md text-black text-right p-1 !placeholder-gray-300"
-              placeholder="1000"
-            />
-            <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
-              €
-            </div>
-          </div>
-          <div className="flex">
-            <label className="my-1" htmlFor="">
-              Duración
-              <input
-                className="ml-3 w-[60px] bg-white rounded-tl-md rounded-bl-md text-black text-right p-1"
-                defaultValue={12}
-              />
-            </label>
-            <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
-              Meses
-            </div>
-          </div>
-          <div className="flex">
-            <label className="my-1" htmlFor="">
-              Interés (TIN)
-              <input
-                className="ml-3 w-[60px] bg-white rounded-tl-md rounded-bl-md text-black text-right p-1"
-                defaultValue={5}
-              />
-            </label>
-            <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
-              %
-            </div>
-          </div>
-        </form>
-      </div>
+      <LoanPanel />
       <p className="mt-auto mb-5">Made by me, with lots of love</p>
     </div>
   );
diff --git a/src/components/LoanPanel.jsx b/src/components/LoanPanel.jsx
new file mode 100644
index 0000000..6fe8775
--- /dev/null
+++ b/src/components/LoanPanel.jsx
@@ -0,0 +1,48 @@
+const LoanPanel = () => {
+  return (
+    <>
+      <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)]">
+          <div className="flex">
+            <label className="my-1" htmlFor="">
+              Capital prestado
+            </label>
+            <input
+              className="ml-3 w-[120px] w-min-0 bg-white rounded-tl-md rounded-bl-md text-black text-right p-1 !placeholder-gray-300"
+              placeholder="1000"
+            />
+            <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
+              €
+            </div>
+          </div>
+          <div className="flex">
+            <label className="my-1" htmlFor="">
+              Duración
+              <input
+                className="ml-3 w-[60px] bg-white rounded-tl-md rounded-bl-md text-black text-right p-1"
+                defaultValue={12}
+              />
+            </label>
+            <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
+              Meses
+            </div>
+          </div>
+          <div className="flex">
+            <label className="my-1" htmlFor="">
+              Interés (TIN)
+              <input
+                className="ml-3 w-[60px] bg-white rounded-tl-md rounded-bl-md text-black text-right p-1"
+                defaultValue={5}
+              />
+            </label>
+            <div className="w-[60px] place-self-center p-1 rounded-tr-md rounded-br bg-gray-600 font-light">
+              %
+            </div>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+};
+
+export default LoanPanel;