diff --git a/src/components/core/Cdiv.js b/src/components/core/Cdiv.js
new file mode 100644
index 0000000..e7fa8e5
--- /dev/null
+++ b/src/components/core/Cdiv.js
@@ -0,0 +1,15 @@
+//============================================================
+// Essential Imports
+//============================================================
+
+import React from 'react';
+import clsx from 'clsx';
+
+//============================================================
+// Component
+//============================================================
+
+const Cdiv = ({ className, children }) => {
+  return <div className={clsx('flex justify-center items-center', className)}>{children}</div>;
+};
+export default Cdiv;
diff --git a/src/components/pages/Front.page.js b/src/components/pages/Front.page.js
index 1eb2bf7..a2a5814 100644
--- a/src/components/pages/Front.page.js
+++ b/src/components/pages/Front.page.js
@@ -9,6 +9,7 @@ import React from 'react';
 //============================================================
 
 import AppearText from '../text/AppearText';
+import Cdiv from '../core/Cdiv';
 
 //============================================================
 // Component
@@ -16,10 +17,37 @@ import AppearText from '../text/AppearText';
 
 const FrontPage = () => {
   return (
-    <div className="w-full h-screen flex justify-center items-center bg-polar-night-400">
-      <div className="flex flex-col justify-center items-center">
-        <AppearText className="font-mono text-7xl text-frost-400" text="JOHN COSTA" delay={100} />
-        <AppearText className="font-mono text-5xl text-frost-200" text="DEVELOPER" delay={1200} />
+    <div className="w-full h-screen bg-polar-night-400">
+      <Cdiv className="w-full h-32 py-6 px-24">
+        <Cdiv className="w-full h-full gap-2">
+          <Cdiv className="flex-1 h-full">
+            <AppearText
+              className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
+              text="Option #1"
+              delay={2500}
+            />
+          </Cdiv>
+          <Cdiv className="flex-1 h-full">
+            <AppearText
+              className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
+              text="Option #2"
+              delay={2500}
+            />
+          </Cdiv>
+          <Cdiv className="flex-1 h-full">
+            <AppearText
+              className="font-mono text-2xl text-snow-storm-300 cursor-pointer hover:text-3xl hover:text-snow-storm-100"
+              text="Option #3"
+              delay={2500}
+            />
+          </Cdiv>
+        </Cdiv>
+      </Cdiv>
+      <div className="w-full h-3/5 flex justify-center items-center">
+        <div className="flex flex-col gap-4 justify-center items-center">
+          <AppearText className="font-mono text-7xl text-frost-400" text="JOHN COSTA" delay={750} />
+          <AppearText className="font-mono text-5xl text-frost-200" text="DEVELOPER" delay={1500} />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/text/AppearText.js b/src/components/text/AppearText.js
index 28e00cc..23dacd9 100644
--- a/src/components/text/AppearText.js
+++ b/src/components/text/AppearText.js
@@ -10,7 +10,7 @@ import clsx from 'clsx';
 //============================================================
 
 const AppearText = ({ text, delay, className }) => {
-  const [showText, setShowText] = useState('');
+  const [showText, setShowText] = useState('opacity-0');
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -24,7 +24,7 @@ const AppearText = ({ text, delay, className }) => {
 
   return (
     <>
-      <h1 className={clsx('transition-all ease-in-out delay-1000 opacity-0', className, showText)}>
+      <h1 className={clsx('transition-all ease-in-out duration-500', className, showText)}>
         {text}
       </h1>
     </>