diff --git a/floating-menu.css b/floating-menu.css
index 0633b25..cdc3404 100644
--- a/floating-menu.css
+++ b/floating-menu.css
@@ -1,39 +1,125 @@
-/* Styles for the floating menu */
-#floating-menu {
-  position: absolute;
-  display: none;  /* Initial state is hidden */
-  background: var(--floating-menu-bg-color, #2d2d2d);  /* Changed to use background shorthand */
-  background-color: var(--floating-menu-bg-color, #2d2d2d) !important;
-  border: var(--floating-menu-border, 1px solid #404040);
-  border-radius: var(--floating-menu-border-radius, 20px);
-  padding: var(--floating-menu-padding, 8px 12px);
-  box-shadow: var(--floating-menu-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.3));
-  z-index: 1000;
-}
-
-/* Position the floating menu at the bottom center of the text area */
-#floating-menu.show {
-  display: flex;  /* Show with flex when .show class is applied */
-  justify-content: center; /* Center the buttons horizontally */
-  left: 50%;
-  transform: translateX(-50%);
-  top: calc(100% + 10px); /* 10px offset for spacing */
-  background: var(--floating-menu-bg-color, #2d2d2d);  /* Added to ensure consistency */
-  background-color: var(--floating-menu-bg-color, #2d2d2d) !important;
-}
-
-/* Styles for the buttons inside the floating menu */
-#floating-menu button {
-  margin: var(--floating-menu-button-margin, 0 5px); /* Horizontal margin between buttons */
-  padding: var(--floating-menu-button-padding, 6px 12px);
-  background-color: var(--floating-menu-button-bg-color, #404040);
-  color: var(--floating-menu-button-color, #e0e0e0);
-  border: none;
-  border-radius: var(--floating-menu-button-border-radius, 15px);
-  cursor: pointer;
-}
-
-/* Hover effect for the buttons */
-#floating-menu button:hover {
-  background-color: var(--floating-menu-button-hover-bg-color, #505050);
-}
+/* Floating Menu - Modern Design */
+#floating-menu {
+  position: absolute;
+  display: none;
+  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(108, 99, 255, 0.3);
+  border-radius: 24px;
+  padding: 10px 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(108, 99, 255, 0.1);
+  z-index: 1000;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+#floating-menu.show {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  left: 50%;
+  transform: translateX(-50%) translateY(0);
+  opacity: 1;
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+/* Button Styles */
+#floating-menu button {
+  margin: 0;
+  padding: 10px 18px;
+  background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%);
+  color: #ffffff;
+  border: none;
+  border-radius: 18px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  font-weight: 600;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(108, 99, 255, 0.3);
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+}
+
+#floating-menu button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+#floating-menu button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(108, 99, 255, 0.5);
+}
+
+#floating-menu button:hover::before {
+  opacity: 1;
+}
+
+#floating-menu button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(108, 99, 255, 0.4);
+}
+
+/* Special styling for Clear All button */
+#floating-menu button:last-child {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
+}
+
+#floating-menu button:last-child:hover {
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.5);
+}
+
+/* Special styling for placeholder buttons */
+#floating-menu button:nth-child(2),
+#floating-menu button:nth-child(3) {
+  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+  min-width: 45px;
+  padding: 10px 14px;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+}
+
+#floating-menu button:nth-child(2):hover,
+#floating-menu button:nth-child(3):hover {
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  #floating-menu {
+    padding: 8px 12px;
+    border-radius: 20px;
+  }
+
+  #floating-menu button {
+    padding: 8px 14px;
+    font-size: 0.85rem;
+  }
+
+  #floating-menu button:nth-child(2),
+  #floating-menu button:nth-child(3) {
+    min-width: 40px;
+    padding: 8px 12px;
+  }
+}
diff --git a/floating-menu.js b/floating-menu.js
index 4024b87..dbdb804 100644
--- a/floating-menu.js
+++ b/floating-menu.js
@@ -52,7 +52,6 @@ class FloatingMenu {
 
     // Append the menu to the document body
     document.body.appendChild(menu);
-    console.log("Floating menu created");
 
     return menu;
   }
@@ -66,14 +65,12 @@ class FloatingMenu {
     this.menu.style.top = `${textAreaRect.bottom + window.scrollY + 10}px`; // 10px offset for spacing
     this.menu.classList.add("show");
     this.menu.style.display = "block";
-    console.log(`Floating menu shown at (${this.menu.style.left}, ${this.menu.style.top})`);
   }
 
   hide() {
     if (!this.menu) return;
     this.menu.classList.remove("show");
     this.menu.style.display = "none";
-    console.log("Floating menu hidden");
   }
 }
 
diff --git a/index.html b/index.html
index ad1b5b6..c5e8213 100644
--- a/index.html
+++ b/index.html
@@ -1,56 +1,89 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Interactive Selection</title>
-  <!-- Link to the main stylesheet -->
-  <link rel="stylesheet" href="text-seleciton.css">
-  <!-- Link to the floating menu stylesheet -->
-  <link rel="stylesheet" href="floating-menu.css">
-</head>
-<body>
-  <!-- Directions for users -->
-  <div id="directions">
-    <h3>Context Builder ...</h3>
-    <h4>A lightweight library for interactive text selection, specifically designed for AI chatbot interaction.
-    </h4>
-    <p>Select and Deselect sentences and words by clicking on them.</p>
-    <ul>
-      <li>A single-click selects a sentence.</li>
-      <li>A single-click in a selected sentence will select individual words.</li>
-      <li>A double-click on a sentence will clear all selections in that sentence and the sentence itself.</li>
-      <li>The selected words and sentences will be displayed below.</li>
-      <li>The 'Add context' button will send the payload (JSON, comma seperated, etc) to the LLM/Chatbot.</li>
-      <li>Wrap payload with a prompt for best results.
-      </li>
-    </ul>
-  </div>
-  <p></p>
-  <p></p>
-  <!-- Container for the text area -->
-  <div id="text-area">
-    <p>
-      <h4>
-        This is the text-area for interactive text selection.
-      </h4>
-    </p>
-    <p>Have you ever paused to contemplate the unrelenting tyranny of modern computing? No, I’m not talking about slow Wi-Fi or forced software updates. I’m talking about something far more insidious, something we’ve been conditioned to accept without protest: the burden of right-clicking to access contextual menus. Yes, dear reader, I mean the Herculean task of moving your finger a fraction of an inch, applying minimal pressure to a mouse button, and then—brace yourself—deciphering a list of options.
-    </p>
-    <p>The Physical Toll: Let’s start with the biomechanical nightmare. Right-clicking demands precision. It’s not just clicking anywhere; it’s clicking right. What if your finger twitches? What if the mouse doesn’t register? What if you miss and left-click instead? The cognitive load is unbearable. Olympic athletes train for years to master their craft—do we really expect the average person to perform such intricate finger gymnastics multiple times a day?
-    </p>
-    <p>The Psychological Burden: The contextual menu, with its cascade of choices, represents the Pandora’s box of digital existence. Copy, paste, open in new tab, inspect element—inspect element? What does that even mean? And why does “delete” always sit perilously close to “rename”? It’s a minefield of potential disaster, one that leaves the user in a state of constant, low-grade anxiety.
-    </p>
-    <p>
-    The Time Sink: In the split second it takes for the contextual menu to appear, valuable milliseconds of our lives are lost. Multiply that by the number of right-clicks in a day, a week, a lifetime. How many sunsets missed? How many fleeting moments of joy sacrificed? Right-clicking is not just a waste of time; it’s a thief of human potential.
-    </p>
-  </div>
-  <!-- Container for the JSON output -->
-  <pre id="json-output"></pre>
-  <!-- Button to manually trigger the floating menu for testing -->
-  <!-- <button id="test-menu-button">Show Floating Menu</button> -->
-  <!-- Update script loading order -->
-  <script src="floating-menu.js"></script>
-  <script src="text-selection.js"></script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VectraSelect - Interactive Text Selection</title>
+  <!-- Link to the main stylesheet -->
+  <link rel="stylesheet" href="text-selection.css">
+  <!-- Link to the floating menu stylesheet -->
+  <link rel="stylesheet" href="floating-menu.css">
+</head>
+<body>
+  <div class="container">
+    <!-- Hero Section -->
+    <header class="hero">
+      <div class="hero-icon">✨</div>
+      <h1>VectraSelect</h1>
+      <p class="tagline">Interactive Text Selection for AI-Powered Workflows</p>
+    </header>
+
+    <!-- Directions Card -->
+    <div class="card instructions-card">
+      <h2>🎯 How It Works</h2>
+      <p class="lead">Select and deselect sentences and words by clicking on them.</p>
+      <div class="instructions-grid">
+        <div class="instruction-item">
+          <span class="instruction-icon">👆</span>
+          <div class="instruction-content">
+            <strong>Single Click</strong>
+            <p>Select a sentence</p>
+          </div>
+        </div>
+        <div class="instruction-item">
+          <span class="instruction-icon">🔤</span>
+          <div class="instruction-content">
+            <strong>Click in Selection</strong>
+            <p>Select individual words</p>
+          </div>
+        </div>
+        <div class="instruction-item">
+          <span class="instruction-icon">✌️</span>
+          <div class="instruction-content">
+            <strong>Double Click</strong>
+            <p>Clear sentence selections</p>
+          </div>
+        </div>
+        <div class="instruction-item">
+          <span class="instruction-icon">🤖</span>
+          <div class="instruction-content">
+            <strong>Add Context</strong>
+            <p>Send to LLM/Chatbot</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Text Selection Area -->
+    <div class="card text-selection-card">
+      <div class="card-header">
+        <h2>📝 Interactive Demo</h2>
+        <p class="card-subtitle">Click on sentences and words below to build your context</p>
+      </div>
+      <div id="text-area">
+        <p>Have you ever paused to contemplate the unrelenting tyranny of modern computing? No, I'm not talking about slow Wi-Fi or forced software updates. I'm talking about something far more insidious, something we've been conditioned to accept without protest: the burden of right-clicking to access contextual menus. Yes, dear reader, I mean the Herculean task of moving your finger a fraction of an inch, applying minimal pressure to a mouse button, and then—brace yourself—deciphering a list of options.
+        </p>
+        <p>The Physical Toll: Let's start with the biomechanical nightmare. Right-clicking demands precision. It's not just clicking anywhere; it's clicking right. What if your finger twitches? What if the mouse doesn't register? What if you miss and left-click instead? The cognitive load is unbearable. Olympic athletes train for years to master their craft—do we really expect the average person to perform such intricate finger gymnastics multiple times a day?
+        </p>
+        <p>The Psychological Burden: The contextual menu, with its cascade of choices, represents the Pandora's box of digital existence. Copy, paste, open in new tab, inspect element—inspect element? What does that even mean? And why does "delete" always sit perilously close to "rename"? It's a minefield of potential disaster, one that leaves the user in a state of constant, low-grade anxiety.
+        </p>
+        <p>The Time Sink: In the split second it takes for the contextual menu to appear, valuable milliseconds of our lives are lost. Multiply that by the number of right-clicks in a day, a week, a lifetime. How many sunsets missed? How many fleeting moments of joy sacrificed? Right-clicking is not just a waste of time; it's a thief of human potential.
+        </p>
+      </div>
+    </div>
+
+    <!-- JSON Output Card -->
+    <div class="card output-card">
+      <div class="card-header">
+        <h2>📊 Selected Context</h2>
+        <p class="card-subtitle">Your selections are formatted and ready to use</p>
+      </div>
+      <pre id="json-output"></pre>
+    </div>
+  </div>
+
+  <!-- Update script loading order -->
+  <script src="floating-menu.js"></script>
+  <script src="text-selection.js"></script>
+</body>
+</html>
diff --git a/text-seleciton.css b/text-seleciton.css
deleted file mode 100644
index d7f86bb..0000000
--- a/text-seleciton.css
+++ /dev/null
@@ -1,61 +0,0 @@
-/* General Styles */
-body {
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background-color: #121212;
-  color: #e0e0e0;
-  padding: 30px;
-}
-
-#text-area {
-  margin-bottom: 30px;
-  user-select: auto; /* Enable text selection */
-  border: 1px solid #444;
-  border-radius: 5px;
-  padding: 15px;
-  background-color: #1e1e1e;
-}
-
-h2, h3, h4 {
-  color: #c29573;
-  margin-bottom: 10px;
-}
-
-
-p {
-  margin: 15px 0;
-  line-height: 1.6;
-}
-
-/* Highlighting Styles */
-
-/* Style for Highlighting Sentences */
-.style-s {
-  background-color: #333;
-  border-radius: 3px;
-}
-
-/* Style for Highlighting Words */
-.style-w {
-  background-color: #555;
-  color: #ffffff;
-  border-radius: 2px;
-}
-
-/* JSON Output */
-#json-output {
-  background-color: #1e1e1e;
-  padding: 15px;
-  border-radius: 5px;
-  color: #c0c0c0;
-  margin-top: 20px;
-  min-height: 100px;
-  white-space: pre-wrap;
-  font-family: monospace;
-  border: 1px solid #333;
-}
-
-/* Hover Effects */
-/* #text-area p:hover {
-  background-color: #444;
-  transition: background-color 0.3s;
-} */
diff --git a/text-selection.css b/text-selection.css
new file mode 100644
index 0000000..f0285e9
--- /dev/null
+++ b/text-selection.css
@@ -0,0 +1,318 @@
+/* Modern Design System */
+:root {
+  --bg-primary: #0f0f23;
+  --bg-secondary: #1a1a2e;
+  --bg-tertiary: #16213e;
+  --accent-primary: #6c63ff;
+  --accent-secondary: #4ecdc4;
+  --accent-gradient: linear-gradient(135deg, #6c63ff 0%, #4ecdc4 100%);
+  --text-primary: #e4e4e7;
+  --text-secondary: #a1a1aa;
+  --text-accent: #c29573;
+  --border-color: #27272a;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+}
+
+/* Reset and Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  min-height: 100vh;
+  padding: 2rem 1rem;
+}
+
+/* Container */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  animation: fadeIn 0.6s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Hero Section */
+.hero {
+  text-align: center;
+  margin-bottom: 3rem;
+  padding: 2rem 1rem;
+}
+
+.hero-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.hero h1 {
+  font-size: 3rem;
+  font-weight: 800;
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 0.5rem;
+  letter-spacing: -0.02em;
+}
+
+.tagline {
+  font-size: 1.25rem;
+  color: var(--text-secondary);
+  font-weight: 400;
+}
+
+/* Card Styles */
+.card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 2rem;
+  margin-bottom: 2rem;
+  box-shadow: var(--shadow-lg);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-xl);
+}
+
+.card-header {
+  margin-bottom: 1.5rem;
+}
+
+.card-header h2 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.card-subtitle {
+  color: var(--text-secondary);
+  font-size: 0.95rem;
+}
+
+/* Instructions Card */
+.instructions-card h2 {
+  font-size: 1.75rem;
+  margin-bottom: 1rem;
+}
+
+.lead {
+  font-size: 1.1rem;
+  color: var(--text-secondary);
+  margin-bottom: 2rem;
+}
+
+.instructions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+}
+
+.instruction-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1.25rem;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
+}
+
+.instruction-item:hover {
+  border-color: var(--accent-primary);
+  transform: translateX(4px);
+  background: rgba(108, 99, 255, 0.05);
+}
+
+.instruction-icon {
+  font-size: 2rem;
+  flex-shrink: 0;
+}
+
+.instruction-content strong {
+  display: block;
+  color: var(--text-primary);
+  font-size: 1rem;
+  margin-bottom: 0.25rem;
+  font-weight: 600;
+}
+
+.instruction-content p {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  margin: 0;
+}
+
+/* Text Selection Area */
+.text-selection-card {
+  position: relative;
+}
+
+#text-area {
+  background: var(--bg-tertiary);
+  border: 2px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: 2rem;
+  user-select: auto;
+  font-size: 1.05rem;
+  line-height: 1.8;
+  transition: border-color 0.3s ease;
+}
+
+#text-area:hover {
+  border-color: rgba(108, 99, 255, 0.3);
+}
+
+#text-area p {
+  margin: 1.5rem 0;
+}
+
+#text-area p:first-child {
+  margin-top: 0;
+}
+
+#text-area p:last-child {
+  margin-bottom: 0;
+}
+
+/* Highlighting Styles */
+.sentence {
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border-radius: 4px;
+  padding: 2px 0;
+}
+
+.sentence:hover {
+  background-color: rgba(108, 99, 255, 0.1);
+}
+
+.style-s {
+  background: linear-gradient(120deg, rgba(108, 99, 255, 0.2) 0%, rgba(78, 205, 196, 0.2) 100%);
+  border-left: 3px solid var(--accent-primary);
+  padding-left: 8px;
+  border-radius: var(--radius-sm);
+}
+
+.word {
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.word:hover {
+  background-color: rgba(78, 205, 196, 0.15);
+}
+
+.style-w {
+  background: var(--accent-secondary);
+  color: var(--bg-primary);
+  font-weight: 600;
+  padding: 3px 6px;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(78, 205, 196, 0.3);
+}
+
+/* JSON Output */
+.output-card {
+  background: var(--bg-tertiary);
+  border: 2px solid var(--border-color);
+}
+
+#json-output {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: 1.5rem;
+  color: var(--accent-secondary);
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  overflow-x: auto;
+  min-height: 120px;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+#json-output:empty::before {
+  content: 'Select text to see your context appear here...';
+  color: var(--text-secondary);
+  font-style: italic;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  body {
+    padding: 1rem 0.5rem;
+  }
+
+  .hero h1 {
+    font-size: 2rem;
+  }
+
+  .tagline {
+    font-size: 1rem;
+  }
+
+  .card {
+    padding: 1.5rem;
+  }
+
+  .instructions-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  #text-area {
+    padding: 1.5rem;
+    font-size: 1rem;
+  }
+}
+
+/* Utility Classes */
+h2, h3, h4 {
+  color: var(--text-primary);
+  font-weight: 700;
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}