diff --git a/pages/index.tsx b/pages/index.tsx
index a202d40..85d7c0d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -36,28 +36,17 @@ const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => {
         <div className='flex items-end w-full px-8 mx-auto space-y-4 lg:w-2/3 sm:space-x-4 sm:space-y-0 sm:px-0'>
           <div className='relative mr-4 lg:w-full'>
             <label className='text-sm leading-7 text-gray-600'>SSO URL</label>
-            <input
-              type='text'
-              defaultValue={ssoUrl}
-              className='w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out bg-gray-100 bg-opacity-50 border border-gray-300 rounded outline-none focus:ring-2 focus:ring-indigo-200 focus:bg-transparent focus:border-indigo-500'
-            />
+            <input type='text' defaultValue={ssoUrl} className='w-full input' />
           </div>
           <div className='relative mr-4 lg:w-full'>
             <label className='text-sm leading-7 text-gray-600'>Entity ID</label>
-            <input
-              type='text'
-              defaultValue={entityId}
-              className='w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out bg-gray-100 bg-opacity-50 border border-gray-300 rounded outline-none focus:ring-2 focus:ring-indigo-200 focus:bg-transparent focus:border-indigo-500'
-            />
+            <input type='text' defaultValue={entityId} className='w-full input' />
           </div>
         </div>
         <div className='flex items-end w-full px-8 mx-auto mt-5 space-y-4 lg:w-2/3 sm:space-x-4 sm:space-y-0 sm:px-0'>
           <div className='relative lg:w-full'>
             <label className='text-sm leading-7 text-gray-600'>Certificate</label>
-            <textarea
-              rows={5}
-              defaultValue={certificate}
-              className='w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out bg-gray-100 bg-opacity-50 border border-gray-300 rounded outline-none focus:ring-2 focus:ring-indigo-200 focus:bg-transparent focus:border-indigo-500'></textarea>
+            <textarea rows={5} defaultValue={certificate} className='w-full input'></textarea>
           </div>
         </div>
         <div className='flex items-end w-full px-8 mx-auto mt-5 space-y-4 lg:w-2/3 sm:space-x-4 sm:space-y-0 sm:px-0'>
diff --git a/styles/globals.css b/styles/globals.css
index 2cf8478..ab576b3 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -27,7 +27,8 @@ a {
   .button {
     @apply block px-4 py-2 font-semibold leading-8 text-white rounded-lg shadow-md bg-indigo-500 hover:bg-indigo-600 focus:outline-none focus:ring-4 focus:ring-indigo-300 focus:ring-opacity-100;
   }
+
   .input {
-    @apply border-2 border-solid border-[#8b8a8b] leading-10 px-4 py-2 rounded-md focus:border-[#5a5dbb] focus:outline-none;
+    @apply px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out bg-gray-100 bg-opacity-50 border border-gray-300 rounded-md outline-none focus:ring-2 focus:ring-indigo-300 focus:bg-transparent focus:border-indigo-500;
   }
 }