diff --git a/app/components/Home_Banner.tsx b/app/components/Home_Banner.tsx
index bd96199..a2bc388 100644
--- a/app/components/Home_Banner.tsx
+++ b/app/components/Home_Banner.tsx
@@ -1,18 +1,21 @@
-import React from 'react'
+import React from "react";
 
-export const Home_Banner = () => {
+export const Home_Banner: React.FC = () => {
   return (
-    <div className='hero_img'>
-        <div className='hero_text'>
-            <h3>Bring Your Story to Life</h3>
-            <p>Start creating your own ebook today — share your voice, inspire readers, and publish to the world in just a few clicks.</p>
-            <button>Create an ebook</button>
-        </div>
-        <div className='hero_cards'>
-            <div className='card_1'></div>
-            <div className='card_2'></div>
-            <div className='card_3'></div>
-        </div>
+    <div className="hero_img">
+      <div className="hero_text">
+        <h3>Bring Your Story to Life</h3>
+        <p>
+          Start creating your own ebook today — share your voice, inspire readers,
+          and publish to the world in just a few clicks.
+        </p>
+        <button>Create an ebook</button>
+      </div>
+      <div className="hero_cards">
+        <div className="card_1"></div>
+        <div className="card_2"></div>
+        <div className="card_3"></div>
+      </div>
     </div>
-  )
-}
+  );
+};
diff --git a/app/components/Recent_Card.tsx b/app/components/Recent_Card.tsx
index 80bbb2e..97e58d9 100644
--- a/app/components/Recent_Card.tsx
+++ b/app/components/Recent_Card.tsx
@@ -1,21 +1,28 @@
 import Image from "next/image";
 import React from "react";
 
-const Recent_Card = (props: any) => {
+interface RecentCardProps {
+  image: string;
+  title: string;
+  tag: string;
+  description: string;
+}
+
+const Recent_Card: React.FC<RecentCardProps> = ({ image, title, tag, description }) => {
   return (
     <div className="flex flex-col justify-start items-start">
       <div className="recent_card flex justify-center items-center">
         <Image
-          src={props.image}
+          src={image}
           alt="image"
           className="card_img"
           width={100}
           height={100}
         />
       </div>
-      <h3 className="text-[14px] font-[400] text-slate-900 ">{props.title}</h3>
+      <h3 className="text-[14px] font-[400] text-slate-900">{title}</h3>
       <p className="text-[10px] font-[400] text-slate-400">
-        {props.tag} {" "} <span> {props.description}</span>
+        {tag} <span> {description}</span>
       </p>
     </div>
   );
diff --git a/app/components/Recent_Creation.tsx b/app/components/Recent_Creation.tsx
index f75a346..259e066 100644
--- a/app/components/Recent_Creation.tsx
+++ b/app/components/Recent_Creation.tsx
@@ -2,9 +2,8 @@ import Image from "next/image";
 import React from "react";
 import { FaSlidersH } from "react-icons/fa";
 import Recent_Card from "./Recent_Card";
-import { title } from "process";
 
-const Recent_Creation = () => {
+const Recent_Creation: React.FC = () => {
   return (
     <div className="recent_container">
       <div className="recent_title">
@@ -13,34 +12,34 @@ const Recent_Creation = () => {
       </div>
       <div className="grid sm:grid-cols-2 md:grid-cols-5 gap-4 mt-2">
         <Recent_Card
-          image={"/assets/aa31529b95af9b43380b88b11692b0a6f7999878.png"}
-          title={"Good morning Gabe Hager!"}
-          tag={"Ebook"}
-          description={"Edited 13 mins ago"}
+          image="/assets/aa31529b95af9b43380b88b11692b0a6f7999878.png"
+          title="Good morning Gabe Hager!"
+          tag="Ebook"
+          description="Edited 13 mins ago"
         />
         <Recent_Card
-          image={"/assets/d5d8f9fe19a7aed7bf6545a64634eeb37a6b895a.png"}
-          title={"Story of my life (Story by Lak..."}
-          tag={"Ebook"}
-          description={"Edited 5 hours ago"}
+          image="/assets/d5d8f9fe19a7aed7bf6545a64634eeb37a6b895a.png"
+          title="Story of my life (Story by Lak..."
+          tag="Ebook"
+          description="Edited 5 hours ago"
         />
         <Recent_Card
-          image={"/assets/d3cf3b09c1fd3dc0d6a997a7a479337fdf8caa69.png"}
-          title={"Good morning Gabe Hager!"}
-          tag={"Ebook"}
-          description={"Edited 10 mins ago"}
+          image="/assets/d3cf3b09c1fd3dc0d6a997a7a479337fdf8caa69.png"
+          title="Good morning Gabe Hager!"
+          tag="Ebook"
+          description="Edited 10 mins ago"
         />
         <Recent_Card
-          image={"/assets/96c1b745b59fe1512c73f653d7b5e7be3ee54e58.png"}
-          title={"A fantastic saga, the super..."}
-          tag={"Ebook"}	
-          description={"Edited 1 month ago"}
+          image="/assets/96c1b745b59fe1512c73f653d7b5e7be3ee54e58.png"
+          title="A fantastic saga, the super..."
+          tag="Ebook"
+          description="Edited 1 month ago"
         />
         <Recent_Card
-          image={"/assets/292c2c8f2ea3276c44dc6ade84e687b9cae3d267.png"}
-          title={"Good morning Gabe Hager!"}
-          tag={"Ebook"}
-          description={"Edited 20 hours ago"}
+          image="/assets/292c2c8f2ea3276c44dc6ade84e687b9cae3d267.png"
+          title="Good morning Gabe Hager!"
+          tag="Ebook"
+          description="Edited 20 hours ago"
         />
       </div>
     </div>
diff --git a/app/creator/page.tsx b/app/creator/page.tsx
index ab3943f..346e990 100644
--- a/app/creator/page.tsx
+++ b/app/creator/page.tsx
@@ -1,11 +1,13 @@
 import { Home_Banner } from "../components/Home_Banner";
 import Recent_Creation from "../components/Recent_Creation";
 
-export default function CreatorPage() {
-    return (
+const CreatorPage: React.FC = () => {
+  return (
     <div className="w-full h-[80vh] flex flex-col items-center justify-start bg-[#F3F3F3]">
       <Home_Banner />
       <Recent_Creation />
     </div>
-    )
-}
\ No newline at end of file
+  );
+};
+
+export default CreatorPage;
diff --git a/app/page.tsx b/app/page.tsx
index 9e33e8c..010190d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,16 @@
+import React from "react";
 
-
-export default function Home() {
+const Home: React.FC = () => {
   return (
-    <div className="w-[100%] h-[96vh] px-4 flex flex-col items-center justify-center" style={{ backgroundColor: "#F2F4F8" }}>
+    <div
+      className="w-[100%] h-[96vh] px-4 flex flex-col items-center justify-center"
+      style={{ backgroundColor: "#F2F4F8" }}
+    >
       <div>
         Home Page
       </div>
     </div>
   );
-}
+};
+
+export default Home;