diff --git a/.github/workflows/README.md b/.github/workflows/README.md
new file mode 100644
index 0000000..af1c813
--- /dev/null
+++ b/.github/workflows/README.md
@@ -0,0 +1,89 @@
+# GitHub Actions Workflows
+
+This directory contains automated workflows for the PocketGraph project.
+
+## Workflows
+
+### 🚀 Deploy GitHub Pages (`deploy-pages.yml`)
+
+**Purpose**: Automatically deploys the static website to GitHub Pages
+
+**Triggers**:
+- Push to `main` branch (when files in `/docs` change)
+- Manual trigger via Actions tab
+
+**What it does**:
+1. Checks out the repository
+2. Configures GitHub Pages
+3. Uploads the `/docs` folder as an artifact
+4. Deploys to GitHub Pages
+
+**Permissions Required**:
+- `contents: read`
+- `pages: write`
+- `id-token: write`
+
+**Environment**: Deploys to `github-pages` environment
+
+---
+
+### ✅ Validate Website (`validate-site.yml`)
+
+**Purpose**: Validates HTML and checks for broken links
+
+**Triggers**:
+- Pull requests that modify files in `/docs`
+- Push to `main` branch (when files in `/docs` change)
+
+**What it does**:
+1. Validates HTML5 compliance
+2. Checks all links for broken URLs
+3. Reports errors if validation fails
+
+---
+
+## Setup Instructions
+
+### First Time Setup
+
+1. **Enable GitHub Pages with Actions**:
+   - Go to repository **Settings** → **Pages**
+   - Under "Source", select **GitHub Actions**
+   - Save
+
+2. **Verify Workflows**:
+   - Go to the **Actions** tab
+   - You should see the workflows listed
+   - They will run automatically on the next push to `main`
+
+### Manual Deployment
+
+You can manually trigger a deployment:
+
+1. Go to **Actions** tab
+2. Select "Deploy GitHub Pages" workflow
+3. Click "Run workflow"
+4. Select branch (usually `main`)
+5. Click "Run workflow"
+
+## Monitoring
+
+- **Status Badges**: The main README includes a status badge showing deployment status
+- **Action Logs**: Click on any workflow run in the Actions tab to see detailed logs
+- **Deployment URL**: After successful deployment, the site is available at `https://kl0070.github.io/xamarin-neo4j/`
+
+## Troubleshooting
+
+**Deployment fails with permission error**:
+- Ensure GitHub Pages is enabled in repository settings
+- Check that Actions have the required permissions
+
+**Validation fails**:
+- Check the validation logs for specific HTML errors
+- Fix broken links identified by the link checker
+
+**Site not updating**:
+- Check the Actions tab for failed deployments
+- Ensure changes were pushed to the `main` branch
+- Clear browser cache and wait a few minutes for GitHub's CDN to update
+
diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml
new file mode 100644
index 0000000..1703b75
--- /dev/null
+++ b/.github/workflows/deploy-pages.yml
@@ -0,0 +1,53 @@
+name: Deploy GitHub Pages
+
+on:
+    # Runs on pushes targeting the default branch
+    push:
+        branches: ["main"]
+        paths:
+            - "docs/**"
+            - ".github/workflows/deploy-pages.yml"
+
+    # Allows you to run this workflow manually from the Actions tab
+    workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+    contents: read
+    pages: write
+    id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+    group: "pages"
+    cancel-in-progress: false
+
+jobs:
+    # Build job
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Setup Pages
+              uses: actions/configure-pages@v4
+
+            - name: Upload artifact
+              uses: actions/upload-pages-artifact@v3
+              with:
+                  # Upload docs directory
+                  path: "./docs"
+
+    # Deployment job
+    deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+        runs-on: ubuntu-latest
+        needs: build
+        steps:
+            - name: Deploy to GitHub Pages
+              id: deployment
+              uses: actions/deploy-pages@v4
diff --git a/.github/workflows/validate-site.yml b/.github/workflows/validate-site.yml
new file mode 100644
index 0000000..13d2ff1
--- /dev/null
+++ b/.github/workflows/validate-site.yml
@@ -0,0 +1,28 @@
+name: Validate Website
+
+on:
+    pull_request:
+        paths:
+            - "docs/**"
+    push:
+        branches: ["main"]
+        paths:
+            - "docs/**"
+
+jobs:
+    validate:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Validate HTML
+              uses: Cyb3r-Jak3/html5validator-action@v7.2.0
+              with:
+                  root: docs/
+
+            - name: Check links
+              uses: lycheeverse/lychee-action@v1
+              with:
+                  args: --verbose --no-progress 'docs/**/*.html'
+                  fail: true
diff --git a/README.md b/README.md
index 238ae35..eefb4e6 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,13 @@
 # PocketGraph - Neo4j Mobile Client
 
+[![Deploy GitHub Pages](https://github.com/kl0070/xamarin-neo4j/actions/workflows/deploy-pages.yml/badge.svg)](https://github.com/kl0070/xamarin-neo4j/actions/workflows/deploy-pages.yml)
+
 A powerful mobile Neo4j database client for iOS and iPad, built with Xamarin.Forms.
 
 [![Download on the App Store](https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&releaseDate=1280278400)](https://apps.apple.com/nl/app/pocketgraph/id1604368926)
 
+🌐 **[Visit our website](https://kl0070.github.io/xamarin-neo4j/)** for more information and beautiful screenshots!
+
 ## Overview
 
 PocketGraph is a professional Neo4j graph database client that brings the power of Neo4j to your mobile device. Connect to your Neo4j instances securely via the lightning-fast Bolt protocol with SSL encryption, and manage your graph data on the go.
diff --git a/docs/.nojekyll b/docs/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..bdeb798
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,88 @@
+# PocketGraph Website
+
+This is the GitHub Pages website for PocketGraph - a Neo4j mobile client for iOS.
+
+## Setup GitHub Pages
+
+### Automatic Deployment (Recommended)
+
+This repository includes GitHub Actions for automatic deployment! 🚀
+
+1. Go to your repository **Settings** on GitHub
+2. Navigate to **Pages** in the left sidebar
+3. Under "Source", select **GitHub Actions**
+4. That's it! The site will automatically deploy on every push to main
+
+Your website will be available at: `https://kl0070.github.io/xamarin-neo4j/`
+
+### Manual Setup (Alternative)
+
+If you prefer manual deployment:
+
+1. Go to your repository settings on GitHub
+2. Navigate to **Pages** in the left sidebar
+3. Under "Source", select the branch (usually `main`)
+4. Set the folder to `/docs`
+5. Click **Save**
+
+## GitHub Actions Workflows
+
+This project includes two workflows:
+
+- **Deploy GitHub Pages** (`.github/workflows/deploy-pages.yml`)
+  - Automatically deploys the site when changes are pushed to `/docs`
+  - Can be manually triggered from the Actions tab
+  
+- **Validate Website** (`.github/workflows/validate-site.yml`)
+  - Validates HTML structure
+  - Checks for broken links
+  - Runs on pull requests and pushes
+
+## Local Development
+
+To preview the website locally:
+
+1. Open `index.html` in your browser directly, or
+2. Use a simple HTTP server:
+
+```bash
+# Using Python 3
+cd docs
+python3 -m http.server 8000
+
+# Using Node.js (if you have http-server installed)
+cd docs
+npx http-server
+```
+
+Then open `http://localhost:8000` in your browser.
+
+## Files
+
+- `index.html` - Main landing page
+- `css/style.css` - Stylesheet
+- `images/` - Logo and graphics
+  - `logo.png` - PocketGraph logo
+  - `resoftware.png` - Re: Software logo
+
+## Features
+
+The website includes:
+
+- 📱 Responsive design (mobile, tablet, desktop)
+- 🎨 Beautiful gradient UI with iPhone mockups
+- ⚡ Fast loading, pure HTML/CSS (no build step required)
+- 🔗 Direct App Store download link
+- 📊 Feature showcase with interactive cards
+- 🖼️ Multiple iPhone mockups showing app screens
+
+## Customization
+
+To customize the website:
+
+- **Colors**: Edit CSS variables in `css/style.css` (`:root` section)
+- **Content**: Edit text directly in `index.html`
+- **Images**: Replace files in `images/` folder
+
+Enjoy!
+
diff --git a/docs/css/style.css b/docs/css/style.css
new file mode 100644
index 0000000..a049ba5
--- /dev/null
+++ b/docs/css/style.css
@@ -0,0 +1,863 @@
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary: #667eea;
+    --primary-dark: #5568d3;
+    --secondary: #764ba2;
+    --accent: #f093fb;
+    --text-primary: #1a202c;
+    --text-secondary: #4a5568;
+    --text-light: #718096;
+    --bg-white: #ffffff;
+    --bg-gray: #f7fafc;
+    --bg-dark: #1a202c;
+    --border: #e2e8f0;
+    --success: #48bb78;
+    --pink: #e53e8b;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    color: var(--text-primary);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Navigation */
+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border);
+    z-index: 1000;
+    padding: 1rem 0;
+}
+
+.nav-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.logo-img {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+}
+
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+}
+
+.nav-link {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.nav-link:hover {
+    color: var(--primary);
+}
+
+.btn-download-small {
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    color: white;
+    padding: 0.5rem 1.5rem;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 600;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.btn-download-small:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+}
+
+/* Hero Section */
+.hero {
+    padding: 120px 0 80px;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    overflow: hidden;
+}
+
+.hero-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: center;
+}
+
+.hero-title {
+    font-size: 3.5rem;
+    font-weight: 800;
+    line-height: 1.2;
+    margin-bottom: 1.5rem;
+    color: var(--text-primary);
+}
+
+.gradient-text {
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-description {
+    font-size: 1.25rem;
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+    line-height: 1.7;
+}
+
+.hero-buttons {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 3rem;
+    flex-wrap: wrap;
+}
+
+.btn-primary {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    color: white;
+    padding: 1rem 2rem;
+    border-radius: 12px;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1rem;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
+}
+
+.btn-primary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
+}
+
+.btn-primary.btn-large {
+    padding: 1.25rem 2.5rem;
+    font-size: 1.1rem;
+}
+
+.btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    background: white;
+    color: var(--text-primary);
+    padding: 1rem 2rem;
+    border-radius: 12px;
+    text-decoration: none;
+    font-weight: 600;
+    border: 2px solid var(--border);
+    transition: all 0.3s ease;
+}
+
+.btn-secondary:hover {
+    border-color: var(--primary);
+    color: var(--primary);
+    transform: translateY(-3px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.apple-icon,
+.github-icon {
+    width: 20px;
+    height: 20px;
+}
+
+.stats {
+    display: flex;
+    gap: 3rem;
+}
+
+.stat-item {
+    text-align: left;
+}
+
+.stat-number {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--primary);
+}
+
+.stat-label {
+    font-size: 0.875rem;
+    color: var(--text-light);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* iPhone Mockup */
+.hero-mockup {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 600px;
+}
+
+.iphone-mockup {
+    position: relative;
+    z-index: 2;
+}
+
+.iphone-mockup.iphone-offset {
+    position: absolute;
+    right: -50px;
+    top: 80px;
+    z-index: 1;
+    opacity: 0.7;
+}
+
+.iphone-frame {
+    width: 280px;
+    height: 570px;
+    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
+    border-radius: 40px;
+    padding: 12px;
+    box-shadow: 
+        0 30px 60px rgba(0, 0, 0, 0.3),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+    position: relative;
+}
+
+.iphone-notch {
+    position: absolute;
+    top: 12px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 120px;
+    height: 25px;
+    background: #1a1a1a;
+    border-radius: 0 0 15px 15px;
+    z-index: 10;
+}
+
+.iphone-screen {
+    width: 100%;
+    height: 100%;
+    background: white;
+    border-radius: 32px;
+    overflow: hidden;
+    position: relative;
+}
+
+.mockup-content {
+    padding: 20px 15px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.status-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 11px;
+    font-weight: 600;
+    margin-bottom: 15px;
+    padding: 0 10px;
+}
+
+.screen-header {
+    margin-bottom: 20px;
+}
+
+.screen-header h2 {
+    font-size: 28px;
+    font-weight: 700;
+}
+
+/* Connection List Mockup */
+.connection-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.connection-item {
+    background: #f7fafc;
+    padding: 12px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border: 2px solid transparent;
+    transition: all 0.3s ease;
+}
+
+.connection-item.active {
+    background: #edf2f7;
+    border-color: var(--primary);
+}
+
+.connection-icon {
+    font-size: 24px;
+}
+
+.connection-info {
+    flex: 1;
+}
+
+.connection-name {
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 2px;
+}
+
+.connection-url {
+    font-size: 11px;
+    color: var(--text-light);
+    font-family: 'Monaco', monospace;
+}
+
+.connection-status {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #cbd5e0;
+}
+
+.connection-status.connected {
+    background: var(--success);
+    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.2);
+}
+
+/* Query Editor Mockup */
+.query-editor {
+    background: #1a202c;
+    padding: 15px;
+    border-radius: 8px;
+    font-family: 'Monaco', 'Courier New', monospace;
+    font-size: 12px;
+    margin-bottom: 15px;
+}
+
+.code-line {
+    color: #e2e8f0;
+    line-height: 1.8;
+}
+
+.keyword {
+    color: #667eea;
+    font-weight: 600;
+}
+
+.number {
+    color: #48bb78;
+}
+
+.query-results {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.result-row {
+    background: #f7fafc;
+    padding: 10px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 12px;
+}
+
+.node {
+    background: var(--primary);
+    color: white;
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 10px;
+    font-weight: 600;
+}
+
+/* Features Section */
+.features {
+    padding: 100px 0;
+    background: white;
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+.section-title {
+    font-size: 2.5rem;
+    font-weight: 800;
+    margin-bottom: 1rem;
+}
+
+.section-subtitle {
+    font-size: 1.25rem;
+    color: var(--text-secondary);
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+}
+
+.feature-card {
+    background: var(--bg-gray);
+    padding: 40px 30px;
+    border-radius: 20px;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border: 1px solid var(--border);
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.feature-icon {
+    font-size: 3rem;
+    margin-bottom: 20px;
+}
+
+.feature-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 15px;
+}
+
+.feature-description {
+    color: var(--text-secondary);
+    line-height: 1.7;
+}
+
+/* Screenshots Section */
+.screenshots {
+    padding: 100px 0;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+.screenshots .section-title,
+.screenshots .section-subtitle {
+    color: white;
+}
+
+.screenshot-showcase {
+    display: flex;
+    justify-content: center;
+    gap: 40px;
+    flex-wrap: wrap;
+}
+
+.showcase-item {
+    text-align: center;
+}
+
+.showcase-item h4 {
+    margin-top: 20px;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.iphone-mini {
+    width: 200px;
+}
+
+.iphone-frame-mini {
+    background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
+    border-radius: 30px;
+    padding: 10px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+.iphone-screen-mini {
+    width: 100%;
+    height: 380px;
+    background: white;
+    border-radius: 24px;
+    overflow: hidden;
+    position: relative;
+    padding: 15px;
+}
+
+/* Graph View */
+.graph-view {
+    background: #1a202c;
+}
+
+.graph-nodes {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.graph-node {
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    border-radius: 50%;
+    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+}
+
+.graph-edges {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+/* Table View */
+.table-view {
+    padding: 10px;
+}
+
+.table-header {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    background: var(--primary);
+    color: white;
+    padding: 10px;
+    border-radius: 8px 8px 0 0;
+    font-weight: 600;
+    font-size: 12px;
+}
+
+.table-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 10px;
+    border-bottom: 1px solid var(--border);
+    font-size: 12px;
+}
+
+.table-cell {
+    padding: 5px;
+}
+
+/* Settings View */
+.settings-view {
+    padding: 10px;
+}
+
+.settings-group {
+    background: white;
+    border-radius: 12px;
+    overflow: hidden;
+}
+
+.settings-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 15px;
+    border-bottom: 1px solid var(--border);
+    font-size: 14px;
+}
+
+.settings-item:last-child {
+    border-bottom: none;
+}
+
+.settings-item span:first-child {
+    font-size: 20px;
+}
+
+.settings-item span:nth-child(2) {
+    flex: 1;
+}
+
+.toggle {
+    width: 40px;
+    height: 24px;
+    background: #cbd5e0;
+    border-radius: 12px;
+    position: relative;
+    transition: background 0.3s ease;
+}
+
+.toggle::after {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    background: white;
+    border-radius: 50%;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.3s ease;
+}
+
+.toggle.on {
+    background: var(--primary);
+}
+
+.toggle.on::after {
+    transform: translateX(16px);
+}
+
+.arrow {
+    color: var(--text-light);
+    font-size: 20px;
+}
+
+/* CTA Section */
+.cta {
+    padding: 100px 0;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    text-align: center;
+}
+
+.cta-content {
+    max-width: 700px;
+    margin: 0 auto;
+}
+
+.cta-title {
+    font-size: 3rem;
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+}
+
+.cta-description {
+    font-size: 1.25rem;
+    color: var(--text-secondary);
+    margin-bottom: 2.5rem;
+}
+
+.cta-note {
+    margin-top: 1.5rem;
+    color: var(--text-light);
+    font-size: 0.875rem;
+}
+
+/* About Section */
+.about {
+    padding: 100px 0;
+    background: white;
+}
+
+.about-content {
+    display: grid;
+    grid-template-columns: 1.5fr 1fr;
+    gap: 60px;
+    align-items: start;
+}
+
+.about-text p {
+    font-size: 1.125rem;
+    color: var(--text-secondary);
+    line-height: 1.8;
+    margin-bottom: 1.5rem;
+}
+
+.about-logo {
+    margin-top: 2rem;
+}
+
+.resoftware-logo {
+    max-width: 250px;
+    height: auto;
+}
+
+.tech-stack h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.tech-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.tech-tag {
+    background: linear-gradient(135deg, var(--primary), var(--secondary));
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+/* Footer */
+.footer {
+    background: var(--bg-dark);
+    color: white;
+    padding: 60px 0 30px;
+}
+
+.footer-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+    text-align: center;
+}
+
+.footer-logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 1.5rem;
+    font-weight: 700;
+}
+
+.footer-logo-img {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+}
+
+.footer-links {
+    display: flex;
+    gap: 30px;
+}
+
+.footer-link {
+    color: rgba(255, 255, 255, 0.8);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+.footer-link:hover {
+    color: white;
+}
+
+.footer-note {
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 0.875rem;
+}
+
+.footer-note p {
+    margin: 5px 0;
+}
+
+/* Responsive Design */
+@media (max-width: 968px) {
+    .hero-content {
+        grid-template-columns: 1fr;
+        text-align: center;
+    }
+
+    .hero-title {
+        font-size: 2.5rem;
+    }
+
+    .hero-mockup {
+        justify-content: center;
+        height: 500px;
+    }
+
+    .iphone-mockup.iphone-offset {
+        display: none;
+    }
+
+    .hero-buttons {
+        justify-content: center;
+    }
+
+    .stats {
+        justify-content: center;
+    }
+
+    .about-content {
+        grid-template-columns: 1fr;
+    }
+
+    .nav-links {
+        gap: 1rem;
+    }
+
+    .nav-link {
+        display: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .hero-title {
+        font-size: 2rem;
+    }
+
+    .hero-description {
+        font-size: 1rem;
+    }
+
+    .section-title {
+        font-size: 2rem;
+    }
+
+    .cta-title {
+        font-size: 2rem;
+    }
+
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .screenshot-showcase {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .hero-buttons {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .btn-primary,
+    .btn-secondary {
+        width: 100%;
+        justify-content: center;
+    }
+
+    .stats {
+        gap: 1.5rem;
+    }
+
+    .iphone-frame {
+        width: 240px;
+        height: 490px;
+    }
+
+    .hero-mockup {
+        height: 450px;
+    }
+}
+
diff --git a/docs/images/logo.png b/docs/images/logo.png
new file mode 100644
index 0000000..2ecad28
Binary files /dev/null and b/docs/images/logo.png differ
diff --git a/docs/images/resoftware.png b/docs/images/resoftware.png
new file mode 100644
index 0000000..1cc029b
Binary files /dev/null and b/docs/images/resoftware.png differ
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..d584665
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,387 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="PocketGraph - Your powerful Neo4j graph database client for iOS and iPad">
+    <meta name="keywords" content="Neo4j, iOS, iPad, graph database, Cypher, mobile app">
+    <meta name="author" content="Re: Software B.V.">
+    
+    <!-- Open Graph / Social Media -->
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="PocketGraph - Neo4j Mobile Client">
+    <meta property="og:description" content="Connect to your Neo4j instance via the lightning fast Bolt protocol. Visualize your nodes and relationships on the go.">
+    
+    <title>PocketGraph - Neo4j Mobile Client for iOS</title>
+    
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="container">
+            <div class="nav-content">
+                <div class="logo">
+                    <img src="images/logo.png" alt="PocketGraph Logo" class="logo-img">
+                    <span class="logo-text">PocketGraph</span>
+                </div>
+                <div class="nav-links">
+                    <a href="#features" class="nav-link">Features</a>
+                    <a href="#about" class="nav-link">About</a>
+                    <a href="https://apps.apple.com/nl/app/pocketgraph/id1604368926" class="btn-download-small">Download</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="container">
+            <div class="hero-content">
+                <div class="hero-text">
+                    <h1 class="hero-title">
+                        Your Neo4j Database,
+                        <span class="gradient-text">Anywhere</span>
+                    </h1>
+                    <p class="hero-description">
+                        Connect to your Neo4j instance via the lightning-fast Bolt protocol. 
+                        Visualize graphs, execute queries, and manage your data—all from your iPhone or iPad.
+                    </p>
+                    <div class="hero-buttons">
+                        <a href="https://apps.apple.com/nl/app/pocketgraph/id1604368926" class="btn-primary">
+                            <svg class="apple-icon" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
+                            </svg>
+                            Download on the App Store
+                        </a>
+                        <a href="https://github.com/kl0070/xamarin-neo4j" class="btn-secondary">
+                            <svg class="github-icon" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
+                            </svg>
+                            View on GitHub
+                        </a>
+                    </div>
+                    <div class="stats">
+                        <div class="stat-item">
+                            <div class="stat-number">14.2+</div>
+                            <div class="stat-label">iOS Version</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-number">SSL</div>
+                            <div class="stat-label">Encrypted</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-number">Bolt</div>
+                            <div class="stat-label">Protocol</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="hero-mockup">
+                    <div class="iphone-mockup">
+                        <div class="iphone-frame">
+                            <div class="iphone-notch"></div>
+                            <div class="iphone-screen">
+                                <div class="mockup-content connections">
+                                    <div class="status-bar">
+                                        <span>9:41</span>
+                                        <div class="status-icons"></div>
+                                    </div>
+                                    <div class="screen-header">
+                                        <h2>Connections</h2>
+                                    </div>
+                                    <div class="connection-list">
+                                        <div class="connection-item active">
+                                            <div class="connection-icon">🔗</div>
+                                            <div class="connection-info">
+                                                <div class="connection-name">Production DB</div>
+                                                <div class="connection-url">bolt://prod.neo4j.io:7687</div>
+                                            </div>
+                                            <div class="connection-status connected"></div>
+                                        </div>
+                                        <div class="connection-item">
+                                            <div class="connection-icon">🔗</div>
+                                            <div class="connection-info">
+                                                <div class="connection-name">Development</div>
+                                                <div class="connection-url">bolt://dev.local:7687</div>
+                                            </div>
+                                        </div>
+                                        <div class="connection-item">
+                                            <div class="connection-icon">🔗</div>
+                                            <div class="connection-info">
+                                                <div class="connection-name">Test Instance</div>
+                                                <div class="connection-url">bolt://test.neo4j.io:7687</div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="iphone-mockup iphone-offset">
+                        <div class="iphone-frame">
+                            <div class="iphone-notch"></div>
+                            <div class="iphone-screen">
+                                <div class="mockup-content query">
+                                    <div class="status-bar">
+                                        <span>9:41</span>
+                                        <div class="status-icons"></div>
+                                    </div>
+                                    <div class="screen-header">
+                                        <h2>Query Editor</h2>
+                                    </div>
+                                    <div class="query-editor">
+                                        <div class="code-line">
+                                            <span class="keyword">MATCH</span> (n:Person)
+                                        </div>
+                                        <div class="code-line">
+                                            <span class="keyword">WHERE</span> n.age > <span class="number">25</span>
+                                        </div>
+                                        <div class="code-line">
+                                            <span class="keyword">RETURN</span> n
+                                        </div>
+                                    </div>
+                                    <div class="query-results">
+                                        <div class="result-row">
+                                            <div class="node">Person</div>
+                                            <span>Alice, 28</span>
+                                        </div>
+                                        <div class="result-row">
+                                            <div class="node">Person</div>
+                                            <span>Bob, 32</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section id="features" class="features">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">Powerful Features</h2>
+                <p class="section-subtitle">Everything you need to manage Neo4j databases on your mobile device</p>
+            </div>
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">🔐</div>
+                    <h3 class="feature-title">Secure Connections</h3>
+                    <p class="feature-description">
+                        Connect via the lightning-fast Bolt protocol with SSL/TLS encryption. 
+                        Manage multiple connections and switch between databases effortlessly.
+                    </p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">📊</div>
+                    <h3 class="feature-title">Interactive Visualization</h3>
+                    <p class="feature-description">
+                        View your graph data in stunning interactive visualizations. 
+                        Explore nodes and relationships with intuitive touch gestures.
+                    </p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">✍️</div>
+                    <h3 class="feature-title">Advanced Query Editor</h3>
+                    <p class="feature-description">
+                        Write Cypher queries with syntax highlighting. Save and organize your queries 
+                        for quick access. View results in graph or table format.
+                    </p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">🎨</div>
+                    <h3 class="feature-title">Beautiful Interface</h3>
+                    <p class="feature-description">
+                        Modern, intuitive design with light and dark themes. 
+                        Optimized for both iPhone and iPad with responsive layouts.
+                    </p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">📱</div>
+                    <h3 class="feature-title">Universal App</h3>
+                    <p class="feature-description">
+                        Works seamlessly across iPhone, iPad, Apple Silicon Mac, and Apple Vision Pro. 
+                        One app for all your devices.
+                    </p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">🔒</div>
+                    <h3 class="feature-title">Privacy First</h3>
+                    <p class="feature-description">
+                        No data collection. All connections and queries are stored locally on your device. 
+                        Your data stays yours.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Screenshots Section -->
+    <section class="screenshots">
+        <div class="container">
+            <div class="section-header">
+                <h2 class="section-title">See It In Action</h2>
+                <p class="section-subtitle">Manage your Neo4j databases with an elegant, powerful interface</p>
+            </div>
+            <div class="screenshot-showcase">
+                <div class="showcase-item">
+                    <div class="iphone-mini">
+                        <div class="iphone-frame-mini">
+                            <div class="iphone-screen-mini graph-view">
+                                <div class="graph-nodes">
+                                    <div class="graph-node" style="top: 20%; left: 30%;"></div>
+                                    <div class="graph-node" style="top: 50%; left: 20%;"></div>
+                                    <div class="graph-node" style="top: 60%; left: 50%;"></div>
+                                    <div class="graph-node" style="top: 30%; left: 70%;"></div>
+                                    <svg class="graph-edges">
+                                        <line x1="30%" y1="20%" x2="20%" y2="50%" stroke="#667eea" stroke-width="2"/>
+                                        <line x1="30%" y1="20%" x2="70%" y2="30%" stroke="#667eea" stroke-width="2"/>
+                                        <line x1="20%" y1="50%" x2="50%" y2="60%" stroke="#667eea" stroke-width="2"/>
+                                        <line x1="50%" y1="60%" x2="70%" y2="30%" stroke="#667eea" stroke-width="2"/>
+                                    </svg>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <h4>Graph Visualization</h4>
+                </div>
+                <div class="showcase-item">
+                    <div class="iphone-mini">
+                        <div class="iphone-frame-mini">
+                            <div class="iphone-screen-mini table-view">
+                                <div class="table-header">
+                                    <div class="table-cell">Name</div>
+                                    <div class="table-cell">Type</div>
+                                </div>
+                                <div class="table-row">
+                                    <div class="table-cell">Alice</div>
+                                    <div class="table-cell">Person</div>
+                                </div>
+                                <div class="table-row">
+                                    <div class="table-cell">Bob</div>
+                                    <div class="table-cell">Person</div>
+                                </div>
+                                <div class="table-row">
+                                    <div class="table-cell">Carol</div>
+                                    <div class="table-cell">Person</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <h4>Table View</h4>
+                </div>
+                <div class="showcase-item">
+                    <div class="iphone-mini">
+                        <div class="iphone-frame-mini">
+                            <div class="iphone-screen-mini settings-view">
+                                <div class="settings-group">
+                                    <div class="settings-item">
+                                        <span>🌙</span>
+                                        <span>Dark Mode</span>
+                                        <div class="toggle on"></div>
+                                    </div>
+                                    <div class="settings-item">
+                                        <span>🔔</span>
+                                        <span>Notifications</span>
+                                        <div class="toggle"></div>
+                                    </div>
+                                    <div class="settings-item">
+                                        <span>⚙️</span>
+                                        <span>Advanced</span>
+                                        <span class="arrow">›</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <h4>Settings</h4>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="cta">
+        <div class="container">
+            <div class="cta-content">
+                <h2 class="cta-title">Ready to Get Started?</h2>
+                <p class="cta-description">
+                    Download PocketGraph today and take your Neo4j databases with you wherever you go.
+                </p>
+                <a href="https://apps.apple.com/nl/app/pocketgraph/id1604368926" class="btn-primary btn-large">
+                    <svg class="apple-icon" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
+                    </svg>
+                    Download on the App Store
+                </a>
+                <p class="cta-note">Requires iOS 14.2 or later • Universal App</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- About Section -->
+    <section id="about" class="about">
+        <div class="container">
+            <div class="about-content">
+                <div class="about-text">
+                    <h2 class="section-title">About PocketGraph</h2>
+                    <p>
+                        PocketGraph is developed by <strong>Re: Software B.V.</strong>, a software company 
+                        dedicated to creating professional mobile applications for developers and data professionals.
+                    </p>
+                    <p>
+                        Built with Xamarin.Forms and optimized for iOS, PocketGraph brings the power of 
+                        Neo4j graph databases to your mobile device with an intuitive, native interface.
+                    </p>
+                    <div class="about-logo">
+                        <img src="images/resoftware.png" alt="Re: Software" class="resoftware-logo">
+                    </div>
+                </div>
+                <div class="tech-stack">
+                    <h3>Built With</h3>
+                    <div class="tech-tags">
+                        <span class="tech-tag">Xamarin.Forms</span>
+                        <span class="tech-tag">C#</span>
+                        <span class="tech-tag">Neo4j Bolt Protocol</span>
+                        <span class="tech-tag">XAML</span>
+                        <span class="tech-tag">Neovis.js</span>
+                        <span class="tech-tag">iOS SDK</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-logo">
+                    <img src="images/logo.png" alt="PocketGraph Logo" class="footer-logo-img">
+                    <span class="footer-logo-text">PocketGraph</span>
+                </div>
+                <div class="footer-links">
+                    <a href="https://apps.apple.com/nl/app/pocketgraph/id1604368926" class="footer-link">App Store</a>
+                    <a href="https://github.com/kl0070/xamarin-neo4j" class="footer-link">GitHub</a>
+                    <a href="mailto:info@resoftware.nl" class="footer-link">Support</a>
+                </div>
+                <div class="footer-note">
+                    <p>
+                        Neo4j® and Cypher® are registered trademarks of Neo4j, Inc.
+                    </p>
+                    <p>
+                        © 2024 Re: Software B.V. All rights reserved.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
+</body>
+</html>
+