diff --git a/tech_docs/webdev/hugo.md b/tech_docs/webdev/hugo.md
index 871ad6c..4d7d352 100644
--- a/tech_docs/webdev/hugo.md
+++ b/tech_docs/webdev/hugo.md
@@ -1,3 +1,211 @@
+It looks like you have a solid plan for integrating HTMX into your Hugo project to enhance interactivity. Let's structure your data visualization project into clear components and deliverables. Here’s a refined and detailed approach:
+
+### 1. **Project Setup**
+ - **Install Hugo**: Make sure Hugo is installed. Follow the [Hugo installation guide](https://gohugo.io/getting-started/installing/).
+ - **Create a New Hugo Site**:
+ ```sh
+ hugo new site smma-telemetry
+ cd smma-telemetry
+ ```
+
+### 2. **Initialize Git and Add a Bootstrap Theme**
+ ```sh
+ git init
+ git submodule add https://github.com/razonyang/hugo-theme-bootstrap themes/hugo-theme-bootstrap
+ ```
+
+ Update `config.toml`:
+ ```toml
+ baseURL = 'https://example.org/'
+ languageCode = 'en-us'
+ title = 'SMMA Telemetry'
+ theme = 'hugo-theme-bootstrap'
+ ```
+
+### 3. **Organize Project Structure**
+ ```sh
+ mkdir -p content/clients
+ mkdir -p data/clients
+ mkdir -p static/css
+ mkdir -p static/js
+ ```
+
+### 4. **Add HTMX to Your Project**
+ **layouts/_default/baseof.html**:
+ ```html
+
+
+
+
+
+ {{ .Title }}
+
+
+
+
+
+
+
+
+ {{ block "main" . }}{{ end }}
+
+
+
+
+
+
+
+
+
+ ```
+
+### 5. **Create Data Files**
+ **data/clients/client1.json**:
+ ```json
+ {
+ "name": "Client 1",
+ "ads_data": [
+ { "date": "2024-05-01", "google_ads": 500, "meta_ads": 300 },
+ { "date": "2024-05-02", "google_ads": 700, "meta_ads": 400 },
+ { "date": "2024-05-03", "google_ads": 600, "meta_ads": 350 }
+ ]
+ }
+ ```
+
+### 6. **Create Content Files**
+ **content/clients/client1.md**:
+ ```markdown
+ ---
+ title: "Client 1"
+ date: 2024-05-23
+ ---
+
+ # Client 1 Ads Telemetry
+
+
+
+
Ads Data Visualization
+
+
+
+
+
+
+
+ ```
+
+### 7. **Add Custom JavaScript and CSS**
+ **static/js/scripts.js**:
+ ```js
+ document.addEventListener('DOMContentLoaded', function () {
+ console.log('Custom JS Loaded');
+ });
+ ```
+
+ **static/css/styles.css**:
+ ```css
+ body {
+ font-family: Arial, sans-serif;
+ line-height: 1.6;
+ margin: 0;
+ padding: 0;
+ background: #f4f4f4;
+ }
+
+ #adsChart {
+ max-width: 600px;
+ margin: 50px auto;
+ }
+ ```
+
+### 8. **Create a Server-Side Endpoint**
+ **Example Python Flask Endpoint (app.py)**:
+ ```python
+ from flask import Flask, jsonify
+ import json
+
+ app = Flask(__name__)
+
+ @app.route('/clients/client1-data')
+ def client1_data():
+ with open('data/clients/client1.json') as f:
+ data = json.load(f)
+ return jsonify(data['ads_data'])
+
+ if __name__ == '__main__':
+ app.run(debug=True)
+ ```
+
+### 9. **Run the Hugo Server**
+ ```sh
+ hugo server -D
+ ```
+
+### Summary
+1. **Project Setup**: Hugo site created with Bootstrap theme.
+2. **Organized Content**: Structure for clients and data files.
+3. **Integrated HTMX**: HTMX included for enhanced interactivity.
+4. **Data Visualization**: Charts implemented using Chart.js.
+5. **Dynamic Data Loading**: Server-side endpoint for dynamic data.
+
+By following this structured approach, you can create a robust and interactive data visualization site using Hugo, Bootstrap, and Chart.js. If you have any further questions or need additional details, feel free to ask!
+
+---
+
Integrating HTMX into your Hugo project can enhance the interactivity of your site without requiring a full-fledged JavaScript framework. HTMX allows you to make your static site more dynamic by enabling AJAX, CSS Transitions, WebSockets, and Server Sent Events (SSE) directly in HTML. This can be particularly useful for enhancing user experience without the complexity of traditional JavaScript frameworks.
### When to Use HTMX