diff --git a/config/directory.py b/config/directory.py
index a800622..8b3b7e3 100644
--- a/config/directory.py
+++ b/config/directory.py
@@ -13,6 +13,11 @@ static = [
     {
         "route" :"/js/<filepath:re:.*\.(js)>",
         "root"  :"./static/js"
+    },
+    # add image route
+    {
+        "route" :"/img/<filepath:re:.*\.(jpg|png|webp)>",
+        "root"  :"./static/img"
     }
 ]
 template.add(static, "templates")
diff --git a/modules/public/home.py b/modules/public/home.py
index 4c13bff..cfa61f7 100644
--- a/modules/public/home.py
+++ b/modules/public/home.py
@@ -9,8 +9,6 @@ class main:
     def html(self, params):
         return Template(params["mako"]["website"]['index']).render(
             title	= globalvar.title,
-            header	= "Welcome to CostaCoffe",
-            sub_header = "Best Place To Buy Coffe",
             navbar	= Template(params["mako"]["website"]['navbar']).render(
                 title       = globalvar.title,
                 menu		= globalvar.menu['public']['navbar'],
@@ -21,6 +19,8 @@ class main:
                 copyright	= globalvar.copyright,
             ),
             container	= Template(params["mako"]["website"]['container']).render(
-                greeting	= f"Welcome to your new web application! This placeholder page is here to let you know that your web framework is successfully set up and ready to go. Now, it's time to start building your project. Dive into the documentation to explore the features and capabilities at your disposal."
+                header	= "Welcome to CostaCoffe",
+                sub_header = "Best Place To Buy Coffe",
+                header_desc	= f"Experience the rich flavors and aromas of our premium coffee"
             )
         )
diff --git a/pages/public/home.html b/pages/public/home.html
index ef7c1f5..741a8dd 100644
--- a/pages/public/home.html
+++ b/pages/public/home.html
@@ -1 +1,15 @@
-<p>${greeting}</p>
+<div class="hero">
+    <h3>${sub_header}</h3>
+    <h1>${header}</h1>
+    <p>${header_desc}</p>
+    <img src="/img/coffe-unsplash.jpg"
+        alt="Coffe image">
+</div>
+
+<div class="about">
+    <h2>About</h2>
+    <p>At CostaCoffee, we are passionate about delivering the finest coffee experience to our customers. Our journey
+        begins with sourcing high-quality beans from sustainable farms around the world, ensuring that every cup
+        supports local communities and promotes eco-friendly practices. </p>
+    <img src="/img/signature.png" alt="">
+</div>
\ No newline at end of file
diff --git a/static/css/home.css b/static/css/home.css
new file mode 100644
index 0000000..6529d43
--- /dev/null
+++ b/static/css/home.css
@@ -0,0 +1,46 @@
+.hero {
+    max-width: 768px;
+    text-align: center;
+    margin: 0 auto;
+}
+
+.hero img {
+    width: 720px;
+    height: 360px;
+    object-fit: cover;
+    border-radius: 2rem;
+}
+
+.hero h3 {
+    font-size: 1.12rem;
+    font-weight: 500;
+    margin-bottom: 0;
+}
+
+.hero h1 {
+    font-size: 2.4rem;
+    font-weight: 600;
+    margin-top: 0.8rem;
+}
+
+.hero p {
+    max-width: 50%;
+    margin: 0 auto 2rem auto;
+    color: grey;
+    font-size: 1.12rem;
+}
+
+.about {
+    max-width: 768px;
+    text-align: center;
+    margin: 0 auto;
+    margin-top: 8rem;
+}
+
+.about h2 {
+    font-size: 2rem;
+}
+
+.about img {
+    width: 380px;
+}
\ No newline at end of file
diff --git a/static/img/coffe-unsplash.jpg b/static/img/coffe-unsplash.jpg
new file mode 100644
index 0000000..91040a8
Binary files /dev/null and b/static/img/coffe-unsplash.jpg differ
diff --git a/static/img/signature.png b/static/img/signature.png
new file mode 100644
index 0000000..46ab531
Binary files /dev/null and b/static/img/signature.png differ
diff --git a/templates/plain/html/index.html b/templates/plain/html/index.html
index 27eccb4..117bda8 100644
--- a/templates/plain/html/index.html
+++ b/templates/plain/html/index.html
@@ -7,16 +7,13 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 	<title>${title}</title>
 	<link rel="stylesheet" href="/templates/plain/css/style.css">
-	<!-- <link rel="stylesheet" href="/css/index.sass"> -->
+	<link rel="stylesheet" href="/css/home.css">
 	<script src="/js/feather.min.js"></script>
 
 </head>
 
 <body>
 	${navbar}
-	<header>
-		<h1>${header}</h1>
-	</header>
 	<main>
 		${container}
 	</main>
diff --git a/templates/plain/static/css/style.css b/templates/plain/static/css/style.css
index 47a3b3c..95c15c1 100644
--- a/templates/plain/static/css/style.css
+++ b/templates/plain/static/css/style.css
@@ -54,11 +54,10 @@ main {
 }
 
 footer {
-  background-color: #333;
-  color: #fff;
+  margin-top: 8rem;
+  color: gray;
   text-align: center;
-  padding: 10px;
-  position: fixed;
+  padding: 1.2rem 0;
   width: 100%;
   bottom: 0;
 }