diff --git a/app/components/BackgroundAurra.tsx b/app/components/BackgroundAurra.tsx
index e8681bb9f..238af0d79 100644
--- a/app/components/BackgroundAurra.tsx
+++ b/app/components/BackgroundAurra.tsx
@@ -23,7 +23,12 @@ export function AuroraBackgroundDemo() {
           className="relative w-full  flex flex-col gap-4 items-center justify-center px-4 md:px-[14%]"
         >
           <div className="w-full text-left m-auto text-four">
-            <motion.div className="gap-2 flex mb-10 flex-row  w-fit p-1 pr-8 rounded-full bg-seven justify-start items-center text-semibold">
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 3, delay: 2 }}
+              className="gap-2 backdrop-blur-sm flex mb-10 flex-row  w-fit p-1 pr-8 rounded-full bg-seven justify-start items-center text-semibold"
+            >
               <motion.div
                 whileDrag={{}}
                 initial={{ rotate: 160, scale: 0.2, x: -200, x2: 0, y: -200 }}
@@ -57,12 +62,12 @@ export function AuroraBackgroundDemo() {
                   delay: 2,
                   duration: 1,
                 }}
-                className="font-semibold text-sm text-secondary"
+                className="font-semibold opacity-75 text-sm text-five"
               >
                 <motion.p
                   initial={{ opacity: 0, x: 10 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  animate={{ opacity: 1, x: 0 }}
+                  whileInView={{ opacity: 0.7, x: 0 }}
+                  animate={{ opacity: 0.7, x: 0 }}
                   transition={{
                     type: "spring",
                     stiffness: 260,
@@ -102,7 +107,7 @@ export function AuroraBackgroundDemo() {
                 duration: 0.8,
                 ease: [0.68, -0.55, 0.27, 1.55],
               }}
-              className="relative text-secondary font-bold z-10 md:pb-4 text-3xl  md:text-7xl   sm:text-4xl text-left "
+              className="relative text-four font-bold z-10 md:pb-4 text-3xl  md:text-7xl   sm:text-4xl text-left "
             >
               Build the right to way <br />
               <div>
@@ -126,7 +131,7 @@ export function AuroraBackgroundDemo() {
 
             <motion.div className=" gap-2 mt-10 max-w-fit flex justify-center items-center">
               <motion.button
-                className="inline-flex text-four h-10 items-center justify-center rounded-full border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-4 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-four focus:ring-offset-2 focus:ring-offset-slate-50"
+                className="inline-flex text-four  items-center justify-center rounded-full border border-seven bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,var(--five))] bg-[length:200%_100%] px-4 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-four focus:ring-offset-2 focus:ring-offset-slate-50"
                 initial={{ opacity: 0, scale: 0.2, x: -200, y: -200 }}
                 animate={{ opacity: 1, scale: 1, x: 0, y: 0 }}
                 transition={{
@@ -139,7 +144,7 @@ export function AuroraBackgroundDemo() {
                 whileHover={{ scale: 1.1 }}
               >
                 <Link
-                  href="https://1b7b70d3-f411-4cfb-9f19-e2cd3227a33d-00-1e36r1z5gi36g.pike.replit.dev/"
+                  href="/"
                   className=" rounded-full 
                  uppercase  p-2 px-4  text-center text-sm"
                 >
diff --git a/app/components/DeviceAddress.tsx b/app/components/DeviceAddress.tsx
index f7f800a2b..e38ca3383 100644
--- a/app/components/DeviceAddress.tsx
+++ b/app/components/DeviceAddress.tsx
@@ -44,7 +44,7 @@ const DeviceAddress: React.FC = () => {
             initial={{ opacity: 0, x: 30 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ delay: 4 }}
-            className="flex text-xs overflow-y-hidden sm:text-sm gap-1 text-secondary justify-center items-center"
+            className="flex text-sm text-five  md:text-md overflow-y-hidden sm:text-sm gap-1 text-secondary justify-center items-center"
           >
             {/* <h2 className="text-2xl font-bold mb-4 text-center">Device Address</h2> */}
             {/* <p className="text-lg"><strong>IP:</strong> {address.ip}</p> */}
@@ -55,9 +55,7 @@ const DeviceAddress: React.FC = () => {
           </motion.div>
         ) : (
           <div className="text-center  p-2">
-            <motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
-              just a moment...
-            </motion.p>
+            <motion.p>just a moment...</motion.p>
           </div>
         )}
       </div>
diff --git a/app/components/WeatherApp.tsx b/app/components/WeatherApp.tsx
index de6bba171..2416fd720 100644
--- a/app/components/WeatherApp.tsx
+++ b/app/components/WeatherApp.tsx
@@ -1,11 +1,14 @@
 // components/Weather.tsx
 "use client";
-import { IconCloudFilled, IconTemperature, IconWind } from "@tabler/icons-react";
+import {
+  IconCloudFilled,
+  IconTemperature,
+  IconWind,
+} from "@tabler/icons-react";
 import React, { useEffect, useState } from "react";
 import axios from "axios";
 import { motion } from "framer-motion";
 
-
 const Weather: React.FC = () => {
   const [weather, setWeather] = useState<any>(null);
   const [error, setError] = useState<string | null>(null);
@@ -64,31 +67,30 @@ const Weather: React.FC = () => {
           animate={{ opacity: 1, x: 0 }}
           whileInView={{ opacity: 1, x: 0 }}
           transition={{ delay: 6, duration: 2 }}
-        >{error}</motion.p>
+        >
+          {error}
+        </motion.p>
       ) : weather ? (
-        <div className="sm:text-sm ">
+        <div className="text-sm text-five  md:text-md">
           <motion.div
             initial={{ opacity: 0, x: 10 }}
-            animate={{ opacity: .7, x: 0 }}
-            transition={{ delay: 4,
-              ease: "easeInOut",
-              
-              }}
-              
-            
-            className=" flex flex-col opacity-75 sm:flex-row md:gap-2  md:p-2   rounded-md items-end">
+            animate={{ opacity: 0.7, x: 0 }}
+            transition={{ delay: 4, ease: "easeInOut" }}
+            className=" flex flex-col opacity-75 sm:flex-row md:gap-2  md:p-2   rounded-md items-end"
+          >
             <motion.p
               initial={{ opacity: 0, x: 10 }}
               animate={{ opacity: 1, x: 0 }}
-              transition={{ delay: 4,  ease: "easeInOut", }}
-              className="flex w-fit gap-2 md:bg-seven md:p-1 rounded-full md:px-2 items-center justify-center"
+              transition={{ delay: 4, ease: "easeInOut" }}
+              className="flex w-fit  md:bg-seven md:p-1  rounded-full md:px-2 items-center justify-center"
             >
-              <IconTemperature />{weather.current_weather.temperature}°C
+              <IconTemperature />
+              {weather.current_weather.temperature}°C
             </motion.p>
             <motion.p
               initial={{ opacity: 0, x: 10 }}
               animate={{ opacity: 1, x: 0 }}
-              transition={{ delay: 6 ,  ease: "easeInOut",}}
+              transition={{ delay: 6, ease: "easeInOut" }}
               className=" flex w-fit gap-2 md:bg-seven md:p-1 rounded-full md:px-2 items-center justify-center"
             >
               <IconCloudFilled /> {weather.hourly.cloudcover[0]}%
@@ -99,7 +101,7 @@ const Weather: React.FC = () => {
             <motion.p
               initial={{ opacity: 0, x: 30 }}
               animate={{ opacity: 1, x: 0 }}
-              transition={{ delay: 8 ,  ease: "easeInOut",}}
+              transition={{ delay: 8, ease: "easeInOut" }}
               className=" flex w-fit gap-2 md:bg-seven md:p-1 rounded-full md:px-2 items-center justify-center"
             >
               <IconWind /> {weather.hourly.wind_speed_10m[0]} km/h