diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx
index ecad6af..419b373 100644
--- a/src/components/Connection.tsx
+++ b/src/components/Connection.tsx
@@ -736,354 +736,349 @@ const Connection: React.FC<ConnectionProps> = ({
   };
 
   return (
-    <div className="mt-2 flex flex-col justify-center gap-2 sm:flex-row w-full shrink-0 px-2 md:px-4 items-center">
-      {/* Left-aligned timer and separator */}
-      <div className="relative flex items-center justify-start space-x-1 h-10 ">
-        {isRecordingRef.current && (
-          <div className="flex items-center space-x-1 w-min ml-2 justify-start">
-            <div className="font-medium p-2 w-16 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors bg-primary text-destructive hover:bg-primary/90">
-              {formatTime(elapsedTime)}
-            </div>
-            <Separator orientation="vertical" className="bg-primary h-9 ml-2" />
-            <div>
-              <Popover
-                open={isEndTimePopoverOpen}
-                onOpenChange={setIsEndTimePopoverOpen}
-              >
-                <PopoverTrigger asChild>
-                  <Button
-                    className="text-lg w-16 h-9 font-medium p-2"
-                    variant="destructive"
-                  >
-                    {endTimeRef.current === null ? (
-                      <Infinity className="h-5 w-5 text-primary" />
-                    ) : (
-                      <div className="text-sm text-primary font-medium">
-                        {formatTime(endTimeRef.current)}
-                      </div>
-                    )}
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-64 p-4 mx-4">
-                  <div className="flex flex-col space-y-4">
-                    <div className="text-sm font-medium">
-                      Set End Time (minutes)
-                    </div>
-                    <div className="grid grid-cols-4 gap-2">
-                      {[1, 10, 20, 30].map((time) => (
-                        <Button
-                          key={time}
-                          variant="outline"
-                          size="sm"
-                          onClick={() => handleTimeSelection(time)}
-                        >
-                          {time}
-                        </Button>
-                      ))}
+    <div className="flex items-center justify-center w-full h-4 mt-5 px-4 z-50">
+    {/* Left-aligned section */}
+    <div className="absolute left-4 flex items-center space-x-1">
+      {isRecordingRef.current && (
+        <div className="flex items-center space-x-1 w-min ml-2">
+          <div className="font-medium p-2 w-16 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors bg-primary text-destructive hover:bg-primary/90">
+            {formatTime(elapsedTime)}
+          </div>
+          <Separator orientation="vertical" className="bg-primary h-9 ml-2" />
+          <div>
+            <Popover
+              open={isEndTimePopoverOpen}
+              onOpenChange={setIsEndTimePopoverOpen}
+            >
+              <PopoverTrigger asChild>
+                <Button
+                  className="text-lg w-16 h-9 font-medium p-2"
+                  variant="destructive"
+                >
+                  {endTimeRef.current === null ? (
+                    <Infinity className="h-5 w-5 text-primary" />
+                  ) : (
+                    <div className="text-sm text-primary font-medium">
+                      {formatTime(endTimeRef.current)}
                     </div>
-                    <div className="flex space-x-2 items-center">
-                      <Input
-                        type="text"
-                        inputMode="numeric"
-                        pattern="[0-9]*"
-                        placeholder="Custom"
-                        value={customTime}
-                        onBlur={handleCustomTimeSet}
-                        onKeyDown={(e) =>
-                          e.key === "Enter" && handleCustomTimeSet()
-                        }
-                        onChange={handleCustomTimeChange}
-                        className="w-20"
-                      />
+                  )}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-64 p-4 mx-4">
+                <div className="flex flex-col space-y-4">
+                  <div className="text-sm font-medium">
+                    Set End Time (minutes)
+                  </div>
+                  <div className="grid grid-cols-4 gap-2">
+                    {[1, 10, 20, 30].map((time) => (
                       <Button
+                        key={time}
                         variant="outline"
                         size="sm"
-                        onClick={() => handleTimeSelection(null)}
+                        onClick={() => handleTimeSelection(time)}
                       >
-                        <Infinity className="h-4 w-4" />
+                        {time}
                       </Button>
-                    </div>
+                    ))}
                   </div>
-                </PopoverContent>
-              </Popover>
-            </div>
+                  <div className="flex space-x-2 items-center">
+                    <Input
+                      type="text"
+                      inputMode="numeric"
+                      pattern="[0-9]*"
+                      placeholder="Custom"
+                      value={customTime}
+                      onBlur={handleCustomTimeSet}
+                      onKeyDown={(e) =>
+                        e.key === "Enter" && handleCustomTimeSet()
+                      }
+                      onChange={handleCustomTimeChange}
+                      className="w-20"
+                    />
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleTimeSelection(null)}
+                    >
+                      <Infinity className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
           </div>
-        )}
         </div>
-        <div className="relative flex items-center justify-center space-x-1 h-10 w-full ">
-        {/* Center-aligned buttons */}
-         <div
-        className="flex flex-row gap-2 justify-center items-center "
-      >
-        {/* Connection button with tooltip */}
+      )}
+    </div>
+
+    {/* Center-aligned buttons */}
+    <div className="flex gap-3 items-center justify-center">
+      {/* Connection button with tooltip */}
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button className="bg-primary gap-2" onClick={handleClick}>
+              {isConnected ? (
+                <>
+                  Disconnect
+                  <CircleX size={17} />
+                </>
+              ) : (
+                <>
+                  Connect
+                  <Cable size={17} />
+                </>
+              )}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{isConnected ? "Disconnect Device" : "Connect Device"}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      {/* Autoscale/Bit selection */}
+      {isConnected && (
+        <TooltipProvider>
+          <Tooltip>
+            <div className="flex items-center mx-0 px-0">
+              {/* Decrease Canvas Button */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className="rounded-r-none"
+                    onClick={decreaseZoom}
+                    disabled={Zoom === 1 || !isDisplay}
+                  >
+                    <ZoomOut size={16} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{Zoom === 1 ? "We can't shrinkage" : "Decrease Zoom"}</p>
+                </TooltipContent>
+              </Tooltip>
+
+              <Separator orientation="vertical" className="h-full" />
+
+              {/* Toggle All Channels Button */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className="flex items-center justify-center px-3 py-2 m-1 rounded-none select-none"
+                    onClick={toggleZoom}
+                    disabled={!isDisplay}
+                  >
+                    {Zoom}x
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{FullZoom ? "Remove Full Zoom" : "Full Zoom"}</p>
+                </TooltipContent>
+              </Tooltip>
+
+              <Separator orientation="vertical" className="h-full" />
+
+              {/* Increase Canvas Button */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className="rounded-l-none"
+                    onClick={increaseZoom}
+                    disabled={Zoom === 10 || !isDisplay}
+                    
+                  >
+                    <ZoomIn size={16} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>
+                    {Zoom >= 10 ? "Maximum Zoom Reached" : "Increase Zoom"}
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          </Tooltip>
+        </TooltipProvider>
+      )}
+
+      {/* Display (Play/Pause) button with tooltip */}
+      {isConnected && (
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
-              <Button className="bg-primary gap-2 " onClick={handleClick}>
-                {isConnected ? (
-                  <>
-                    Disconnect
-                    <CircleX size={17} />
-                  </>
+              <Button onClick={togglePause}>
+                {isDisplay ? (
+                  <Pause className="h-5 w-5" />
                 ) : (
-                  <>
-                    Connect
-                    <Cable size={17} />
-                  </>
+                  <Play className="h-5 w-5" />
                 )}
               </Button>
             </TooltipTrigger>
             <TooltipContent>
-              <p>{isConnected ? "Disconnect Device" : "Connect Device"}</p>
+              <p>
+                {isDisplay ? "Pause Data Display" : "Resume Data Display"}
+              </p>
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
-        {/* Autoscale/Bit selection */}
-        {isConnected && (
-          <TooltipProvider>
-            <Tooltip>
-              <div className="flex items-center mx-auto px-auto">
-                {/* Decrease Canvas Button */}
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      className="rounded-r-none"
-                      onClick={decreaseZoom}
-                      disabled={Zoom === 1 || !isDisplay}
-                      
-                    >
-                      <ZoomOut size={16} />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{Zoom === 1 ? "We can't shrinkage" : "Decrease Zoom"}</p>
-                  </TooltipContent>
-                </Tooltip>
+      )}
 
-                <Separator orientation="vertical" className="h-full" />
-
-                {/* Toggle All Channels Button */}
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      className="flex items-center justify-center px-3 py-2 m-1 rounded-none select-none"
-                      onClick={toggleZoom}
-                      disabled={!isDisplay}
-                    >
-                      {Zoom}x
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{FullZoom ? "Remove Full Zoom" : "Full Zoom"}</p>
-                  </TooltipContent>
-                </Tooltip>
+      {/* Record button with tooltip */}
+      {isConnected && (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                onClick={handleRecord}
+                disabled={isRecordButtonDisabled || !isDisplay}
+              >
+                {isRecordingRef.current ? (
+                  <CircleStop />
+                ) : (
+                  <Circle fill="red" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>
+                {!isRecordingRef.current
+                  ? "Start Recording"
+                  : "Stop Recording"}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      )}
 
-                <Separator orientation="vertical" className="h-full" />
+      {/* Save/Delete data buttons with tooltip */}
+      {isConnected && (
+        <TooltipProvider>
+          <div className="flex">
+            {hasData && datasets.length === 1 && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className="rounded-r-none"
+                    onClick={saveData}
+                    disabled={!hasData}
+                  >
+                    <Download size={16} className="mr-1" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Save Data as CSV</p>
+                </TooltipContent>
+              </Tooltip>
+            )}
 
-                {/* Increase Canvas Button */}
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      className="rounded-l-none"
-                      onClick={increaseZoom}
-                      disabled={Zoom === 10 || !isDisplay}
-                    >
-                      <ZoomIn size={16} />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>
-                      {Zoom >= 10 ? "Maximum Zoom Reached" : "Increase Zoom"}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-              </div>
-            </Tooltip>
-          </TooltipProvider>
-        )}
+            <Separator orientation="vertical" className="h-full" />
 
-        {/* Display (Play/Pause) button with tooltip */}
-        {isConnected && (
-          <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button onClick={togglePause}>
-                  {isDisplay ? (
-                    <Pause className="h-5 w-5" />
-                  ) : (
-                    <Play className="h-5 w-5" />
-                  )}
+                <Button
+                  className="rounded-r-none mr-1"
+                  onClick={saveData}
+                  disabled={!hasData}
+                >
+                  <Download size={16} />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>
-                <p>
-                  {isDisplay ? "Pause Data Display" : "Resume Data Display"}
-                </p>
+                <p>Save Data as Zip</p>
               </TooltipContent>
             </Tooltip>
-          </TooltipProvider>
-        )}
 
-        {/* Record button with tooltip */}
-        {isConnected && (
-          <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
-                  onClick={handleRecord}
-                  disabled={isRecordButtonDisabled || !isDisplay}
+                  className="rounded-l-none"
+                  onClick={deleteDataFromIndexedDB}
+                  disabled={!hasData}
                 >
-                  {isRecordingRef.current ? (
-                    <CircleStop />
-                  ) : (
-                    <Circle fill="red" />
-                  )}
+                  <Trash2 size={20} />
                 </Button>
               </TooltipTrigger>
               <TooltipContent>
-                <p>
-                  {!isRecordingRef.current
-                    ? "Start Recording"
-                    : "Stop Recording"}
-                </p>
+                <p>Delete All Data</p>
               </TooltipContent>
             </Tooltip>
-          </TooltipProvider>
-        )}
-
-        {/* Save/Delete data buttons with tooltip */}
-        {isConnected && (
-          <TooltipProvider>
-            <div className="flex">
-              {hasData && datasets.length === 1 && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      className="rounded-r-none"
-                      onClick={saveData}
-                      disabled={!hasData}
-                    >
-                      <Download size={16} className="mr-1" />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>Save Data as CSV</p>
-                  </TooltipContent>
-                </Tooltip>
-              )}
+          </div>
+        </TooltipProvider>
+      )}
+
+      {/* Canvas control buttons with tooltip */}
+      {isConnected && (
+        <TooltipProvider>
+          <Tooltip>
+            <div className="flex items-center mx-0 px-0">
+              {/* Decrease Canvas Button */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    className="rounded-r-none"
+                    onClick={decreaseCanvas}
+                    disabled={canvasCount === 1 || !isDisplay || recData}
+                  >
+                    <Minus size={16} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>
+                    {canvasCount === 1
+                      ? "At Least One Canvas Required"
+                      : "Decrease Channel"}
+                  </p>
+                </TooltipContent>
+              </Tooltip>
 
               <Separator orientation="vertical" className="h-full" />
 
+              {/* Toggle All Channels Button */}
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
-                    className="rounded-r-none mr-1"
-                    onClick={saveData}
-                    disabled={!hasData}
+                    className="flex items-center justify-center px-3 py-2 m-1 rounded-none select-none"
+                    onClick={toggleShowAllChannels}
+                    disabled={!isDisplay || recData}
                   >
-                    <Download size={16} />
+                    CH
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <p>Save Data as Zip</p>
+                  <p>
+                    {showAllChannels
+                      ? "Hide All Channels"
+                      : "Show All Channels"}
+                  </p>
                 </TooltipContent>
               </Tooltip>
 
+              <Separator orientation="vertical" className="h-full" />
+
+              {/* Increase Canvas Button */}
               <Tooltip>
                 <TooltipTrigger asChild>
                   <Button
                     className="rounded-l-none"
-                    onClick={deleteDataFromIndexedDB}
-                    disabled={!hasData}
+                    onClick={increaseCanvas}
+                    disabled={canvasCount >= 6 || !isDisplay || recData}
                   >
-                    <Trash2 size={20} />
+                    <Plus size={16} />
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  <p>Delete All Data</p>
+                  <p>
+                    {canvasCount >= 6
+                      ? "Maximum Channels Reached"
+                      : "Increase Channel"}
+                  </p>
                 </TooltipContent>
               </Tooltip>
             </div>
-          </TooltipProvider>
-        )}
-
-        {/* Canvas control buttons with tooltip */}
-        {isConnected && (
-          <TooltipProvider>
-            <Tooltip>
-              <div className="flex items-center mx-0 px-0">
-                {/* Decrease Canvas Button */}
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      className="rounded-r-none"
-                      onClick={decreaseCanvas}
-                      disabled={canvasCount === 1 || !isDisplay || recData}
-                    >
-                      <Minus size={16} />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>
-                      {canvasCount === 1
-                        ? "At Least One Canvas Required"
-                        : "Decrease Channel"}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-
-                <Separator orientation="vertical" className="h-full" />
-
-                {/* Toggle All Channels Button */}
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      className="flex items-center justify-center px-3 py-2 m-1 rounded-none select-none"
-                      onClick={toggleShowAllChannels}
-                      disabled={!isDisplay || recData}
-                    >
-                      CH
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>
-                      {showAllChannels
-                        ? "Hide All Channels"
-                        : "Show All Channels"}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-
-                <Separator orientation="vertical" className="h-full" />
-
-                {/* Increase Canvas Button */}
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      className="rounded-l-none"
-                      onClick={increaseCanvas}
-                      disabled={canvasCount >= 6 || !isDisplay || recData}
-                    >
-                      <Plus size={16} />
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>
-                      {canvasCount >= 6
-                        ? "Maximum Channels Reached"
-                        : "Increase Channel"}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-              </div>
-            </Tooltip>
-          </TooltipProvider>
-        )}
-      </div>
-      </div>
-      
-     
+          </Tooltip>
+        </TooltipProvider>
+      )}
     </div>
+  </div>
   );
 };
 
diff --git a/src/components/Steps.tsx b/src/components/Steps.tsx
index 0dd5803..32e4f8c 100644
--- a/src/components/Steps.tsx
+++ b/src/components/Steps.tsx
@@ -1,4 +1,5 @@
-import * as React from "react";
+import React, { useState, useRef, useCallback, useEffect } from "react";
+
 import { Card, CardContent } from "./ui/card";
 import {
   Carousel,
@@ -106,12 +107,34 @@ const Steps: React.FC = () => {
       image: ImageLinks[5],
     },
   ];
-  const stepsHeightInVh = 
-  window.innerHeight > 945 ? (91* window.innerHeight) / 100 :
-  window.innerHeight > 585 ? (85* window.innerHeight) / 100 :
-  window.innerHeight <= 483 ? (76* window.innerHeight) / 100 : 
-  (75* window.innerHeight) / 100;
+  
+  // Function to calculate height
+  const calculateHeight = () => {
+    if (window.innerHeight > 945) return 90;
+    if (window.innerHeight > 585) return 88;
+    if (window.innerHeight <= 483) return 100;
+    return 80; // Default case
+  };
+  const [stepsHeightInVh, setStepsHeightInVh] = useState(calculateHeight());
+
+
+  useEffect(() => {
+    // Update height on window resize
+    const handleResize = () => {
+      setStepsHeightInVh(calculateHeight());
+    };
+
+    // Set the initial height
+    setStepsHeightInVh(calculateHeight());
+    
+    // Add event listener for window resize
+    window.addEventListener('resize', handleResize);
 
+    // Cleanup event listener on unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
   return (
     <div className={`flex flex-col justify-center items-center gap-2 px-4 `}
     style={{ height: `calc(${stepsHeightInVh}vh)` }}>