diff --git a/docs/site/src/components/CTF/ctf-verifier.tsx b/docs/site/src/components/CTF/ctf-verifier.tsx
index 530ddf2d44f..d6ee34965ca 100644
--- a/docs/site/src/components/CTF/ctf-verifier.tsx
+++ b/docs/site/src/components/CTF/ctf-verifier.tsx
@@ -5,6 +5,7 @@ import {
 } from '@iota/dapp-kit';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { getFullnodeUrl, IotaClient } from '@iota/iota-sdk/client';
+import clsx from 'clsx';
 
 // Define props interface
 interface ChallengeVerifierProps {
@@ -45,18 +46,19 @@ const ChallengeVerifier: React.FC<ChallengeVerifierProps> = ({ expectedObjectTyp
   };
 
   return (
-    <div>
+    <div className='flex items-center'>
       <input
         type="text"
         value={inputText}
         onChange={(e) => setInputText(e.target.value)}
         placeholder="Enter Flag Object Id"
+        className="input-field mr-2"
       />
-      <button onClick={handleSubmit} disabled={loading}>
+      <button onClick={handleSubmit} className={clsx("button", { "button-disabled": loading })}>
         {loading ? 'Loading...' : 'Submit'}
       </button>
 
-      {error && <p style={{ color: 'red' }}>{error}</p>}
+      {error && <p className='text-red-500 text-center mb-0 ml-2'>{error}</p>}
 
       {coins && (
         <div>
@@ -90,4 +92,4 @@ const withProviders = (Component: React.FC<ChallengeVerifierProps>) => {
 };
 
 // Export the component wrapped in providers
-export default withProviders(ChallengeVerifier);
+export default withProviders(ChallengeVerifier);
\ No newline at end of file