diff --git a/handlers/landingpage.handlers.go b/handlers/landingpage.handlers.go
index 84e332a..1e4510d 100644
--- a/handlers/landingpage.handlers.go
+++ b/handlers/landingpage.handlers.go
@@ -14,6 +14,7 @@ type LandingPageService interface {
 	GetClientService() ([]services.ClientService, error)
 	GetClientAdvantage() ([]services.AdvantageClient, error)
 	GetPromotionList() ([]services.Promotion, error)
+	GetFooterNavList() ([]services.FooterNav, error)
 }
 
 func NewLandingPageHandler(us LandingPageService) *LandingPageHandler {
@@ -42,11 +43,15 @@ func (uh *LandingPageHandler) ShowLandingPage(c echo.Context) error {
 		// fmt.Println(err)
 		return err
 	}
+	ftNav, err := uh.LandingPageService.GetFooterNavList()
+	if err != nil {
+		return err
+	}
 	fmt.Printf("%+v\n", udata)
 	helo := landingpage.ShowLandingPage("Hello World",
 		landingpage.MainLandingPage(landingpage.ListMedicalService(udata),
 			landingpage.ListAdvantage(adData), landingpage.ListPromotion(lpData),
-			landingpage.Footer()),
+			landingpage.FooterSection(ftNav)),
 		landingpage.CssLandingPage(),
 		landingpage.JsLandingPage())
 	return uh.View(c, helo)
diff --git a/services/landingpage.services.go b/services/landingpage.services.go
index 419a1ef..efae3b9 100644
--- a/services/landingpage.services.go
+++ b/services/landingpage.services.go
@@ -40,6 +40,18 @@ type Promotion struct {
 	PromotionLink  string `json:"PromotionLink"`
 }
 
+type FooterSubNav struct {
+	FootSubNavID    int    `json:"FootSubNavID"`
+	FootSubNavTitle string `json:"FootSubNavTitle"`
+	FootSubNavLink  string `json:"FootSubNavLink"`
+}
+
+type FooterNav struct {
+	FooterNavID    int            `json:"FooterNavID"`
+	FooterNavTitle string         `json:"FooterNavTitle"`
+	FooteSubNav    []FooterSubNav `json:"FooterSubNav,omitempty"`
+}
+
 type ServicesLandingPage struct {
 	LandingPage      LandingPage
 	LandingPageStore db.LandingPageStore
@@ -203,3 +215,73 @@ func (su *ServicesLandingPage) GetPromotionList() ([]Promotion, error) {
 
 	return data, nil
 }
+func (su *ServicesLandingPage) GetFooterNavList() ([]FooterNav, error) {
+	data := []FooterNav{
+		{
+			FooterNavID:    1,
+			FooterNavTitle: "Dashboard",
+			FooteSubNav: []FooterSubNav{
+				{
+					FootSubNavID:    1,
+					FootSubNavTitle: "Dashboard #1",
+					FootSubNavLink:  "/",
+				},
+				{
+					FootSubNavID:    2,
+					FootSubNavTitle: "Dashboard #2",
+					FootSubNavLink:  "/",
+				},
+			},
+		},
+		{
+			FooterNavID:    2,
+			FooterNavTitle: "Benefit",
+			FooteSubNav: []FooterSubNav{
+				{
+					FootSubNavID:    1,
+					FootSubNavTitle: "Benefit #1",
+					FootSubNavLink:  "/",
+				},
+				{
+					FootSubNavID:    2,
+					FootSubNavTitle: "Benefit #2",
+					FootSubNavLink:  "/",
+				},
+			},
+		},
+		{
+			FooterNavID:    3,
+			FooterNavTitle: "Finance & Claims",
+			FooteSubNav: []FooterSubNav{
+				{
+					FootSubNavID:    1,
+					FootSubNavTitle: "Finance & Claims #1",
+					FootSubNavLink:  "/",
+				},
+				{
+					FootSubNavID:    2,
+					FootSubNavTitle: "Finance & Claims #2",
+					FootSubNavLink:  "/",
+				},
+			},
+		},
+		{
+			FooterNavID:    4,
+			FooterNavTitle: "Memberships",
+			FooteSubNav: []FooterSubNav{
+				{
+					FootSubNavID:    1,
+					FootSubNavTitle: "Memberships #1",
+					FootSubNavLink:  "/",
+				},
+				{
+					FootSubNavID:    2,
+					FootSubNavTitle: "Memberships #2",
+					FootSubNavLink:  "/",
+				},
+			},
+		},
+	}
+
+	return data, nil
+}
diff --git a/views/landingpage/footer.templ b/views/landingpage/footer.templ
index 120127c..16b5c73 100644
--- a/views/landingpage/footer.templ
+++ b/views/landingpage/footer.templ
@@ -1,58 +1,118 @@
 package landingpage
 
-templ FooterSection() {
+import "github.com/emarifer/go-templ-project-structure/services"
+
+templ FooterContact() {
+    <div class="text-white d-flex flex-row mb-3">
+        <!-- style="display: flex; flex-direction: row; color: white;align-items: start; margin-bottom: 24px;" -->
+        <div class="mr-3 mt-1">
+            <i
+                class="fas fa-map-marker-alt marker footer-icon text-warning"
+            ></i>
+        </div>
+        <div class="flex-grow-1">
+            // <p class="footer-sub-title text-grey">
+            //     { alamat }
+            // </p>
+            <p class="footer-sub-title text-grey">
+                Jl. Cipaku I No.5, RT.2/RW.4, Petogogan, Kec. Kby. Baru, Kota
+                Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12170
+            </p>            
+        </div>
+    </div>
+    <div class="d-flex flex-row">
+        <div class="mr-3 mt-1">
+            <i class="fas fa-phone footer-icon text-warning"></i>
+        </div>
+        <div class="flex-grow-1">
+            // for _, d := range phone {
+            //     <p class="footer-sub-title text-grey">{ d }</p>
+            // }
+            <p class="footer-sub-title text-grey">021-7392345</p>
+            <p class="footer-sub-title text-grey">021-2702525</p>
+            <p class="footer-sub-title text-grey">021-7255080</p>
+        </div>
+    </div> 
+}
+
+templ FooterNav(title string, data []services.FooterSubNav) {
+    <div class="col-md col-lg">
+        <h4 class="footer-title text-white">{ title }</h4>
+        for _, d := range data {
+            <div>
+                <a class="footer-sub-title text-grey" href={ templ.SafeURL(d.FootSubNavLink) }>{ d.FootSubNavTitle }</a>
+            </div>
+        }
+    </div>    
+}
+
+templ FooterSection(navlist []services.FooterNav) {
 	<footer class="wrapper-custom bg-black pb-25 pt-25 mt-25">
-		<div class="row mb-5">
-			<div class="col-md-12 col-lg">
-				<img
-					src="asset-corporate-portal/media/landingpage/logo.png"
-					class="logo-footer"
-					width="126"
-					height="40"
-					alt="Your Brand"
-				/>
-				<div class="text-white d-flex flex-row mb-3">
-					<!-- style="display: flex; flex-direction: row; color: white;align-items: start; margin-bottom: 24px;" -->
-					<div class="mr-3 mt-1">
-						<i
-							class="fas fa-map-marker-alt marker footer-icon text-warning"
-						></i>
-					</div>
-					<div class="flex-grow-1">
-						<p class="footer-sub-title text-grey">
-							Jl. Cipaku I No.5, RT.2/RW.4, Petogogan, Kec. Kby. Baru, Kota
-							Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12170
-						</p>
-					</div>
-				</div>
-				<div class="d-flex flex-row">
-					<div class="mr-3 mt-1">
-						<i class="fas fa-phone footer-icon text-warning"></i>
-					</div>
-					<div class="flex-grow-1">
-						<p class="footer-sub-title text-grey">021-7392345</p>
-						<p class="footer-sub-title text-grey">021-2702525</p>
-						<p class="footer-sub-title text-grey">021-7255080</p>
-					</div>
-				</div>
-			</div>
-			<div class="col-md col-lg">
-				<h4 class="footer-title text-white mb-3">Dashboard</h4>
-				<p class="footer-sub-title text-grey">
-					Employee Medical Health Analytic Clinic Admission
-				</p>
-			</div>
-			<div class="col-md col-lg">
-				<h4 class="footer-title text-white">Benefit</h4>
-			</div>
-			<div class="col-md col-lg">
-				<h4 class="footer-title text-white">Finance & Claims</h4>
-			</div>
-			<div class="col-md col-lg">
-				<h4 class="footer-title text-white">Membership</h4>
-			</div>
-		</div>
-		<div class="garis bg-grey"></div>
+        // HP
+        <div class="d-xs-block d-sm-block d-md-none">
+            <div class="row mb-5">
+                <div class="col-md col-lg">
+                    <img
+                        src="asset-corporate-portal/media/landingpage/logo.png"
+                        class="logo-footer"
+                        width="126"
+                        height="40"
+                        alt="Your Brand"
+                    />
+                    @FooterContact()
+                </div>
+                <div class="mt-5">
+                    for _, d := range navlist {
+                        @FooterNav(d.FooterNavTitle, d.FooteSubNav)
+                    }                   
+                </div> 
+            </div>            
+        </div>
+        // End HP
+
+        // Tablet
+        <div class="d-none d-md-block d-lg-none">
+            <div class="row mb-5">
+                <div class="col-md col-lg">
+                    <img
+                        src="asset-corporate-portal/media/landingpage/logo.png"
+                        class="logo-footer"
+                        width="126"
+                        height="40"
+                        alt="Your Brand"
+                    />
+                    @FooterContact()
+                </div>
+                <div class="col-md col-lg">
+                    for _, d := range navlist {
+                        @FooterNav(d.FooterNavTitle, d.FooteSubNav)
+                    }                                                       
+                </div>
+            </div>            
+        </div>
+        // End Tablet
+
+		// Dekstop
+        <div class="d-none d-lg-block">
+            <div class="row mb-5">
+                <div class="col-md-12 col-lg">
+                    <img
+                        src="asset-corporate-portal/media/landingpage/logo.png"
+                        class="logo-footer"
+                        width="126"
+                        height="40"
+                        alt="Your Brand"
+                    />
+                    @FooterContact()
+                </div>
+                for _, d := range navlist {
+                    @FooterNav(d.FooterNavTitle, d.FooteSubNav)
+                }
+            </div>            
+        </div>
+        // End Dekstop
+        
+        <div class="garis bg-grey"></div>
 		<div class="row mt-4">
 			<div class="col-md-6">
 				<p class="footer-sub-title text-grey">
diff --git a/views/landingpage/footer_templ.go b/views/landingpage/footer_templ.go
new file mode 100644
index 0000000..02853f0
--- /dev/null
+++ b/views/landingpage/footer_templ.go
@@ -0,0 +1,184 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package landingpage
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import "github.com/emarifer/go-templ-project-structure/services"
+
+func FooterContact() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"text-white d-flex flex-row mb-3\"><!-- style=\"display: flex; flex-direction: row; color: white;align-items: start; margin-bottom: 24px;\" --><div class=\"mr-3 mt-1\"><i class=\"fas fa-map-marker-alt marker footer-icon text-warning\"></i></div><div class=\"flex-grow-1\"><p class=\"footer-sub-title text-grey\">Jl. Cipaku I No.5, RT.2/RW.4, Petogogan, Kec. Kby. Baru, Kota\r Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12170\r</p></div></div><div class=\"d-flex flex-row\"><div class=\"mr-3 mt-1\"><i class=\"fas fa-phone footer-icon text-warning\"></i></div><div class=\"flex-grow-1\"><p class=\"footer-sub-title text-grey\">021-7392345</p><p class=\"footer-sub-title text-grey\">021-2702525</p><p class=\"footer-sub-title text-grey\">021-7255080</p></div></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func FooterNav(title string, data []services.FooterSubNav) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"col-md col-lg\"><h4 class=\"footer-title text-white\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(title)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\footer.templ`, Line: 40, Col: 51}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h4>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, d := range data {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><a class=\"footer-sub-title text-grey\" href=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var4 templ.SafeURL = templ.SafeURL(d.FootSubNavLink)
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(string(templ_7745c5c3_Var4)))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var5 string
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(d.FootSubNavTitle)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\landingpage\footer.templ`, Line: 43, Col: 114}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a></div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func FooterSection(navlist []services.FooterNav) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<footer class=\"wrapper-custom bg-black pb-25 pt-25 mt-25\"><div class=\"d-xs-block d-sm-block d-md-none\"><div class=\"row mb-5\"><div class=\"col-md col-lg\"><img src=\"asset-corporate-portal/media/landingpage/logo.png\" class=\"logo-footer\" width=\"126\" height=\"40\" alt=\"Your Brand\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = FooterContact().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"mt-5\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, d := range navlist {
+			templ_7745c5c3_Err = FooterNav(d.FooterNavTitle, d.FooteSubNav).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div><div class=\"d-none d-md-block d-lg-none\"><div class=\"row mb-5\"><div class=\"col-md col-lg\"><img src=\"asset-corporate-portal/media/landingpage/logo.png\" class=\"logo-footer\" width=\"126\" height=\"40\" alt=\"Your Brand\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = FooterContact().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-md col-lg\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, d := range navlist {
+			templ_7745c5c3_Err = FooterNav(d.FooterNavTitle, d.FooteSubNav).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div><div class=\"d-none d-lg-block\"><div class=\"row mb-5\"><div class=\"col-md-12 col-lg\"><img src=\"asset-corporate-portal/media/landingpage/logo.png\" class=\"logo-footer\" width=\"126\" height=\"40\" alt=\"Your Brand\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = FooterContact().Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, d := range navlist {
+			templ_7745c5c3_Err = FooterNav(d.FooterNavTitle, d.FooteSubNav).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div><div class=\"garis bg-grey\"></div><div class=\"row mt-4\"><div class=\"col-md-6\"><p class=\"footer-sub-title text-grey\">© Copyright 2024. Organized PT SADHANA ABIYASA SAMPOERNA (Privacy\r Policy)\r</p></div><div class=\"col-md-6 text-right\"><p class=\"footer-icons\"><a href=\"#\" class=\"mr-3\"><i class=\"fab fa-whatsapp\"></i></a> <a href=\"#\" class=\"mr-3\"><i class=\"fab fa-facebook\"></i></a> <a href=\"#\"><i class=\"fab fa-instagram\"></i></a></p></div></div></footer>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}