diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
index 1e5579b..b752f63 100644
--- a/src/components/Canvas.tsx
+++ b/src/components/Canvas.tsx
@@ -135,6 +135,8 @@ const createCanvases = () => {
       const newWglPlots: WebglPlot[] = [];
       const newLines: WebglLine[] = [];
 
+
+
       for (let i = 0; i < numChannels; i++) {
         const canvas = document.createElement("canvas");
 
@@ -253,8 +255,8 @@ const createCanvases = () => {
 
   return (
     <div 
-    style={{ marginBottom: `${marginBottom}px` }} // Apply the dynamic margin-bottom here
-    className="flex justify-center items-center h-[80vh] mb-5 mt-3">
+    // style={{ marginBottom: `${marginBottom}px` }} // Apply the dynamic margin-bottom here
+    className="flex justify-center items-center min-h-[calc(100vh-8rem)]  mb-5 mt-3">
     {/* Canvas container taking 70% of the screen height */}
     <div className="flex flex-col justify-center items-start w-full px-3">
       <div className="grid w-full h-full relative">
diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx
index 0234136..f0fa987 100644
--- a/src/components/Connection.tsx
+++ b/src/components/Connection.tsx
@@ -96,7 +96,6 @@ const Connection: React.FC<ConnectionProps> = ({
   const writerRef = useRef<WritableStreamDefaultWriter<Uint8Array> | null>(
     null
   );
-  const buffer: number[] = []; // Buffer to store incoming data
   const bufferdRef =useRef<number[][][]>([[], []]); // Two buffers: [0] and [1]
   
   const togglePause = () => {
@@ -308,7 +307,7 @@ const Connection: React.FC<ConnectionProps> = ({
  
   // Function to read data from a connected device and process it
   const readData = async (): Promise<void> => {
-    
+    const buffer: number[] = []; // Buffer to store incoming data
     const HEADER_LENGTH = 3; // Length of the packet header
     const NUM_CHANNELS = 6; // Number of channels in the data packet
     const PACKET_LENGTH = 16; // Total length of each packet