diff --git a/src/components/App.jsx b/src/components/App.jsx
index cf4b396..ccef955 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -2,7 +2,7 @@ import '../styles/styles.scss';
 import * as THREE from 'three';
 import { useRef, useState } from 'react';
 import { useFrame } from '@react-three/fiber';
-import { Text, Environment, MeshReflectorMaterial, useTexture, MeshDistortMaterial } from '@react-three/drei';
+import { Text, Environment, MeshReflectorMaterial, useTexture, MeshDistortMaterial, Html } from '@react-three/drei';
 import { gsap } from 'gsap';
 
 import dreiVideo from '../assets/videos/drei.mp4';
@@ -78,7 +78,10 @@ const App = () => {
             />
           </meshStandardMaterial>
         </Text>
-        <mesh position={[2, 1.8, -3.2]} ref={cloudRef} onPointerEnter={meshAnimation} fog={false}>
+        <Html position={[-1.5, 1.4, -3.2]} rotation={[0, 0, 0]}>
+          <h1 onClick={meshAnimation} className="text-4xl font-bold text-white cursor-pointer">HELLO</h1>
+        </Html>
+        <mesh position={[2, 1.8, -3.2]} ref={cloudRef} fog={false}>
           <sphereBufferGeometry attach="geometry" />
           <MeshDistortMaterial
             attach="material"
diff --git a/src/views/index.html b/src/views/index.html
index fa7da63..3dd56cd 100644
--- a/src/views/index.html
+++ b/src/views/index.html
@@ -10,6 +10,9 @@
   <link rel="stylesheet" href="https://use.typekit.net/bcf6wms.css">
 </head>
 <body>
-  <main id="root"></main>
+  <div id="root"></div>
+  <main id="main-content">
+    
+  </main>
 </body>
 </html>
\ No newline at end of file
