diff --git a/power-pay-frontend/src/components/UserLogin.tsx b/power-pay-frontend/src/components/UserLogin.tsx
index aa23541..3ad67a8 100644
--- a/power-pay-frontend/src/components/UserLogin.tsx
+++ b/power-pay-frontend/src/components/UserLogin.tsx
@@ -1,10 +1,19 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPhone } from '@fortawesome/free-solid-svg-icons/faPhone';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
 const UserLogin: React.FC = () => {
     return (
       <div className="flex justify-center items-center  mb-34  bg-800 text-black text-sm">
-            <div className="text-lg text-center text-black-950 font-bold font-black pb-5 absolute inset-x-0 top-12">LOGIN . . .</div>
+        <FontAwesomeIcon icon={faUser} size="4x" className="text-center w-80 justify-center align-middle pb-9 pt-12 absolute top-3"  />
+            <div className="text-lg text-center text-black-950 pt-9 font-bold font-black absolute inset-x-0 mt-12 top-12">LOG IN</div>
             <div className="input-area">
                 <form className="max-w-sm mx-auto flex  rounded-lg w-80 m-auto text-lg absolute  inset-x-0">
-                    <input type="number" className="text-lg text-center   rounded-full w-80 p-2.5 bg-red-50  dark:placeholder-gray-400 dark:text-black required" placeholder="Phone Number" required />
+                    <div className="flex items-center">
+                        <div className="input-group">
+                            <input type="number" className="text-lg px-9 rounded-full w-80 p-2.5 bg-red-50 dark:placeholder-gray-400 dark:text-black required" placeholder="Phone Number" required />
+                            <FontAwesomeIcon icon={faPhone} size="1x" className="mr-2 color-red-950" />
+                        </div>
+                    </div>
                 </form>
             </div>
             <div className="pt-12">
diff --git a/power-pay-frontend/src/index.css b/power-pay-frontend/src/index.css
index eeb8410..d969b52 100644
--- a/power-pay-frontend/src/index.css
+++ b/power-pay-frontend/src/index.css
@@ -78,4 +78,20 @@ input::-webkit-inner-spin-button {
 /* Firefox */
 input[type=number] {
   appearance: textfield;
+}
+
+.input-group {
+  position: relative;
+}
+
+.input-group input {
+  position: relative;
+}
+
+.input-group .fa-phone {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  color: red;
+  transform: translateY(-50%);
 }
\ No newline at end of file