diff --git a/cmd/templates/index.tmpl b/cmd/templates/index.tmpl
new file mode 100644
index 0000000..b29c255
--- /dev/null
+++ b/cmd/templates/index.tmpl
@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cats of Mastodon! - Mahdium</title>
+    <style>
+    @import url('https://fonts.googleapis.com/css2?family=Atma:wght@300;400;500;600;700&display=swap');
+    body {
+        font-family: "Atma", system-ui;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+        background-color: #1e1e1e;
+        color: #e0e0e0;
+        margin: 0;
+        overflow-x: hidden;
+    }
+
+    .mastodon-title {
+        font-size: 2.5em;
+        margin-bottom: 10px;
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+        text-align: center;
+    }
+
+    .welcome-message {
+        margin-bottom: 20px;
+        font-size: 1.2em;
+        line-height: 1.5;
+        text-align: center;
+    }
+
+    .welcome-message span {
+        font-size: 1.5em;
+    }
+
+    .post-container {
+        background-color: #282828;
+        border-radius: 15px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        padding: 20px;
+        width: 90%;
+        max-width: 500px;
+        text-align: center;
+        transition: transform 0.2s ease-in-out;
+        margin-bottom: 20px;
+    }
+
+    .post-container:hover {
+        transform: scale(1.02);
+    }
+
+    .post-title-inner {
+        margin-bottom: 10px;
+        font-size: 1.2em;
+    }
+
+    .user-name {
+        color: #ffb347;
+        font-weight: bold;
+        font-size: 1.2em;
+    }
+
+    .cat-text {
+        color: #bbdefb;
+        font-style: italic;
+    }
+
+    .post-image {
+        width: 100%;
+        border-radius: 10px;
+        margin-bottom: 15px;
+        object-fit: cover;
+        max-height: 500px;
+        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+        transition: opacity 0.3s ease;
+    }
+
+    .post-image.loading {
+        opacity: 0;
+    }
+
+    .image-container {
+        position: relative;
+        display: inline-block;
+    }
+
+    .image-loading-spinner {
+        display: none;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border: 4px solid #f3f3f3;
+        border-top: 4px solid #6364ff;
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        animation: spin 1s linear infinite;
+    }
+
+    .post-image.loading + .image-loading-spinner {
+        display: block;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    .button-container {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        width: 100%;
+    }
+
+    .mastodon-button,
+    .neutral-button {
+        background-color: #404040;
+        color: #e0e0e0;
+        border: none;
+        padding: 12px 18px;
+        border-radius: 8px;
+        cursor: pointer;
+        text-decoration: none;
+        width: 100%;
+        box-sizing: border-box;
+        transition: background-color 0.3s ease, transform 0.2s ease-in-out;
+        font-weight: 500;
+    }
+
+    .mastodon-button {
+        background-color: #6364ff;
+    }
+
+    .mastodon-button:hover {
+        background-color: #5253e0;
+        transform: scale(1.03);
+    }
+
+    .neutral-button:hover {
+        background-color: #505050;
+        transform: scale(1.03);
+    }
+
+    .loading-spinner {
+        display: none;
+        border: 6px solid #f3f3f3;
+        border-top: 6px solid #6364ff;
+        border-radius: 50%;
+        width: 60px;
+        height: 60px;
+        animation: spin 1s linear infinite;
+        margin: 20px auto;
+    }
+
+    .post-container.loading .loading-spinner {
+        display: block;
+    }
+
+    .post-container.loading .post-image,
+    .post-container.loading .button-container,
+    .post-container.loading .post-title-inner {
+        display: none;
+    }
+
+    .footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px;
+        font-size: 0.8em;
+        color: #909090;
+        width: 90%;
+        max-width: 500px;
+        margin: 0 auto;
+    }
+
+    .footer a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .footer a:hover {
+        text-decoration: underline;
+    }
+
+    .footer-button {
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+    }
+</style>
+</head>
+<body>
+<h2 class="mastodon-title">Cats of Mastodon!</h2>
+<p class="welcome-message">Welcome to Daily Catventures! </br> Get your daily dose of purr-fectly adorable feline fun! <span>✨</span><br>Posts gathered across Mastodon 🤝</p>
+<div class="post-container">
+    <div class="post-content">
+        <div class="post-title-inner">
+            <span class="user-name">{{ .DisplayName }}</span><span class="cat-text">'s cat!</span>
+        </div>
+        <div class="image-container">
+            <img class="post-image" src="{{ .MediaAttachment.RemoteUrl }}" alt="Cat Photo">
+            <div class="image-loading-spinner"></div>
+        </div>
+        <div class="button-container">
+            <a class="mastodon-button" href="{{ .URL }}" target="_blank">View on Mastodon</a>
+            <button class="neutral-button" onclick="window.location.reload()">Show me another cat!</button>
+        </div>
+    </div>
+</div>
+
+<div class="footer">
+    <span>© 2024 Mahdium</span>
+    <a href="https://mahdium.ir" class="footer-button">mahdium.ir</a>
+    <a href="https://gitlab.com/mahdium/cats-of-mastodon-telegram-bot" class="footer-button">Source Code</a>
+</div>
+</body>
+</html>
+
diff --git a/internal/handlers/home/mainPage.go b/internal/handlers/home/mainPage.go
index 3111826..b714c0d 100644
--- a/internal/handlers/home/mainPage.go
+++ b/internal/handlers/home/mainPage.go
@@ -17,7 +17,11 @@ func NewMainPageHandler(appContext *internal.AppContext) *MainPageHandler {
 }
 
 func (appContext *MainPageHandler) HomePageHandler(c *gin.Context) {
-	c.JSON(200, gin.H{
-		"YouAreOn": "HomePage",
+	randomPost := appContext.AppContext.PostService.GetRandomPost()
+
+	c.HTML(200, "index.tmpl", gin.H{
+		"DisplayName": randomPost.Account.DisplayName,
+		"MediaAttachment": randomPost.Attachments[0],
+		"URL": randomPost.Url,
 	})
 }
\ No newline at end of file
diff --git a/internal/server/router.go b/internal/server/router.go
index c5ed971..c4dfab4 100644
--- a/internal/server/router.go
+++ b/internal/server/router.go
@@ -3,31 +3,31 @@ package server
 import (
 	"CatsOfMastodonBotGo/internal"
 	handlers_admin "CatsOfMastodonBotGo/internal/handlers/admin"
+	handlers_api "CatsOfMastodonBotGo/internal/handlers/api"
 	handlers_home "CatsOfMastodonBotGo/internal/handlers/home"
-  handlers_api "CatsOfMastodonBotGo/internal/handlers/api"
 
 	"github.com/gin-gonic/gin"
 )
 
-
 func SetupRouter(r *gin.Engine, appContext *internal.AppContext) *gin.Engine {
 
-  adminDashboardHandler := handlers_admin.NewAdminDashboardHandler(appContext)
-  homePageHandler := handlers_home.NewMainPageHandler(appContext)
-  apiHandler := handlers_api.NewApiEndpointHandler(appContext)
+	r.LoadHTMLGlob("templates/*")
 
-admin := r.Group("/admin")
-  
-    admin.GET("/", adminDashboardHandler.AdminHomePage)
-    admin.POST("/approve", adminDashboardHandler.ApproveMedia)
-    admin.POST("/reject", adminDashboardHandler.RejectMedia)
+	adminDashboardHandler := handlers_admin.NewAdminDashboardHandler(appContext)
+	homePageHandler := handlers_home.NewMainPageHandler(appContext)
+	apiHandler := handlers_api.NewApiEndpointHandler(appContext)
 
-api := r.Group("/api")
+	admin := r.Group("/admin")
 
-    api.GET("/post/random", apiHandler.GetRandomPost)
+	admin.GET("/", adminDashboardHandler.AdminHomePage)
+	admin.POST("/approve", adminDashboardHandler.ApproveMedia)
+	admin.POST("/reject", adminDashboardHandler.RejectMedia)
 
-r.GET("/", homePageHandler.HomePageHandler)
+	api := r.Group("/api")
 
-return r
+	api.GET("/post/random", apiHandler.GetRandomPost)
+
+	r.GET("/", homePageHandler.HomePageHandler)
+
+	return r
 }
-
