diff --git a/SearchFrontend/search_ui/src/App.jsx b/SearchFrontend/search_ui/src/App.jsx
index 13622ca..07561d4 100644
--- a/SearchFrontend/search_ui/src/App.jsx
+++ b/SearchFrontend/search_ui/src/App.jsx
@@ -605,25 +605,52 @@ function App() {
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                gap: "16px",
-                flexWrap: "wrap",
-                padding: "12px 16px"
+                gap: "12px",
+                flexWrap: "nowrap",
+                padding: "12px 16px",
+                background: "linear-gradient(135deg, #2a2d3a 0%, #1f2129 100%)",
+                borderRadius: "12px",
+                boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+                border: "1px solid #3a3f4f",
+                overflowX: "auto"
             }}>
-                <div className="control-group" style={{ margin: 0 }}>
+                <div className="control-group" style={{ margin: 0, flexShrink: 0 }}>
                     <button
                         className="drawer-toggle"
                         onClick={() => setDrawerOpen(!drawerOpen)}
                         style={{
                             padding: "8px 12px",
-                            fontSize: "0.9em",
-                            minWidth: "70px"
+                            fontSize: "0.85em",
+                            minWidth: "70px",
+                            background: "linear-gradient(135deg, #4a90e2 0%, #357abd 100%)",
+                            color: "white",
+                            border: "none",
+                            borderRadius: "6px",
+                            cursor: "pointer",
+                            fontWeight: "500",
+                            boxShadow: "0 2px 4px rgba(74, 144, 226, 0.3)",
+                            transition: "all 0.2s ease"
+                        }}
+                        onMouseEnter={(e) => {
+                            e.target.style.transform = "translateY(-1px)";
+                            e.target.style.boxShadow = "0 4px 8px rgba(74, 144, 226, 0.4)";
+                        }}
+                        onMouseLeave={(e) => {
+                            e.target.style.transform = "translateY(0)";
+                            e.target.style.boxShadow = "0 2px 4px rgba(74, 144, 226, 0.3)";
                         }}
                     >
                         {drawerOpen ? "✕" : "Options"}
                     </button>
                 </div>
 
-                <div className="control-group" style={{ margin: 0, flexShrink: 0 }}>
+                <div className="control-group" style={{ 
+                    margin: 0, 
+                    flexShrink: 0,
+                    background: "rgba(255, 255, 255, 0.05)",
+                    borderRadius: "6px",
+                    border: "1px solid rgba(255, 255, 255, 0.1)"
+                }}>
                     <CustomDateRangePicker
                         startDate={startRange}
                         endDate={endRange}
@@ -632,24 +659,36 @@ function App() {
                     />
                 </div>
 
-                <div className="control-group" style={{ margin: 0, flex: "1 1 200px", minWidth: "200px" }}>
+                <div className="control-group" style={{ margin: 0, flex: "1 1 180px", minWidth: "180px", maxWidth: "300px" }}>
                     <input
                         type="text"
-                        placeholder="Enter query"
+                        placeholder="Enter search query..."
                         value={queryText}
                         onChange={(e) => setQueryText(e.target.value)}
                         onKeyDown={(e) => {
                             if (e.key === "Enter") handleResubmit();
                         }}
                         style={{
-                            padding: "8px 12px",
-                            borderRadius: "4px",
-                            border: "1px solid #343a40",
-                            color: "#fff",
-                            backgroundColor: "#1a1d23",
+                            padding: "10px 12px",
+                            borderRadius: "6px",
+                            border: "2px solid #3a3f4f",
+                            color: "#e1e5e9",
+                            backgroundColor: "rgba(26, 29, 35, 0.8)",
                             width: "100%",
                             boxSizing: "border-box",
-                            fontSize: "0.9em"
+                            fontSize: "0.9em",
+                            fontWeight: "400",
+                            outline: "none",
+                            transition: "all 0.2s ease",
+                            boxShadow: "inset 0 2px 4px rgba(0, 0, 0, 0.1)"
+                        }}
+                        onFocus={(e) => {
+                            e.target.style.borderColor = "#4a90e2";
+                            e.target.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(74, 144, 226, 0.15)";
+                        }}
+                        onBlur={(e) => {
+                            e.target.style.borderColor = "#3a3f4f";
+                            e.target.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1)";
                         }}
                         ref={inputRef}
                     />
@@ -660,8 +699,13 @@ function App() {
                     display: "flex", 
                     alignItems: "center", 
                     gap: "6px",
-                    color: "#fff",
-                    fontSize: "0.9em"
+                    color: "#e1e5e9",
+                    fontSize: "0.85em",
+                    background: "rgba(255, 255, 255, 0.05)",
+                    padding: "6px 10px",
+                    borderRadius: "6px",
+                    border: "1px solid rgba(255, 255, 255, 0.1)",
+                    flexShrink: 0
                 }}>
                     <input
                         type="checkbox"
@@ -673,17 +717,34 @@ function App() {
                                 setSelectedHighRes,
                             )
                         }
+                        style={{
+                            width: "14px",
+                            height: "14px",
+                            accentColor: "#4a90e2"
+                        }}
                     />
-                    <span>HD Video</span>
+                    <span style={{ fontWeight: "500", whiteSpace: "nowrap" }}>HD</span>
                 </div>
 
                 <div style={{
                     display: "flex",
                     alignItems: "center",
                     gap: "8px",
-                    visibility: queryChanged ? "hidden" : "visible"
+                    visibility: queryChanged ? "hidden" : "visible",
+                    background: "rgba(255, 255, 255, 0.05)",
+                    padding: "6px 12px",
+                    borderRadius: "6px",
+                    border: "1px solid rgba(255, 255, 255, 0.1)",
+                    flexShrink: 0
                 }}>
-                    <label style={{ color: "#fff", fontSize: "0.9em", whiteSpace: "nowrap" }}>Threshold:</label>
+                    <label style={{ 
+                        color: "#e1e5e9", 
+                        fontSize: "0.85em", 
+                        whiteSpace: "nowrap",
+                        fontWeight: "500"
+                    }}>
+                        Threshold:
+                    </label>
                     <input
                         type="range"
                         min={sliderMin}
@@ -692,15 +753,21 @@ function App() {
                         value={sliderValue}
                         onChange={(e) => updateDataAndValue(e.target.value)}
                         style={{
-                            width: "100px",
-                            margin: "0 4px"
+                            width: "80px",
+                            height: "6px",
+                            background: "linear-gradient(to right, #3a3f4f 0%, #4a90e2 100%)",
+                            borderRadius: "3px",
+                            outline: "none",
+                            appearance: "none"
                         }}
                     />
                     <span style={{ 
-                        color: "#fff", 
-                        fontSize: "0.9em", 
-                        minWidth: "40px",
-                        textAlign: "right" 
+                        color: "#4a90e2", 
+                        fontSize: "0.8em", 
+                        minWidth: "35px",
+                        textAlign: "right",
+                        fontWeight: "600",
+                        fontFamily: "monospace"
                     }}>
                         {sliderValue.toFixed(2)}
                     </span>
@@ -708,58 +775,111 @@ function App() {
 
                 <div className="control-group" style={{
                     margin: 0,
-                    visibility: queryChanged ? "visible" : "hidden"
+                    visibility: queryChanged ? "visible" : "hidden",
+                    flexShrink: 0
                 }}>
                     <button
                         onClick={handleResubmit}
                         style={{
-                            padding: "8px 16px",
-                            fontSize: "0.9em",
-                            backgroundColor: "#007acc",
+                            padding: "8px 14px",
+                            fontSize: "0.85em",
+                            background: "linear-gradient(135deg, #28a745 0%, #20a73a 100%)",
                             color: "white",
                             border: "none",
-                            borderRadius: "4px",
-                            cursor: "pointer"
+                            borderRadius: "6px",
+                            cursor: "pointer",
+                            fontWeight: "600",
+                            boxShadow: "0 2px 4px rgba(40, 167, 69, 0.3)",
+                            transition: "all 0.2s ease",
+                            whiteSpace: "nowrap"
+                        }}
+                        onMouseEnter={(e) => {
+                            e.target.style.transform = "translateY(-1px)";
+                            e.target.style.boxShadow = "0 4px 8px rgba(40, 167, 69, 0.4)";
+                        }}
+                        onMouseLeave={(e) => {
+                            e.target.style.transform = "translateY(0)";
+                            e.target.style.boxShadow = "0 2px 4px rgba(40, 167, 69, 0.3)";
                         }}
                     >
-                        Resubmit
+                        🔄 Resubmit
                     </button>
                 </div>
 
-                <div className="control-group" style={{ margin: 0 }}>
+                <div className="control-group" style={{ margin: 0, flexShrink: 0 }}>
                     <button 
                         onClick={videoPlaying ? () => window.open("api/media_download/low") : undefined}
                         disabled={!videoPlaying}
                         style={{
                             padding: "6px 10px",
-                            fontSize: "0.8em",
-                            backgroundColor: videoPlaying ? "#28a745" : "#6c757d",
+                            fontSize: "0.75em",
+                            background: videoPlaying 
+                                ? "linear-gradient(135deg, #17c671 0%, #15b565 100%)" 
+                                : "linear-gradient(135deg, #6c757d 0%, #5a6169 100%)",
                             color: videoPlaying ? "white" : "#adb5bd",
                             border: "none",
-                            borderRadius: "4px",
+                            borderRadius: "6px",
                             cursor: videoPlaying ? "pointer" : "not-allowed",
-                            opacity: videoPlaying ? 1 : 0.6
+                            opacity: videoPlaying ? 1 : 0.6,
+                            fontWeight: "500",
+                            boxShadow: videoPlaying 
+                                ? "0 2px 4px rgba(23, 198, 113, 0.3)" 
+                                : "0 1px 2px rgba(108, 117, 125, 0.2)",
+                            transition: "all 0.2s ease",
+                            whiteSpace: "nowrap"
+                        }}
+                        onMouseEnter={(e) => {
+                            if (videoPlaying) {
+                                e.target.style.transform = "translateY(-1px)";
+                                e.target.style.boxShadow = "0 4px 8px rgba(23, 198, 113, 0.4)";
+                            }
+                        }}
+                        onMouseLeave={(e) => {
+                            if (videoPlaying) {
+                                e.target.style.transform = "translateY(0)";
+                                e.target.style.boxShadow = "0 2px 4px rgba(23, 198, 113, 0.3)";
+                            }
                         }}
                     >
-                        DL Low-Res
+                        DL Low-Res Video
                     </button>
                 </div>
-                <div className="control-group" style={{ margin: 0 }}>
+                <div className="control-group" style={{ margin: 0, flexShrink: 0 }}>
                     <button 
                         onClick={videoPlaying ? () => window.open("api/media_download/high") : undefined}
                         disabled={!videoPlaying}
                         style={{
                             padding: "6px 10px",
-                            fontSize: "0.8em",
-                            backgroundColor: videoPlaying ? "#17a2b8" : "#6c757d",
+                            fontSize: "0.75em",
+                            background: videoPlaying 
+                                ? "linear-gradient(135deg, #007bff 0%, #0056b3 100%)" 
+                                : "linear-gradient(135deg, #6c757d 0%, #5a6169 100%)",
                             color: videoPlaying ? "white" : "#adb5bd",
                             border: "none",
-                            borderRadius: "4px",
+                            borderRadius: "6px",
                             cursor: videoPlaying ? "pointer" : "not-allowed",
-                            opacity: videoPlaying ? 1 : 0.6
+                            opacity: videoPlaying ? 1 : 0.6,
+                            fontWeight: "500",
+                            boxShadow: videoPlaying 
+                                ? "0 2px 4px rgba(0, 123, 255, 0.3)" 
+                                : "0 1px 2px rgba(108, 117, 125, 0.2)",
+                            transition: "all 0.2s ease",
+                            whiteSpace: "nowrap"
+                        }}
+                        onMouseEnter={(e) => {
+                            if (videoPlaying) {
+                                e.target.style.transform = "translateY(-1px)";
+                                e.target.style.boxShadow = "0 4px 8px rgba(0, 123, 255, 0.4)";
+                            }
+                        }}
+                        onMouseLeave={(e) => {
+                            if (videoPlaying) {
+                                e.target.style.transform = "translateY(0)";
+                                e.target.style.boxShadow = "0 2px 4px rgba(0, 123, 255, 0.3)";
+                            }
                         }}
                     >
-                        DL High-Res
+                       DL High-Res Video
                     </button>
                 </div>		
             </div>