diff --git a/admin-dashboard.html b/admin-dashboard.html
index 5a63ea0..d897a74 100644
--- a/admin-dashboard.html
+++ b/admin-dashboard.html
@@ -1533,13 +1533,40 @@ async function saveBanner(event) {
             bannerVisible.value = bannerVisibility.checked ? 'true' : 'false';
         }
         
-        formData.append('text', bannerText ? bannerText.value : '');
-        formData.append('link', bannerLink ? bannerLink.value : '');
-        formData.append('isVisible', bannerVisible ? bannerVisible.value : 'true');
+        // Get HTML content from the contenteditable div
+        const bannerTextContent = bannerText ? bannerText.innerHTML : '';
         
-        // Always send the banner visibility
-        formData.append('isVisible', bannerVisible ? bannerVisible.value : 'true');
-        formData.append('style[isVisible]', bannerVisible ? bannerVisible.value : 'true');
+        // Add banner content with proper field names
+        formData.append('Text', bannerTextContent);
+        formData.append('Link', bannerLink ? bannerLink.value : '');
+        formData.append('IsVisible', bannerVisible ? bannerVisible.value : 'true');
+        
+        // Add style values with proper field names
+        formData.append('Style[BackgroundColor]', bannerBgColorPicker?.value || '');
+        formData.append('Style[TextColor]', bannerTextColorPicker?.value || '');
+        formData.append('Style[TextAlign]', bannerTextAlign?.value || 'left');
+        formData.append('Style[FontSize]', bannerFontSize?.value || '16');
+        formData.append('Style[Padding]', bannerPadding?.value || '20');
+        formData.append('Style[Margin]', bannerMargin?.value || '20');
+        formData.append('Style[BorderRadius]', bannerBorderRadius?.value || '8');
+        formData.append('Style[IsVisible]', bannerVisible ? bannerVisible.value : 'true');
+        formData.append('Style[ImagePosition]', currentImagePosition || 'right');
+        formData.append('Style[ImageX]', currentImageX || '0');
+        formData.append('Style[ImageY]', currentImageY || '0');
+        
+        // Add template styles if available
+        if (currentTemplate && templateConfigs[currentTemplate]) {
+            const template = templateConfigs[currentTemplate];
+            if (template.backgroundColor) formData.append('Style[BackgroundColor]', template.backgroundColor);
+            if (template.textColor) formData.append('Style[TextColor]', template.textColor);
+            if (template.textAlign) formData.append('Style[TextAlign]', template.textAlign);
+            if (template.fontSize) formData.append('Style[FontSize]', template.fontSize);
+            if (template.padding) formData.append('Style[Padding]', template.padding);
+            if (template.margin) formData.append('Style[Margin]', template.margin);
+            if (template.borderRadius) formData.append('Style[BorderRadius]', template.borderRadius);
+            if (template.background) formData.append('Style[Background]', template.background);
+            if (template.containerStyle) formData.append('Style[ContainerStyle]', template.containerStyle);
+        }
         
         // Ensure templateConfigs is defined and has the default template
         if (typeof templateConfigs === 'undefined') {
diff --git a/banner.go b/banner.go
index 142dbcf..fc5ab13 100644
--- a/banner.go
+++ b/banner.go
@@ -54,28 +54,28 @@ func ensureDirs() error {
 }
 
 type BannerContent struct {
-	Text  string      `json:"text"`
-	Image string      `json:"image,omitempty"`
-	Link  string      `json:"link,omitempty"`
-	Style BannerStyle `json:"style"`
+	Text  string      `json:"Text"`
+	Image string      `json:"Image,omitempty"`
+	Link  string      `json:"Link,omitempty"`
+	Style BannerStyle `json:"Style"`
 }
 
 type BannerStyle struct {
-	BackgroundColor string `json:"backgroundColor"`
-	TextColor       string `json:"textColor"`
-	TextAlign       string `json:"textAlign"`
-	FontSize        string `json:"fontSize"`
-	Padding         string `json:"padding"`
-	Margin          string `json:"margin"`
-	BorderRadius    string `json:"borderRadius"`
-	IsVisible       bool   `json:"isVisible"`
-	ImageWidth      int    `json:"imageWidth"`    // Width in pixels
-	ImageHeight     int    `json:"imageHeight"`   // Height in pixels
-	ImagePosition   string `json:"imagePosition"` // center, left, right
-	ImageX          int    `json:"imageX"`        // X position for custom
-	ImageY          int    `json:"imageY"`        // Y position for custom
-	Background      string `json:"background,omitempty"`
-	ContainerStyle  string `json:"containerStyle,omitempty"`
+	BackgroundColor string `json:"BackgroundColor"`
+	TextColor      string `json:"TextColor"`
+	TextAlign      string `json:"TextAlign"`
+	FontSize       string `json:"FontSize"`
+	Padding        string `json:"Padding"`
+	Margin         string `json:"Margin"`
+	BorderRadius   string `json:"BorderRadius"`
+	IsVisible      bool   `json:"IsVisible"`
+	ImageWidth     int    `json:"ImageWidth"`    // Width in pixels
+	ImageHeight    int    `json:"ImageHeight"`   // Height in pixels
+	ImagePosition  string `json:"ImagePosition"` // center, left, right
+	ImageX         int    `json:"ImageX"`        // X position for custom
+	ImageY         int    `json:"ImageY"`        // Y position for custom
+	Background     string `json:"Background,omitempty"`
+	ContainerStyle string `json:"ContainerStyle,omitempty"`
 }
 
 var (
@@ -193,25 +193,25 @@ func UpdateBannerHandler(w http.ResponseWriter, r *http.Request) {
 
 	// Create a new banner with default values
 	newBanner := BannerContent{
-		Text: r.FormValue("text"),
-		Link: r.FormValue("link"),
+		Text: r.FormValue("Text"),
+		Link: r.FormValue("Link"),
 		Style: BannerStyle{
 			// Parse style values from form
-			BackgroundColor: r.FormValue("style[backgroundColor]"),
-			TextColor:       r.FormValue("style[textColor]"),
-			TextAlign:       r.FormValue("style[textAlign]"),
-			FontSize:        r.FormValue("style[fontSize]"),
-			Padding:         r.FormValue("style[padding]"),
-			Margin:          r.FormValue("style[margin]"),
-			BorderRadius:    r.FormValue("style[borderRadius]"),
-			IsVisible:       r.FormValue("isVisible") == "true" || r.FormValue("style[isVisible]") == "true",
+			BackgroundColor: r.FormValue("style[BackgroundColor]"),
+			TextColor:       r.FormValue("style[TextColor]"),
+			TextAlign:       r.FormValue("style[TextAlign]"),
+			FontSize:        r.FormValue("style[FontSize]"),
+			Padding:         r.FormValue("style[Padding]"),
+			Margin:          r.FormValue("style[Margin]"),
+			BorderRadius:    r.FormValue("style[BorderRadius]"),
+			IsVisible:       r.FormValue("IsVisible") == "true" || r.FormValue("style[IsVisible]") == "true",
 			// Add image position fields
-			ImagePosition: r.FormValue("style[imagePosition]"),
-			ImageX:        parseIntOrDefault(r.FormValue("style[imageX]"), 0),
-			ImageY:        parseIntOrDefault(r.FormValue("style[imageY]"), 0),
+			ImagePosition: r.FormValue("style[ImagePosition]"),
+			ImageX:        parseIntOrDefault(r.FormValue("style[ImageX]"), 0),
+			ImageY:        parseIntOrDefault(r.FormValue("style[ImageY]"), 0),
 			// Additional style fields
-			Background:     r.FormValue("style[background]"),
-			ContainerStyle: r.FormValue("style[containerStyle]"),
+			Background:     r.FormValue("style[Background]"),
+			ContainerStyle: r.FormValue("style[ContainerStyle]"),
 		},
 	}
 
diff --git a/index.html b/index.html
index 3a9a4dd..9222d61 100644
--- a/index.html
+++ b/index.html
@@ -87,29 +87,58 @@
                     box-sizing: border-box;
                 `;
                 
+                // Get or create banner container with link
+                const bannerContainerEl = document.getElementById('bannerContainer');
+                if (bannerContainerEl) {
+                    bannerContainerEl.style.position = 'relative';
+                    bannerContainerEl.style.overflow = 'hidden';
+                    
+                    // Add the link to the entire banner container
+                    if (bannerLink) {
+                        bannerContainerEl.innerHTML = `
+                            <a href="${bannerLink}" target="_blank" style="
+                                position: absolute;
+                                top: 0;
+                                left: 0;
+                                width: 100%;
+                                height: 100%;
+                                z-index: 1;
+                                text-decoration: none;
+                                color: inherit;
+                            "></a>
+                            <div id="bannerInnerContent"></div>
+                        `;
+                    } else {
+                        bannerContainerEl.innerHTML = '<div id="bannerInnerContent"></div>';
+                    }
+                }
+                
                 // Start building banner content
-                let content = `
-                    <div class="banner-content" style="
-                        padding: ${padding}px;
-                        margin: ${margin}px;
-                        background: ${backgroundColor};
-                        color: ${textColor};
-                        border-radius: ${borderRadius}px;
-                        ${style.containerStyle || ''}
-                        position: relative;
-                        overflow: hidden;
-                    ">
-                    ${banner.link ? `<a href="${banner.link}" target="_blank" style="
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 100%;
-                        height: 100%;
-                        z-index: 1;
-                        text-decoration: none;
-                        color: inherit;
-                    "></a>` : ''}
-                `;
+                let content = '';
+                
+                // Only show the banner if it's visible
+                if (banner.Style && banner.Style.IsVisible !== false) {
+                    content = `
+                        <div class="banner-content" style="
+                            padding: ${padding}px;
+                            margin: ${margin}px;
+                            background: ${backgroundColor};
+                            color: ${textColor};
+                            border-radius: ${borderRadius}px;
+                            ${style.containerStyle || ''}
+                            position: relative;
+                        ">
+                            <div class="banner-html-content" style="
+                                color: ${textColor};
+                                font-size: ${style.fontSize || '16px'};
+                                text-align: ${style.textAlign || 'left'};
+                                line-height: 1.5;
+                            ">
+                                ${bannerText}
+                            </div>
+                        </div>
+                    `;
+                }
                 
                 // Handle image if it exists
                 const bannerText = banner.text || banner.Text || '';
@@ -249,7 +278,16 @@
                 // Text is already added in the previous conditions
                 
                 // Set the content and make banner visible
-                bannerContent.innerHTML = content;
+                const innerContent = bannerContainerEl ? 
+                    (bannerContainerEl.querySelector('#bannerInnerContent') || bannerContainerEl) : 
+                    bannerContent;
+                
+                if (banner.Style && banner.Style.IsVisible !== false) {
+                    innerContent.innerHTML = content;
+                    bannerContent.style.display = 'block';
+                } else {
+                    bannerContent.style.display = 'none';
+                }
                 
                 // Apply custom font if specified in template
                 if (style.fontFamily) {