diff --git a/css/style.css b/css/style.css
index f0f4de8..f70a62a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -208,7 +208,7 @@ textarea {
     border-radius: 6px;
     padding: 12px;
     border: 1px solid var(--input-border);
-    box-shadow: none !important;
+    box-shadow: none;
 }
 
 .emoji-library-header {
@@ -316,10 +316,9 @@ textarea {
     border-radius: 10px;
     background-color: var(--secondary-bg);
     padding: 0;
-    box-shadow: none !important;
+    box-shadow: none;
     position: relative;
     overflow: hidden;
-    border: 1px solid var(--input-border) !important;
 }
 
 .emoji-library:before {
@@ -331,7 +330,6 @@ textarea {
     height: 4px;
     background: linear-gradient(to right, var(--unicode-color), var(--special-color), var(--encoding-color));
     z-index: 1;
-    box-shadow: none !important;
 }
 
 .emoji-grid-wrapper {
@@ -362,8 +360,6 @@ textarea {
     border-bottom: none !important;
     border-top: none !important;
     border-right: none !important;
-    position: relative;
-    z-index: 10;
 }
 
 .emoji-grid-note i {
@@ -1391,29 +1387,3 @@ button:hover {
         text-align: left;
     }
 }
-
-/* Fix for black bar in emoji grid */
-.emoji-library *,
-.emoji-grid-container *,
-.emoji-grid * {
-    box-shadow: none !important;
-    border-bottom: none !important;
-}
-
-.emoji-library::after,
-.emoji-library::before,
-.emoji-grid-container::after,
-.emoji-grid-container::before,
-.emoji-grid::after,
-.emoji-grid::before {
-    box-shadow: none !important;
-    border: none !important;
-    background-image: none !important;
-}
-
-/* Force remove any black bars */
-#emoji-grid-container::before,
-#emoji-grid-container::after {
-    display: none !important;
-    content: none !important;
-}
diff --git a/index.html b/index.html
index 042b9a6..ae32000 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,6 @@
     <title>Parseltongue 2.0 - LLM Payload Crafter</title>
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/notification.css">
-    <link rel="stylesheet" href="css/no-black-bar.css">
     <!-- Vue.js -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
     <!-- Font Awesome for icons -->
@@ -82,16 +81,16 @@
                     </div>
 
                     <!-- Emoji Library Section -->
-                    <div class="emoji-library" style="box-shadow: none !important; border: 1px solid var(--input-border) !important; background-image: none !important;">
-                        <div class="emoji-library-header" style="box-shadow: none !important; border: none !important; background-image: none !important;">
+                    <div class="emoji-library">
+                        <div class="emoji-library-header">
                             <div class="emoji-library-title">
                                 <h3><i class="fas fa-icons"></i> Choose an Emoji</h3>
                             </div>
                         </div>
                         <!-- Emoji grid container - this MUST have id="emoji-grid-container" -->
-                        <div id="emoji-grid-container" class="emoji-grid-container" style="box-shadow: none !important; border: none !important; background-image: none !important;">
+                        <div id="emoji-grid-container" class="emoji-grid-container">
                             <!-- Dynamic content will be inserted here by JavaScript -->
-                            <div class="emoji-grid" style="box-shadow: none !important; border: none !important; background-image: none !important;">
+                            <div class="emoji-grid">
                                 <!-- Common emojis as fallback -->
                                 <button class="emoji-button" onclick="app.selectEmoji('😀')">😀</button>
                                 <button class="emoji-button" onclick="app.selectEmoji('😂')">😂</button>
@@ -105,7 +104,7 @@
                                 <button class="emoji-button" onclick="app.selectEmoji('🐍')">🐍</button>
                             </div>
                         </div>
-                        <div class="emoji-library-footer" v-if="selectedEmoji" style="box-shadow: none !important; border: none !important; background-image: none !important;">
+                        <div class="emoji-library-footer" v-if="selectedEmoji">
                             <div class="selected-emoji-info">
                                 <span class="selected-emoji">{{ selectedEmoji }}</span>
                                 <span class="selected-emoji-label">Last selected</span>
diff --git a/js/app.js b/js/app.js
index 6aaabc0..433bf39 100644
--- a/js/app.js
+++ b/js/app.js
@@ -901,19 +901,13 @@ window.app = new Vue({
                 return;
             }
             
-            // Force container to be completely visible and remove black bars
-            container.style.cssText = 'display: block !important; visibility: visible !important; min-height: 300px; box-shadow: none !important; border: none !important; background-image: none !important;';
+            // Force container to be completely visible
+            container.style.cssText = 'display: block !important; visibility: visible !important; min-height: 300px;';
             
-            // Make sure parent containers are visible too and have no black bars
+            // Make sure parent containers are visible too
             const emojiLibrary = document.querySelector('.emoji-library');
             if (emojiLibrary) {
-                emojiLibrary.style.cssText = 'display: block !important; visibility: visible !important; box-shadow: none !important; border: 1px solid var(--input-border) !important; background-image: none !important;';
-            }
-            
-            // Remove any black bars from emoji library header
-            const emojiLibraryHeader = document.querySelector('.emoji-library-header');
-            if (emojiLibraryHeader) {
-                emojiLibraryHeader.style.cssText = 'box-shadow: none !important; border: none !important; background-image: none !important;';
+                emojiLibrary.style.cssText = 'display: block !important; visibility: visible !important;';
             }
             
             // Clear any existing content to avoid duplication
diff --git a/js/emojiLibrary.js b/js/emojiLibrary.js
index fcebe87..def7ab5 100644
--- a/js/emojiLibrary.js
+++ b/js/emojiLibrary.js
@@ -455,14 +455,10 @@ window.emojiLibrary.renderEmojiGrid = function(containerId, onEmojiSelect, filte
     // Clear container
     container.innerHTML = '';
     
-    // Apply styles to container to prevent black bars
-    container.style.cssText = 'box-shadow: none !important; border: none !important; background-image: none !important;';
-    
     // Create grid note
     const gridNote = document.createElement('div');
     gridNote.className = 'emoji-grid-note';
     gridNote.innerHTML = '<i class="fas fa-magic"></i> Click any emoji to automatically copy your hidden message';
-    gridNote.style.cssText = 'box-shadow: none !important; border-bottom: none !important; border-top: none !important; border-right: none !important; background-image: none !important;';
     container.appendChild(gridNote);
     
     // Create category tabs
@@ -486,7 +482,6 @@ window.emojiLibrary.renderEmojiGrid = function(containerId, onEmojiSelect, filte
     // Create emoji grid with enforced styling
     const gridContainer = document.createElement('div');
     gridContainer.className = 'emoji-grid';
-    gridContainer.style.cssText = 'box-shadow: none !important; border-bottom: none !important; border-top: none !important; background-image: none !important;';
     
     // Combine all emojis for a larger selection
     const allEmojis = [...window.emojiLibrary.EMOJI_LIST, ...window.emojiLibrary.ADDITIONAL_EMOJIS];