diff --git a/src/app/(surfspots)/layout.tsx b/src/app/(surfspots)/layout.tsx
index 603dcf2..dfd8b7a 100644
--- a/src/app/(surfspots)/layout.tsx
+++ b/src/app/(surfspots)/layout.tsx
@@ -24,8 +24,8 @@ export default async function FavoriteSpotsLayout({
     }
 
     return (
-        <main className="flex flex-col p-4 pt-20 xl:p-24">
-            <div className="flex flex-row justify-between gap-4 mb-4 items-center sticky top-14 bg-primary h-full z-20 pt-4 w-full">
+        <main className="flex flex-col p-4 pt-16 xl:p-20 h-full">
+            <div className="flex flex-row justify-between gap-4 items-center sticky top-14 bg-primary py-4 z-20 w-full">
                 <div className="flex flex-row gap-4 justify-start ">
                     {user && (
                         <Link href="/favorite">
@@ -51,7 +51,7 @@ export default async function FavoriteSpotsLayout({
                     </Link>
                 </div>
 
-                <div className="flex flex-row gap-0 justify-start items-center bg-dark/50 rounded-sm p-1">
+                <div className="flex flex-row gap-0 justify-start items-center bg-dark/50 rounded-sm p-2">
                     {currentTide?.tide === "rising" ? (
                         <RisingTideIcon size={20} color="text-light/50" />
                     ) : (
diff --git a/src/app/(surfspots)/spots/[spot_id]/page.tsx b/src/app/(surfspots)/spots/[spot_id]/page.tsx
index abe567b..592cb24 100644
--- a/src/app/(surfspots)/spots/[spot_id]/page.tsx
+++ b/src/app/(surfspots)/spots/[spot_id]/page.tsx
@@ -9,7 +9,7 @@ import type { Database } from "@/app/lib/database.types";
 import Link from "next/link";
 import { AddFavoriteIcon, ArrowBackIcon } from "@/app/components/icons/icons";
 import AddToFavoriteBtn from "@/app/components/AddToFavoriteBtn";
-import SpotInfoAccordeon from "@/app/components/SpotInfoAccordeon";
+import SpotInfo from "@/app/components/SpotInfo";
 import { PintxoRange } from "@/app/components/PintxoRange";
 import { getCurrentPintxoConditions } from "@/app/utils/surfUtils";
 import { DateTime } from "luxon";
@@ -69,14 +69,9 @@ export default async function SpotPage({
     return (
         <>
             {spot && (
-                <main>
-                    <div className="flex flex-row justify-start gap-4 items-center mb-4 px-4">
-                        <Link href="/spots">
-                            <ArrowBackIcon size={18} color="text-dark" />
-                        </Link>
-                    </div>
-                    <div className="flex flex-col justify-center px-4 gap-2 bg-dark/25 p-2 rounded-sm">
-                        <div className="flex flex-row justify-between items-center py-4">
+                <>
+                    <div className="flex flex-col justify-start px-4 gap-2 bg-dark/25 rounded-sm md:px-8 md:py-4 p-4 h-full">
+                        <div className="flex flex-row justify-between items-center md:mb-2">
                             <div className="font-body text-light text-2xl">
                                 {spot.name}
                             </div>
@@ -86,7 +81,7 @@ export default async function SpotPage({
                                 user={user}
                             />
                         </div>
-                        <div className="flex flex-row gap-6 justify-start  items-center ml-2 lg:m-0 overflow-y-auto my-4">
+                        <div className="flex flex-row gap-6 justify-start  items-center lg:m-0 overflow-y-auto my-4">
                             {currentPintxoCondition.map((pintxo, index) => (
                                 <PintxoRange
                                     key={index}
@@ -94,12 +89,20 @@ export default async function SpotPage({
                                 />
                             ))}
                         </div>
-                        <div className="flex flex-col justify-start w-ful gap-4">
-                            <SpotConditionsWeek spot={spot} />
-                            <SpotInfoAccordeon spot={spot} />
-                        </div>
                     </div>
-                </main>
+                    <div className="font-body text-secondary p-1 rounded-sm text-xs mt-2">
+                        Detailed Weekly Conditions
+                    </div>
+                    <div className="bg-dark/25 p-2">
+                        <SpotConditionsWeek spot={spot} />
+                    </div>
+                    <div className="font-body text-secondary p-1 rounded-sm text-xs mt-2">
+                        Spot Info
+                    </div>
+                    <div className="bg-dark/25 p-2 mb-4">
+                        <SpotInfo spot={spot} />
+                    </div>
+                </>
             )}
         </>
     );
diff --git a/src/app/components/SpotConditionsWeek.tsx b/src/app/components/SpotConditionsWeek.tsx
index a28f169..e17e145 100644
--- a/src/app/components/SpotConditionsWeek.tsx
+++ b/src/app/components/SpotConditionsWeek.tsx
@@ -39,7 +39,7 @@ export default function SpotConditionsWeek({
                         {localDateTimes?.map((item, index) => (
                             <td
                                 key={index}
-                                className="border border-light/5 text-xs p-1 text-light/50 font-body"
+                                className="border border-light/5 text-xs text-light/50 font-body text-center bg-primeshade"
                             >
                                 {item.split(" ")[0]}
                                 <br />
diff --git a/src/app/components/SpotInfo.tsx b/src/app/components/SpotInfo.tsx
new file mode 100644
index 0000000..0b63d3c
--- /dev/null
+++ b/src/app/components/SpotInfo.tsx
@@ -0,0 +1,64 @@
+"use client";
+import type { Database } from "../lib/database.types";
+type PintxoConditions = Database["public"]["Tables"]["spot_conditions"]["Row"];
+
+export default function SpotInfo({ spot }: { spot: PintxoConditions }) {
+    return (
+        <div
+            className={`flex flex-col justify-start items-center gap-2    
+                `}
+        >
+            <div className="font-body text-light text-xs p-4 font-light border-1 border border-light/25 rounded-sm m-2 leading-relaxed">
+                {spot.about || "N/A"}
+            </div>
+            <div className="flex flex-row justify-center mx-2 font-body text-xs text-light gap-2">
+                <div className=" border-1 border border-light/25 rounded-sm p-4">
+                    Best Surf: {spot.best_surf || "N/A"}
+                </div>
+                <div className=" border-1 border border-light/25 rounded-sm p-4">
+                    Board: {spot.board || "N/A"}
+                </div>
+                <div className=" border-1 border border-light/25 rounded-sm p-4">
+                    Surfer: {spot.surfer || "N/A"}
+                </div>
+            </div>
+            <div className="flex flex-row justify-center mx-2 font-body text-xs text-light gap-2">
+                <div className=" border-1 border border-light/25 rounded-sm p-4">
+                    Swell Direction: {spot.swell_direction || "N/A"}
+                </div>
+                <div className=" border-1 border border-light/25 rounded-sm p-4">
+                    Swell Handle: {spot.swell_handle || "N/A"}
+                </div>
+                <div className=" border-1 border border-light/25 rounded-sm p-4">
+                    Seabed: {spot.seabed || "N/A"}
+                </div>
+            </div>
+            <div className="flex flex-row justify-center mx-2 font-body text-xs text-light gap-2">
+                <div className=" border-1 border border-light/25 rounded-sm p-4">
+                    Crowd: {spot.crowd || "N/A"}
+                </div>
+                <div className=" border-1 border border-light/25 rounded-sm p-4">
+                    Season: {spot.season || "N/A"}
+                </div>
+                <div className=" border-1 border border-light/25 rounded-sm p-4">
+                    Wave Type: {spot.wavetype || "N/A"}
+                </div>
+            </div>
+            <div className="flex flex-row justify-center mx-2 font-body text-xs text-light gap-2">
+                <div className=" border-1 border border-light/25 rounded-sm p-4">
+                    Spot Rating: {spot.spot_rating || "N/A"}
+                </div>
+                <div className=" border-1 border border-light/25 rounded-sm p-4">
+                    Water Quality: {spot.water_quality || "N/A"}
+                </div>
+                <div className=" border-1 border border-light/25 rounded-sm p-4">
+                    Drive: <a href={spot.drive || "#"}>Directions</a>
+                </div>
+            </div>
+
+            {/* <div className=" border-1 border border-light/25 rounded-sm p-4">
+                Windy: <a href={spot.windy || "#"}>Windy Forecast</a>
+            </div> */}
+        </div>
+    );
+}
diff --git a/src/app/components/SpotInfoAccordeon.tsx b/src/app/components/SpotInfoAccordeon.tsx
deleted file mode 100644
index c349748..0000000
--- a/src/app/components/SpotInfoAccordeon.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-"use client";
-import React, { useState } from "react";
-import type { Database } from "../lib/database.types";
-type PintxoConditions = Database["public"]["Tables"]["spot_conditions"]["Row"];
-
-export default function SpotInfoAccordeon({
-    spot,
-}: {
-    spot: PintxoConditions;
-}) {
-    const [isOpen, setIsOpen] = useState<boolean>(false);
-
-    const toggleOpen = (): void => {
-        setIsOpen(!isOpen);
-    };
-
-    return (
-        <div className="">
-            <button
-                onClick={toggleOpen}
-                className="font-body text-secondary border border-secondary  hover:bg-secondary/25 flex p-1 px-2 rounded-sm text-sm mb-2"
-            >
-                Spot Info
-            </button>
-            <div
-                className={`bg-light/25  transition-all duration-500 ease-in-out ${
-                    isOpen
-                        ? "flex-grow max-h-screen opacity-100 p-4 "
-                        : "max-h-0 opacity-0"
-                }`}
-            >
-                <div className="font-body text-light text-lg">
-                    {spot.about || "N/A"}
-                </div>
-                <div className="font-body text-light text-lg">
-                    Best Surf: {spot.best_surf || "N/A"}
-                </div>
-                {/* <div className="font-body text-light text-lg">
-                    Board: {spot.board || "N/A"}
-                </div> */}
-                <div className="font-body text-light text-lg">
-                    Crowd: {spot.crowd || "N/A"}
-                </div>
-                <div className="font-body text-light text-lg">
-                    Drive: <a href={spot.drive || "#"}>Directions</a>
-                </div>
-                <div className="font-body text-light text-lg">
-                    Seabed: {spot.seabed || "N/A"}
-                </div>
-                <div className="font-body text-light text-lg">
-                    Season: {spot.season || "N/A"}
-                </div>
-                <div className="font-body text-light text-lg">
-                    Spot Rating: {spot.spot_rating || "N/A"}
-                </div>
-                <div className="font-body text-light text-lg">
-                    Surfer: {spot.surfer || "N/A"}
-                </div>
-                <div className="font-body text-light text-lg">
-                    Swell: {spot.swell || "N/A"}
-                </div>
-                <div className="font-body text-light text-lg">
-                    Swell Direction: {spot.swell_direction || "N/A"}
-                </div>
-                <div className="font-body text-light text-lg">
-                    Swell Handle: {spot.swell_handle || "N/A"}
-                </div>
-                <div className="font-body text-light text-lg">
-                    Water Quality: {spot.water_quality || "N/A"}
-                </div>
-                <div className="font-body text-light text-lg">
-                    Wave Type: {spot.wavetype || "N/A"}
-                </div>
-                <div className="font-body text-light text-lg">
-                    Windy: <a href={spot.windy || "#"}>Windy Forecast</a>
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 01c8a6f..53526a8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -67,7 +67,7 @@ export default async function RootLayout({
                 <div>
                     <Navbar user={user} />
                 </div>
-                <main className="h-full w-screen">{children}</main>
+                <main className="h-screen w-screen">{children}</main>
             </body>
         </html>
     );