From 62c5aa53a1267d954947038fe2eb5acf9f3d0ed6 Mon Sep 17 00:00:00 2001
From: BerissaMuyizere <muyizereberissa@gmail.com>
Date: Sat, 27 Sep 2025 08:47:32 +0300
Subject: [PATCH 1/2] responsive

---
 carbontrack/src/app/compliance_page/page.tsx  |  17 +--
 carbontrack/src/app/emissions/page.tsx        |   7 +-
 .../src/app/factory-dashboard/page.tsx        |  39 ++++---
 .../src/app/factory-manager-signup/page.tsx   | 108 +++++++++---------
 carbontrack/src/app/factory/page.test.tsx     |   1 -
 carbontrack/src/app/factory/page.tsx          |   7 +-
 .../src/app/forgot-password/page.test.tsx     |   1 -
 carbontrack/src/app/forgot-password/page.tsx  |  47 ++++++--
 carbontrack/src/app/get-started/page.tsx      |   4 +-
 carbontrack/src/app/ktda-dashboard/page.tsx   |  20 ++--
 .../src/app/ktda-manager-signup/page.tsx      |  44 +++----
 carbontrack/src/app/login/page.tsx            |  51 ++++++---
 carbontrack/src/app/records/page.tsx          |  10 +-
 .../src/app/reset-password/page.test.tsx      |   7 +-
 carbontrack/src/app/reset-password/page.tsx   |  49 +++++---
 .../src/app/sharedComponents/Button/index.tsx |   4 +-
 .../app/sharedComponents/Pagination/index.tsx |   2 +-
 carbontrack/src/app/teaser/page.tsx           |   2 +-
 carbontrack/src/app/verify-otp/page.tsx       |  48 +++++---
 19 files changed, 267 insertions(+), 201 deletions(-)

diff --git a/carbontrack/src/app/compliance_page/page.tsx b/carbontrack/src/app/compliance_page/page.tsx
index 22d6801..d7fb51b 100644
--- a/carbontrack/src/app/compliance_page/page.tsx
+++ b/carbontrack/src/app/compliance_page/page.tsx
@@ -4,10 +4,9 @@ import useFetchCompliance from "../hooks/useFetchCompliance";
 import useFetchFactories from "../hooks/useFetchFactories";
 import Pagination from "../sharedComponents/Pagination";
 import ComplianceTargetModal from "./component/AddTarget";
-import { IoPersonOutline, IoSettingsOutline } from "react-icons/io5";
 import { updateCompliance } from "../utils/fetchCompliance";
 import SidebarLayout from "../components/SideBarLayout";
-import Link from "next/link";
+
 
 interface Factory {
   factory_id: number;
@@ -148,14 +147,6 @@ export default function ComplianceDashboard() {
             <div>
               <h2 className="text-[2rem] font-bold">Compliance</h2>
             </div>
-            <div className="flex space-x-4 items-center">
-              <Link href="">
-                <IoSettingsOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" />
-              </Link>
-              <Link href="/ktda-profile">
-                <IoPersonOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" />
-              </Link>
-            </div>
           </div>
           {message && (
             <div
@@ -205,7 +196,7 @@ export default function ComplianceDashboard() {
             <table className="min-w-full text-left border-collapse border border-gray-700 lg:h-[60vh]">
               <thead className="bg-[#2A4759] text-white">
                 <tr>
-                  <th className="p-3 border border-gray-700 w-1/3">Factory</th>
+                  <th className="p-3 border border-gray-700 w-1/3 xl:pb-2">Factory</th>
                   <th className="p-3 border border-gray-700 w-1/3">
                     Compliant status
                   </th>
@@ -217,7 +208,7 @@ export default function ComplianceDashboard() {
               <tbody>
                 {paginatedData.length === 0 ? (
                   <tr>
-                    <td colSpan={3} className="p-4 text-center">
+                    <td colSpan={3} className="p-4 text-center ">
                       No data found
                     </td>
                   </tr>
@@ -238,7 +229,7 @@ export default function ComplianceDashboard() {
                       >
                         {item.compliance_status}
                       </td>
-                      <td className="p-3 border border-gray-700 italic text-gray-400">
+                      <td className="p-3 border border-gray-700 italic text-gray-400 ">
                         {formatDate(item.updated_at) ||
                           formatDate(item.created_at)}
                       </td>
diff --git a/carbontrack/src/app/emissions/page.tsx b/carbontrack/src/app/emissions/page.tsx
index 63386bf..807b6e2 100644
--- a/carbontrack/src/app/emissions/page.tsx
+++ b/carbontrack/src/app/emissions/page.tsx
@@ -73,10 +73,7 @@ export default function EmissionsHeatmapPage() {
     return (
         <SidebarLayout>
             <div className="flex flex-col items-center min-h-[calc(100vh-60px)] p-10">
-                <div className="flex justify-end w-16 ml-350 space-x-4">
-                    <Link href=""><IoSettingsOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" /></Link>
-                    <Link href="/ktda-profile"><IoPersonOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" /></Link>
-                </div>
+               
                 <div className="font-bold 2xl:text-[48px] xl:text-[40px] lg:text-[19px] 2xl:ml-0 xl:ml-0 lg:ml-12 2xl:mb-[15px] xl:mb-[10px] lg:mb-[0px] tracking-wide w-full">Factory Emissions</div>
                 <div className="bg-[#161C22] text-white rounded-[18px] shadow-[0_2px_24px_#0003] 2xl:p-[36px_40px] xl:p-[36px_40px] lg:p-[0px_0px] flex flex-col w-full 2xl:max-w-screen-2xl xl:max-w-screen-xl lg:max-w-screen-0.5xl 2xl:mt-10 xl:mt-1 lg:mt-0">
                     <div className="2xl:mb-6 xl:mb-1 lg:mb-0 2xl:ml-0 xl:ml-0 lg:ml-5 2xl:pt-0 xl:pt-0 lg:pt-0.5  flex items-center">
@@ -114,7 +111,7 @@ export default function EmissionsHeatmapPage() {
                                 {boxes}
                             </div>
                             <div className="2xl:flex 2xl:flex-row xl:flex xl:flex-row lg:flex lg:flex-row items-start 2xl:ml-[2px] xl:ml-[px] lg:ml-[0px] flex-grow">
-                                <div className="relative 2xl:h-[320px] xl:h-[120px] lg:h-[120px] 2xl:ml-20 xl:ml-1 lg:ml-0 ">
+                                <div className="relative 2xl:h-[320px] xl:h-[120px] lg:h-[120px] 2xl:ml-20 xl:ml-10 lg:ml-0 ">
                                     <div
                                         className="rounded-[6px] border border-white block mt-[12px] 2xl:mr-[28px] xl:mr-[2px] lg:mr-[0px]"
                                         style={{
diff --git a/carbontrack/src/app/factory-dashboard/page.tsx b/carbontrack/src/app/factory-dashboard/page.tsx
index baf85b1..2ff62ba 100644
--- a/carbontrack/src/app/factory-dashboard/page.tsx
+++ b/carbontrack/src/app/factory-dashboard/page.tsx
@@ -1,8 +1,18 @@
 "use client";
 import React from "react";
 import "react-datepicker/dist/react-datepicker.css";
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid,Tooltip, LineChart, Line, ResponsiveContainer,} from "recharts";
-import { IoSettingsOutline, IoPersonOutline } from "react-icons/io5";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  LineChart,
+  Line,
+  ResponsiveContainer,
+} from "recharts";
+import { IoPersonOutline } from "react-icons/io5";
 import { useFetchEmission } from "../hooks/useFetchEmissions";
 import { useFetchEnergyEntries } from "../hooks/useFetchEnergyEntries";
 import Link from "next/link";
@@ -24,13 +34,10 @@ export default function DashboardPage() {
     <FactoryLayout>
       <div className="bg-black text-white w-full min-h-screen flex flex-col">
         <MqttSubscriber />
-        <main className="flex-1 p-4 md:p-8 overflow-auto w-full max-w-7xl mx-auto">
+        <main className="flex-1 p-4 md:p-8 overflow-auto w-full max-w-9xl mx-auto">
           <div className="flex justify-end space-x-4 mb-4">
-            <Link href="">
-              <IoSettingsOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" />
-            </Link>
             <Link href="/factory-profile">
-              <IoPersonOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" />
+              <IoPersonOutline className="text-[#F79B72] 2xl:w-7 2xl:h-7 xl:w-7 xl:h-7 lg:w-5 lg:h-5 cursor-pointer hover:text-[#2A4759]" />
             </Link>
           </div>
           <h2 className="text-2xl font-bold mb-2 truncate">Factory Dashboard</h2>
@@ -48,8 +55,8 @@ export default function DashboardPage() {
               }
             }}
           />
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mb-8">
-            <div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 2xl:mb-8 xl:mb-8 lg:mb-4">
+            <div className="bg-slate-700 xl:p-6 lg:p-3 p-6 2xl:p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
               <p className="text-gray-300">Today’s total CO2 emissions</p>
               <p className="text-2xl font-bold mt-2 truncate">
                 {emissionsLoading
@@ -59,7 +66,7 @@ export default function DashboardPage() {
                   : "No data"}
               </p>
             </div>
-            <div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
+            <div className="bg-slate-700 xl:p-6 lg:p-3 p-6 2xl:p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
               <p className="text-gray-300">This month total CO2 emissions</p>
               <p className="text-2xl font-bold mt-2 truncate">
                 {monthTotal !== null
@@ -69,7 +76,7 @@ export default function DashboardPage() {
                   : "No data"}
               </p>
             </div>
-            <div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
+            <div className="bg-slate-700 xl:p-6 lg:p-3 p-6 2xl:p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
               <p className="text-gray-300">Indirect Emissions</p>
               <p className="text-2xl font-bold mt-2 truncate">
                 {totalCO2 !== null
@@ -81,7 +88,9 @@ export default function DashboardPage() {
             </div>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-            <div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 w-full h-56 sm:h-72 md:h-96">
+            <div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 w-full
+              h-56 sm:h-72 2xl:h-126 xl:h-94
+              lg:h-60 md:h-54">
               <h3 className="text-xl font-semibold mb-4 text-white truncate">
                 CO2 Levels Over Time
               </h3>
@@ -104,7 +113,9 @@ export default function DashboardPage() {
                 </BarChart>
               </ResponsiveContainer>
             </div>
-            <div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 w-full h-56 sm:h-72 md:h-96">
+            <div className="bg-slate-700 p-6 rounded-lg shadow hover:shadow-lg transition-shadow duration-300 w-full
+              h-56 sm:h-72 2xl:h-126 xl:h-94
+              lg:h-60 md:h-54">
               <h3 className="text-xl font-semibold mb-4 text-white truncate">
                 Current CO2 Emissions
               </h3>
@@ -126,4 +137,4 @@ export default function DashboardPage() {
       </div>
     </FactoryLayout>
   );
-}
\ No newline at end of file
+}
diff --git a/carbontrack/src/app/factory-manager-signup/page.tsx b/carbontrack/src/app/factory-manager-signup/page.tsx
index a3a93fa..3672891 100644
--- a/carbontrack/src/app/factory-manager-signup/page.tsx
+++ b/carbontrack/src/app/factory-manager-signup/page.tsx
@@ -86,49 +86,49 @@ export default function SignupPage() {
     }
   };
   return (
-    <div className="flex h-screen w-screen bg-[#D9D9D9]">
-      <div className="flex flex-col justify-center items-center flex-1 bg-gray-200 text-center 2xl:p-10 2xl:pt-40">
-        <motion.div
-          initial={{ opacity: 0, scale: 0.9 }}
-          animate={{ opacity: 1, scale: 1 }}
-          transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
-        >
-          <Image
-            src="/images/logo.png"
-            alt="carbon-track logo"
-            width={0}
-            height={0}
-            sizes="100vw"
-            className="w-100 h-100 mx-auto object-contain 2xl:w-[400px] 2xl:h-[400px]"
-          />
-        </motion.div>
-        <motion.h1
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1, delay: 0.5, ease: "easeOut" }}
-          className="text-5xl md:text-3xl lg:text-4xl font-black text-[#2A4759] 2xl:text-[60px]"
-        >
-          Carbon Track
-        </motion.h1>
-        <motion.p
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 1, delay: 1, ease: "easeOut" }}
-          className="text-base md:text-lg xl:text-2xl lg:text-xl 2xl:text-[35px] 2xl:py-2 font-semibold text-[#F79B72]"
-        >
-          Welcome to Carbon Track
-        </motion.p>
-      </div>
+    <div className="flex h-screen w-screen flex-col lg:flex-row bg-[#D9D9D9]">
+         <div className="flex flex-col items-center justify-center p-6 bg-gray-200 text-center lg:w-1/2">
+           <motion.div
+             initial={{ opacity: 0, scale: 0.9 }}
+             animate={{ opacity: 1, scale: 1 }}
+             transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
+             className="mb-6"
+           >
+             <Image
+               src="/images/logo.png"
+               alt="carbon-track logo"
+               width={200}
+               height={200}
+               className="mx-auto object-contain w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 xl:w-90"
+             />
+           </motion.div>
+           <motion.h1
+             initial={{ opacity: 0, y: 20 }}
+             animate={{ opacity: 1, y: 0 }}
+             transition={{ duration: 1, delay: 0.5, ease: "easeOut" }}
+             className="text-2xl sm:text-3xl md:text-4xl font-black text-[#2A4759] xl:text-5xl"
+           >
+             Carbon Track
+           </motion.h1>
+           <motion.p
+             initial={{ opacity: 0, y: 20 }}
+             animate={{ opacity: 1, y: 0 }}
+             transition={{ duration: 1, delay: 1, ease: "easeOut" }}
+             className="text-sm sm:text-base md:text-lg font-semibold text-[#F79B72] mt-2 px-4 xl:text-2xl"
+           >
+             Welcome to Carbon Track
+           </motion.p>
+         </div>
       <div className="flex-1 flex items-center justify-center bg-[#234052] ">
         <div
-          className=" bg-[#E7E7E7] rounded-2xl p-12 flex flex-col items-center justify-center xl:h-screen"
+          className=" bg-[#E7E7E7] rounded-2xl p-12 flex flex-col items-center justify-center xl:h-screen md:h-[100vh] md:m-10 "
           style={{ boxShadow: "0 2px 10px 0 #f79b72" }}
         >
-          <h2 className="text-4xl  font-bold xl:mb-4 text-[#F7A77B] text-center">Sign Up</h2>
-          <form onSubmit={handleSubmit} className="w-full space-y-5  xl:space-y-2">
-            <div className="flex space-x-6">
+          <h2 className="text-4xl  font-bold xl:mb-4 text-[#F7A77B] md:text-3xl text-center xl:text-4xl">Sign Up</h2>
+          <form onSubmit={handleSubmit} className="w-full space-y-5  xl:space-y-3 md:space-y-1  ">
+            <div className="flex space-x-6 ">
               <div>
-                <label className="block text-[#2A4759] text-[20px] font-medium mb-1">
+                <label className="block xl:text-[18px] md:text-[15px] text-[#2A4759] text-[20px] font-medium mb-1">
                   First Name
                 </label>
                 <input
@@ -137,13 +137,13 @@ export default function SignupPage() {
                   placeholder="eg, Mark"
                   value={formData.first_name}
                   onChange={handleChange}
-                  className="w-full p-3 border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
+                  className="w-full p-3 md:h-9 border border-[#2A4759] bg-transparent rounded-md text-[#234052] xl:h-12"
                   required
                 />
                 {errors.first_name && <p className="text-red-500 text-sm">{errors.first_name}</p>}
               </div>
               <div>
-                <label className="block text-[#2A4759] text-[20px] font-medium mb-1">
+                <label className="block xl:text-[18px] md:text-[15px] text-[#2A4759] text-[20px] font-medium mb-1">
                   Last Name
                 </label>
                 <input
@@ -152,27 +152,27 @@ export default function SignupPage() {
                   placeholder="eg, Mathew"
                   value={formData.last_name}
                   onChange={handleChange}
-                  className="w-full p-3 border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
+                  className="w-full p-3 border xl:h-12 md:h-9 border-[#2A4759] bg-transparent rounded-md text-[#234052]"
                   required
                 />
                 {errors.last_name && <p className="text-red-500 text-sm">{errors.last_name}</p>}
               </div>
             </div>
             <div>
-              <label className="block text-[#2A4759] text-[20px] font-medium mb-1">Email</label>
+              <label className="block md:text-[15px] text-[#2A4759] text-[20px] xl:text-[18px] font-medium mb-1">Email</label>
               <input
                 type="email"
                 name="email"
                 placeholder="eg, mark@gmail.com"
                 value={formData.email}
                 onChange={handleChange}
-                className="w-full p-3 border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
+                className="w-full p-3 border xl:h-12 md:h-9 border-[#2A4759] bg-transparent rounded-md text-[#234052]"
                 required
               />
               {errors.email && <p className="text-red-500 text-sm">{errors.email}</p>}
             </div>
             <div>
-              <label className="block text-[#2A4759] text-[20px] font-medium mb-1">
+              <label className="block xl:text-[18px] md:text-[15px] text-[#2A4759] text-[20px] font-medium mb-1">
                 Phone Number
               </label>
               <input
@@ -183,7 +183,7 @@ export default function SignupPage() {
                 onChange={handleChange}
                 maxLength={15}
                 inputMode="numeric"
-                className="w-full p-3 border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
+                className="w-full p-3 md:h-9 xl:h-12 border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
                 required
               />
               {errors.phone_number && (
@@ -192,14 +192,14 @@ export default function SignupPage() {
             </div>
             {formData.user_type === "factory" && (
               <div>
-                <label className="block text-[#2A4759] text-[20px] font-medium mb-1">
+                <label className="block xl:text-[18px] md:text-[15px] text-[#2A4759] text-[20px] font-medium mb-1 ">
                   Factory Name
                 </label>
                 <select
                   name="factory"
                   value={formData.factory}
                   onChange={handleChange}
-                  className="w-full p-3 border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
+                  className="w-full p-3 xl:h-12 border md:h-9 border-[#2A4759] bg-transparent rounded-md text-[#234052] md:pt-1"
                   disabled={loading}
                   required
                 >
@@ -216,27 +216,27 @@ export default function SignupPage() {
               </div>
             )}
             <div className="relative">
-              <label className="block text-[#2A4759] text-[20px] font-medium mb-1">Password</label>
+              <label className="block xl:text-[18px] md:text-[15px] text-[#2A4759] text-[20px] font-medium mb-1">Password</label>
               <input
                 type={show.password ? "text" : "password"}
                 name="password"
                 placeholder="eg, 0@HGY4"
                 value={formData.password}
                 onChange={handleChange}
-                className="w-full p-3 border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
+                className="w-full p-3 xl:h-12 border md:h-9 border-[#2A4759] bg-transparent rounded-md text-[#234052]"
                 required
               />
               <button
                 type="button"
                 onClick={() => setShow((prev) => ({ ...prev, password: !prev.password }))}
-                className="absolute top-15 right-3 -translate-y-2 text-[#2A4759]"
+                className="absolute top-15 right-3 -translate-y-2 text-[#2A4759]  md:top-11 xl:top-13"
               >
                 {show.password ? <FiEye /> : <FiEyeOff />}
               </button>
               {errors.password && <p className="text-red-500 text-sm">{errors.password}</p>}
             </div>
             <div className="relative">
-              <label className="block text-[#2A4759] text-[20px] font-medium mb-1">
+              <label className="block md:text-[15px] text-[#2A4759] text-[20px] font-medium mb-1 xl:text-[18px]">
                 Confirm Password
               </label>
               <input
@@ -245,7 +245,7 @@ export default function SignupPage() {
                 placeholder="eg, 0@HGY4"
                 value={formData.confirmPassword}
                 onChange={handleChange}
-                className="w-full p-3 border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
+                className="w-full md:h-9 xl:h-12 p-3 border border-[#2A4759] bg-transparent rounded-md text-[#234052] "
                 required
               />
               <button
@@ -253,7 +253,7 @@ export default function SignupPage() {
                 onClick={() =>
                   setShow((prev) => ({ ...prev, confirmPassword: !prev.confirmPassword }))
                 }
-                className="absolute top-15 right-3 -translate-y-2 text-[#2A4759]"
+                className="absolute top-15 right-3 -translate-y-2 text-[#2A4759] md:top-11 xl:top-13"
               >
                 {show.confirmPassword ? <FiEye /> : <FiEyeOff />}
               </button>
@@ -270,7 +270,7 @@ export default function SignupPage() {
               variant="secondary"
               buttonText={loadingSignup ? "Signing Up..." : "Sign Up"}
             />
-            <p className="text-[#2A4759] text-[20px] text-center">
+            <p className="text-[#2A4759] text-[20px] text-center xl:mt-1 md:text-[15px] md:mt-3 xl:text-[20px] ">
               Already have an account?
               <a href="/login" className="ml-1 text-[#F7A77B] font-semibold hover:underline">
                 Sign In
diff --git a/carbontrack/src/app/factory/page.test.tsx b/carbontrack/src/app/factory/page.test.tsx
index 6bfb3f1..63ea70c 100644
--- a/carbontrack/src/app/factory/page.test.tsx
+++ b/carbontrack/src/app/factory/page.test.tsx
@@ -165,7 +165,6 @@ describe('FactoryEmissionLeaderboard', () => {
   test('renders sidebar layout and icons correctly', () => {
     render(<FactoryEmissionLeaderboard />);
     expect(screen.getByTestId('sidebar-layout')).toBeInTheDocument();
-    expect(screen.getByTestId('person-icon')).toBeInTheDocument();
     
   });
   test('handles empty emissions data', () => {
diff --git a/carbontrack/src/app/factory/page.tsx b/carbontrack/src/app/factory/page.tsx
index 6484807..1552d49 100644
--- a/carbontrack/src/app/factory/page.tsx
+++ b/carbontrack/src/app/factory/page.tsx
@@ -38,12 +38,7 @@ export default function FactoryEmissionLeaderboard() {
     return (
         <SidebarLayout>
             <div className="p-2 min-h-screen text-white mx-auto ml-10 pt-9">
-                <div className="flex justify-end w-16 ml-350 space-x-4">
-                   
-                    <Link href="/ktda-profile">
-                        <IoPersonOutline className="text-[#F79B72] w-7 h-7 cursor-pointer hover:text-[#2A4759]" />
-                    </Link>
-                </div>
+                
                 <h1 className='font-500 2xl:text-[48px] xl:text-[35px] lg:text-[25px] 2xl:mb-6 xl:mb-2 lg:mb-2'>Factory Emission Leaderboard</h1>
                 <div className='flex space-x-20 2xl:mb-8 xl:mb-5 lg:mb-5'>
                     <div>
diff --git a/carbontrack/src/app/forgot-password/page.test.tsx b/carbontrack/src/app/forgot-password/page.test.tsx
index 784d5a5..391d344 100644
--- a/carbontrack/src/app/forgot-password/page.test.tsx
+++ b/carbontrack/src/app/forgot-password/page.test.tsx
@@ -49,7 +49,6 @@ describe("ForgotPasswordPage", () => {
 
     expect(screen.getByAltText("carbon-track logo")).toBeInTheDocument();
     expect(screen.getByText("Carbon Track")).toBeInTheDocument();
-    expect(screen.getByText("Welcome Back")).toBeInTheDocument();
     expect(screen.getByRole("heading", { name: "Forgot Password?" })).toBeInTheDocument();
     expect(screen.getByText("Enter your email address below")).toBeInTheDocument();
     expect(screen.getByPlaceholderText("eg,0@HGY4")).toBeInTheDocument();
diff --git a/carbontrack/src/app/forgot-password/page.tsx b/carbontrack/src/app/forgot-password/page.tsx
index 705e9cd..956d94b 100644
--- a/carbontrack/src/app/forgot-password/page.tsx
+++ b/carbontrack/src/app/forgot-password/page.tsx
@@ -27,21 +27,44 @@ export default function ForgotPasswordPage() {
 };
 
   return (
-    <div className="h-screen w-screen flex ">
-      <div className="flex flex-col items-center justify-center flex-1 bg-[#e7e7e7]">
-                    <div className="flex flex-col items-center flex-1 bg-gray-200 text-center 2xl:p-10 2xl:pt-40">
-                    <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}>
-                      <Image src="/images/logo.png" alt="carbon-track logo" width={0} height={0} sizes="100vw" className="w-100 h-100 mx-auto object-contain 2xl:w-[400px] 2xl:h-[400px]" />
-                    </motion.div>
-                    <motion.h1 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 0.5, ease: "easeOut" }}  className="text-5xl md:text-3xl lg:text-4xl font-black text-[#2A4759] 2xl:text-[60px]">Carbon Track</motion.h1>
-                    <motion.p initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 1, ease: "easeOut" }}  className="text-base md:text-lg lg:text-xl 2xl:text-[35px] 2xl:py-2 font-semibold text-[#F79B72]">Welcome Back</motion.p>
-                  </div>
-      </div>
+        <div className="flex h-screen w-screen flex-col lg:flex-row bg-[#D9D9D9]">
+             <div className="flex flex-col items-center justify-center p-6 bg-gray-200 text-center lg:w-1/2">
+               <motion.div
+                 initial={{ opacity: 0, scale: 0.9 }}
+                 animate={{ opacity: 1, scale: 1 }}
+                 transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
+                 className="mb-6"
+               >
+                 <Image
+                   src="/images/logo.png"
+                   alt="carbon-track logo"
+                   width={200}
+                   height={200}
+                   className="mx-auto object-contain w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 xl:w-90"
+                 />
+               </motion.div>
+               <motion.h1
+                 initial={{ opacity: 0, y: 20 }}
+                 animate={{ opacity: 1, y: 0 }}
+                 transition={{ duration: 1, delay: 0.5, ease: "easeOut" }}
+                 className="text-2xl sm:text-3xl md:text-4xl font-black text-[#2A4759] xl:text-5xl"
+               >
+                 Carbon Track
+               </motion.h1>
+               <motion.p
+                 initial={{ opacity: 0, y: 20 }}
+                 animate={{ opacity: 1, y: 0 }}
+                 transition={{ duration: 1, delay: 1, ease: "easeOut" }}
+                 className="text-sm sm:text-base md:text-lg font-semibold text-[#F79B72] mt-2 px-4 xl:text-2xl"
+               >
+                 Welcome back
+               </motion.p>
+             </div>
      <div className="flex-1 flex items-center justify-center bg-[#234052]">
-        <div className="max-w-2xl w-1/2 bg-[#E7E7E7] rounded-2xl p-12  " style={{ boxShadow: "0 2px 10px 0 #f79b72" }}>
+        <div className="max-w-2xl w-1/2 bg-[#E7E7E7] rounded-2xl p-12 xl:w-120 md:w-100 " style={{ boxShadow: "0 2px 10px 0 #f79b72" }}>
           <h2 className="text-4xl font-bold mb-8 text-[#F7A77B] text-center">Forgot Password?</h2>
           <div className="mb-6 font-medium text-[#2A4759] text-[20px] text-center">Enter your email address below</div>
-          <form onSubmit={handleSubmit} className="space-y-5">
+          <form onSubmit={handleSubmit} className="space-y-5 xl:space-y-10">
             <div>
               <label className="block text-[#2A4759] font-medium text-[20px] mb-1">Email</label>
               <input type="email"  placeholder="eg,0@HGY4" value={email}  onChange={(e) => setEmail(e.target.value)} className="w-full p-3 border border-[#234052] bg-transparent rounded-md text-[#234052] placeholder:text-[#b2b2b2] font-medium " required />
diff --git a/carbontrack/src/app/get-started/page.tsx b/carbontrack/src/app/get-started/page.tsx
index d40109c..0032ef7 100644
--- a/carbontrack/src/app/get-started/page.tsx
+++ b/carbontrack/src/app/get-started/page.tsx
@@ -13,7 +13,7 @@ function GetStarted() {
     }
   };
   return (
-    <main className="w-screen items-center justify-center bg-gray-100 h-screen  ">
+    <main className="w-screen items-center justify-center bg-gray-100 h-screen ">
       <div>
         <Image
           src={"/images/Ellipse 11.png"}
@@ -21,7 +21,7 @@ function GetStarted() {
           width={0}
           height={0}
           sizes="100vw"
-          className="absolute top-0 left-0 w-[40%] h-auto md:w-[30%] lg:w-[14.95%] xl:w-[15.97%] 2xl:w-[13.35%] 2xl:h-[100%] object-contain "
+          className="absolute top-0 left-0 w-[40%]  md:w-[30%] lg:w-[14.95%] xl:w-[15.97%] 2xl:w-[13.35%] 2xl:h-[100%] object-contain  xl:h-[100vh] xl:ml-[-23] "
         />
       </div>
       <div className="flex flex-col text-center items-center justify-center lg:pt-20 xl:pt-50">
diff --git a/carbontrack/src/app/ktda-dashboard/page.tsx b/carbontrack/src/app/ktda-dashboard/page.tsx
index 873b67d..32c28f6 100644
--- a/carbontrack/src/app/ktda-dashboard/page.tsx
+++ b/carbontrack/src/app/ktda-dashboard/page.tsx
@@ -91,7 +91,7 @@ export default function DashboardPage() {
   const isLoading = energyLoading || emissionLoading || complianceLoading || factoryLoading;
   return (
     <SidebarLayout>
-      <div className="h-screen text-white 2xl:w-[83vw] 2xl:ml-5 xl:w-[80vw] xl:ml-0">
+      <div className="h-screen text-white 2xl:w-[83vw] 2xl:ml-5 xl:w-[80vw] xl:ml-0 overflow-hidden">
         <main className="flex-1 2xl:p-6 xl:p-5 lg:p-3 ">
           {isLoading ? (
             <div className="text-center text-white text-lg mt-20">Loading data...</div>
@@ -121,11 +121,11 @@ export default function DashboardPage() {
                 </div>
               </header>
               <div className="flex justify-between">
-                <div className="bg-gray-800 2xl:p-4 xl:p-2 rounded-lg 2xl:w-90 xl:w-58">
+                <div className="bg-gray-800 2xl:p-4 xl:p-2 rounded-lg 2xl:w-90 xl:w-58 xl:h-[13vh]">
                   <p className="2xl:text-[20px] xl:text-[19px]">Compliant Factories</p>
                   <h2 className="text-xl font-bold 2xl:mt-5 xl:mt-2">{filteredCompliance.length}</h2>
                 </div>
-                <div className="bg-gray-800 2xl:p-4 xl:p-2 rounded-lg 2xl:w-90 xl:w-58">
+                <div className="bg-gray-800 2xl:p-4 xl:p-2 rounded-lg 2xl:w-90 xl:w-58 xl:h-[13vh]">
                   <p className="2xl:text-[20px] xl:text-[15px]">Compliant Factories In Percent</p>
                   <h2 className="text-xl font-bold 2xl:mt-5 xl:mt-2">
                     {filteredCompliance.length > 0
@@ -133,7 +133,7 @@ export default function DashboardPage() {
                       : 0}{" "}%
                   </h2>
                 </div>
-                <div className="bg-gray-800 2xl:p-4 xl:p-2 rounded-lg 2xl:w-90 xl:w-68 xl:h-30">
+                <div className="bg-gray-800 2xl:p-4 xl:p-2 rounded-lg 2xl:w-90 xl:w-68  xl:h-[13vh] ">
                   <p className="2xl:text-[20px] xl:text-[19px]">Average Emission per Year</p>
                   <h2 className="text-xl font-bold 2xl:mt-5 xl:mt-2">
                     {filteredEmissions.length > 0
@@ -163,9 +163,9 @@ export default function DashboardPage() {
                     </LineChart>
                   </ResponsiveContainer>
                 </div>
-                <div className="2xl:space-y-4">
+                <div className="2xl:space-y-4 lg:h-[70vh]">
                   <div
-                    className="bg-[#444444] rounded-xl 2xl:p-4 xl:p-2 cursor-pointer"
+                    className="bg-[#444444] rounded-xl 2xl:p-4 xl:p-2 cursor-pointer lg:h-[10vh]"
                     onClick={() => setShowAlertModal(true)}
                     title="Click to view high emission alerts">
                     <div className="flex items-center 2xl:gap-3 xl:gap-3">
@@ -174,8 +174,8 @@ export default function DashboardPage() {
                       </div>
                       <div className="flex 2xl:gap-5">
                         <div>
-                          <div className="font-bold text-white xl:text-[20px]">High Emission Alert</div>
-                          <div className="2xl:text-sm text-red-200 xl:text-[18px]">Emission exceeded threshold</div>
+                          <div className="font-bold text-white xl:text-[20px] ">High Emission Alert</div>
+                          <div className="2xl:text-sm text-red-200 xl:text-[15px] " >Emission exceeded threshold</div>
                         </div>
                         <div className="2xl:text-xl xl:text-lg font-bold mt-1 text-red-600">
                           {alerts.length} Alert{alerts.length !== 1 && "s"}
@@ -184,7 +184,7 @@ export default function DashboardPage() {
                     </div>
                   </div>
                   <h3 className="font-semibold text-white text-[20px] xl:mt-4 xl:text-[25px]">Consumed Energy</h3>
-                  <div className="bg-gray-800 p-4 rounded-lg  xl:mt-2 xl:h-[67%]">
+                  <div className="bg-gray-800 p-4 rounded-lg  xl:mt-2 xl:h-[65%] ">
                     <ResponsiveContainer width="100%" height={250}>
                       <PieChart>
                         <Pie data={pieData} dataKey="value" nameKey="name" outerRadius={90} fill="#8884D8" label>
@@ -194,7 +194,7 @@ export default function DashboardPage() {
                         </Pie>
                       </PieChart>
                     </ResponsiveContainer>
-                    <div className="ml-10 xl:mb-6">
+                    <div className="ml-10 xl:mb-10">
                       <div className="xl:text-[15px]">
                         <span className="text-[#F79B72] text-[30px] xl:text-[18px]">■</span>
                         <span className="text-[20px] xl:text-[20px]"> Firewood</span>
diff --git a/carbontrack/src/app/ktda-manager-signup/page.tsx b/carbontrack/src/app/ktda-manager-signup/page.tsx
index 0b4e826..0878144 100644
--- a/carbontrack/src/app/ktda-manager-signup/page.tsx
+++ b/carbontrack/src/app/ktda-manager-signup/page.tsx
@@ -92,14 +92,14 @@ export default function SignupPage() {
             alt="carbon-track logo"
             width={200}
             height={200}
-            className="mx-auto object-contain w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48"
+            className="mx-auto object-contain w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 xl:w-90"
           />
         </motion.div>
         <motion.h1
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 1, delay: 0.5, ease: "easeOut" }}
-          className="text-2xl sm:text-3xl md:text-4xl font-black text-[#2A4759]"
+          className="text-2xl sm:text-3xl md:text-4xl font-black text-[#2A4759] xl:text-5xl"
         >
           Carbon Track
         </motion.h1>
@@ -107,21 +107,21 @@ export default function SignupPage() {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 1, delay: 1, ease: "easeOut" }}
-          className="text-sm sm:text-base md:text-lg font-semibold text-[#F79B72] mt-2 px-4"
+          className="text-sm sm:text-base md:text-lg font-semibold text-[#F79B72] mt-2 px-4 xl:text-2xl"
         >
           Welcome to Carbon Track
         </motion.p>
       </div>
       <div className="flex items-center justify-center p-4 lg:w-1/2 bg-[#234052]">
         <div
-          className="w-full max-w-md bg-[#E7E7E7] rounded-2xl p-6 shadow-lg"
+          className="w-full max-w-md bg-[#E7E7E7] rounded-2xl p-6 shadow-lg "
           style={{ boxShadow: "0 2px 10px 0 #F79B72" }}
         >
-          <h2 className="text-xl sm:text-2xl font-bold mb-6 text-[#F7A77B] text-center">Sign Up</h2>
-          <form onSubmit={handleSubmit} className="w-full space-y-4">
+          <h2 className="text-xl sm:text-2xl md:mb-2 font-bold mb-6 text-[#F7A77B] text-center">Sign Up</h2>
+          <form onSubmit={handleSubmit} className="w-full space-y-4 md:space-y-1 md:h-[80vh] xl:space-y-4">
             <div className="flex flex-col sm:flex-row sm:space-x-4 space-y-4 sm:space-y-0">
               <div className="flex-1">
-                <label className="block text-[#2A4759] text-sm sm:text-base font-medium mb-1">
+                <label className="block text-[#2A4759] text-sm sm:text-base font-medium mb-1  xl:text-[20px]">
                   First Name
                 </label>
                 <input
@@ -130,13 +130,13 @@ export default function SignupPage() {
                   placeholder="eg, Mark"
                   value={formData.first_name}
                   onChange={handleChange}
-                  className="w-full p-3 text-sm sm:text-base border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
+                  className="w-full p-3 md:h-10 xl:py-6  text-sm sm:text-base border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
                   required
                 />
                 {errors.first_name && <p className="text-red-500 text-xs sm:text-sm">{errors.first_name}</p>}
               </div>
               <div className="flex-1">
-                <label className="block text-[#2A4759] text-sm sm:text-base font-medium mb-1">
+                <label className="block text-[#2A4759] text-sm sm:text-base font-medium mb-1  xl:text-[20px]">
                   Last Name
                 </label>
                 <input
@@ -145,14 +145,14 @@ export default function SignupPage() {
                   placeholder="eg, Mathew"
                   value={formData.last_name}
                   onChange={handleChange}
-                  className="w-full p-3 text-sm sm:text-base border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
+                  className="w-full p-3 text-sm xl:py-6 sm:text-base md:h-10 border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
                   required
                 />
                 {errors.last_name && <p className="text-red-500 text-xs sm:text-sm">{errors.last_name}</p>}
               </div>
             </div>
             <div>
-              <label className="block text-[#2A4759] text-sm sm:text-base font-medium mb-1">
+              <label className="block text-[#2A4759] text-sm sm:text-base font-medium mb-1  xl:text-[20px]">
                 Email
               </label>
               <input
@@ -161,13 +161,13 @@ export default function SignupPage() {
                 placeholder="eg, mark@gmail.com"
                 value={formData.email}
                 onChange={handleChange}
-                className="w-full p-3 text-sm sm:text-base border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
+                className="w-full p-3 text-sm  xl:py-6 md:h-10 sm:text-base border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
                 required
               />
               {errors.email && <p className="text-red-500 text-xs sm:text-sm">{errors.email}</p>}
             </div>
             <div>
-              <label className="block text-[#2A4759] text-sm sm:text-base font-medium mb-1">
+              <label className="block text-[#2A4759] text-sm sm:text-base font-medium mb-1 xl:text-[20px]">
                 Phone Number
               </label>
               <input
@@ -178,13 +178,13 @@ export default function SignupPage() {
                 onChange={handleChange}
                 maxLength={15}
                 inputMode="numeric"
-                className="w-full p-3 text-sm sm:text-base border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
+                className="w-full p-3 text-sm md:h-10 xl:py-6 sm:text-base border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
                 required
               />
               {errors.phone_number && <p className="text-red-500 text-xs sm:text-sm">{errors.phone_number}</p>}
             </div>
             <div className="relative">
-              <label className="block text-[#2A4759] text-sm sm:text-base font-medium mb-1">
+              <label className="block text-[#2A4759] text-sm sm:text-base font-medium mb-1 xl:text-[20px]">
                 Password
               </label>
               <input
@@ -193,20 +193,20 @@ export default function SignupPage() {
                 placeholder="eg, 0@HGY4"
                 value={formData.password}
                 onChange={handleChange}
-                className="w-full p-3 text-sm sm:text-base border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
+                className="w-full p-3  xl:py-6 text-sm  md:h-10 sm:text-base border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
                 required
               />
               <button
                 type="button"
                 onClick={() => setShow((prev) => ({ ...prev, password: !prev.password }))}
-                className="absolute right-3 bottom-3 text-[#2A4759]"
+                className="absolute right-3 -translate-y-2 top-15 md:top-12  xl:top-15 text-[#2A4759]"
               >
                 {show.password ? <FiEye /> : <FiEyeOff />}
               </button>
               {errors.password && <p className="text-red-500 text-xs sm:text-sm">{errors.password}</p>}
             </div>
             <div className="relative">
-              <label className="block text-[#2A4759] text-sm sm:text-base font-medium mb-1">
+              <label className="block text-[#2A4759] text-sm sm:text-base font-medium mb-1 xl:text-[20px]">
                 Confirm Password
               </label>
               <input
@@ -215,7 +215,7 @@ export default function SignupPage() {
                 placeholder="eg, 0@HGY4"
                 value={formData.confirmPassword}
                 onChange={handleChange}
-                className="w-full p-3 text-sm sm:text-base border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
+                className="w-full p-3 text-sm md:h-10 xl:py-6   sm:text-base border border-[#2A4759] bg-transparent rounded-md text-[#234052]"
                 required
               />
               <button
@@ -223,7 +223,7 @@ export default function SignupPage() {
                 onClick={() =>
                   setShow((prev) => ({ ...prev, confirmPassword: !prev.confirmPassword }))
                 }
-                className="absolute right-3 bottom-3 text-[#2A4759]"
+                className="absolute right-3 -translate-y-2 top-15 md:top-12 xl:top-15 text-[#2A4759] "
               >
                 {show.confirmPassword ? <FiEye /> : <FiEyeOff />}
               </button>
@@ -240,9 +240,9 @@ export default function SignupPage() {
               variant="secondary"
               buttonText={loadingSignup ? "Signing Up..." : "Sign Up"}
             />
-            <p className="text-[#2A4759] text-sm sm:text-base text-center mt-4">
+            <p className="text-[#2A4759] text-sm sm:text-base text-center mt-4 xl:text-[20px] xl:mt-2">
               Already have an account?
-              <a href="/login" className="ml-1 text-[#F7A77B] font-semibold hover:underline">
+              <a href="/login" className="ml-1 text-[#F7A77B] font-semibold hover:underline ">
                 Sign In
               </a>
             </p>
diff --git a/carbontrack/src/app/login/page.tsx b/carbontrack/src/app/login/page.tsx
index 0035640..3a92c3d 100644
--- a/carbontrack/src/app/login/page.tsx
+++ b/carbontrack/src/app/login/page.tsx
@@ -13,7 +13,6 @@ export default function LoginPage() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
-
    const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
@@ -24,25 +23,45 @@ export default function LoginPage() {
     if (!user) return;
     router.push(user.user_type === "factory" ? "/factory-dashboard" : "/ktda-dashboard");
   };
-
 }
   return (
-    <div className="flex h-screen w-screen bg-[#D9D9D9]">
-      <div className="flex flex-col items-center flex-1 bg-gray-200 text-center 2xl:p-10 2xl:pt-40">
-        <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}>
-          <Image src="/images/logo.png" alt="carbon-track logo" width={0} height={0} sizes="100vw" className="w-100 h-100 mx-auto object-contain 2xl:w-[400px] 2xl:h-[400px]" />
-        </motion.div>
-        <motion.h1 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 0.5, ease: "easeOut" }} className="text-5xl md:text-3xl lg:text-4xl font-black text-[#2A4759] 2xl:text-[60px]">
-          Carbon Track
-        </motion.h1>
-        <motion.p initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 1, ease: "easeOut" }} className="text-base md:text-lg lg:text-xl 2xl:text-[35px] 2xl:py-2 font-semibold text-[#F79B72]">
-          Welcome Back
-        </motion.p>
-      </div>
+        <div className="flex h-screen w-screen flex-col lg:flex-row bg-[#D9D9D9]">
+             <div className="flex flex-col items-center justify-center p-6 bg-gray-200 text-center lg:w-1/2">
+               <motion.div
+                 initial={{ opacity: 0, scale: 0.9 }}
+                 animate={{ opacity: 1, scale: 1 }}
+                 transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
+                 className="mb-6"
+               >
+                 <Image
+                   src="/images/logo.png"
+                   alt="carbon-track logo"
+                   width={200}
+                   height={200}
+                   className="mx-auto object-contain w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 xl:w-90"
+                 />
+               </motion.div>
+               <motion.h1
+                 initial={{ opacity: 0, y: 20 }}
+                 animate={{ opacity: 1, y: 0 }}
+                 transition={{ duration: 1, delay: 0.5, ease: "easeOut" }}
+                 className="text-2xl sm:text-3xl md:text-4xl font-black text-[#2A4759] xl:text-5xl"
+               >
+                 Carbon Track
+               </motion.h1>
+               <motion.p
+                 initial={{ opacity: 0, y: 20 }}
+                 animate={{ opacity: 1, y: 0 }}
+                 transition={{ duration: 1, delay: 1, ease: "easeOut" }}
+                 className="text-sm sm:text-base md:text-lg font-semibold text-[#F79B72] mt-2 px-4 xl:text-2xl"
+               >
+                 Welcome back
+               </motion.p>
+             </div>
       <div className="flex-1 flex items-center justify-center bg-[#234052]">
-        <div className="max-w-2xl w-1/2 bg-[#E7E7E7] rounded-2xl p-12" style={{ boxShadow: "0 2px 10px 0 #f79b72" }}>
+        <div className="max-w-2xl w-1/2 bg-[#E7E7E7] rounded-2xl p-12 xl:w-130 md:w-100" style={{ boxShadow: "0 2px 10px 0 #f79b72" }}>
           <h2 className="text-4xl font-bold mb-8 text-[#F7A77B] text-center">Sign In</h2>
-          <form onSubmit={handleSubmit} className="space-y-5">
+          <form onSubmit={handleSubmit} className="space-y-5 md:space-y-3">
             <div>
               <label className="block text-[#2A4759] text-[20px] font-medium mb-1">Email</label>
               <input
diff --git a/carbontrack/src/app/records/page.tsx b/carbontrack/src/app/records/page.tsx
index 258db53..473cf5b 100644
--- a/carbontrack/src/app/records/page.tsx
+++ b/carbontrack/src/app/records/page.tsx
@@ -8,8 +8,7 @@ import { saveRecord } from "../utils/fetchRecords";
 import Button from "../sharedComponents/Button";
 import Pagination from "../sharedComponents/Pagination";
 import Calendar from "../sharedComponents/Calendar";
-import Link from "next/link";
-import { IoSettingsOutline, IoPersonOutline } from "react-icons/io5";
+
 import type { EnergyEntryData } from "../types";
 export default function RecordsPage() {
   const [page, setPage] = useState(1);
@@ -82,13 +81,8 @@ export default function RecordsPage() {
     <FactoryLayout>
       <div className="flex min-h-screen overflow-hidden bg-black text-[#FCFCFC] relative">
         <main className="flex-1 flex flex-col min-h-screen overflow-hidden ">
-          <div className="flex justify-end w-16 2xl:ml-350 xl:ml-230 lg:ml-160 space-x-4 2xl:mt-15 xl:mt-10 lg:mt-3">
-            <Link href="/factory-profile">
-              <IoPersonOutline className="text-[#F79B72] 2xl:w-7 2xl:h-7 xl:w-7 xl:h-7 lg:w-5 lg:h-5 cursor-pointer hover:text-[#2A4759]" />
-            </Link>
-          </div>
           <div className="2xl:mb-6 xl:mb-6 lg:mb-2 px-4 md:px-8 lg:px-12 xl:px-16 2xl:px-24">
-            <h2 className="text-xl 2xl:text-5xl xl:text-5xl lg:text-2xl font-500">Records</h2>
+            <h2 className="text-xl 2xl:text-5xl xl:text-5xl lg:text-2xl font-500 2xl:pt-15 xl:pt-10">Records</h2>
             <p className="2xl:text-lg xl:text-lg lg:text-sm  text-white mt-1">
               Data on energy consumption and production.
             </p>
diff --git a/carbontrack/src/app/reset-password/page.test.tsx b/carbontrack/src/app/reset-password/page.test.tsx
index 3ab958d..78a0873 100644
--- a/carbontrack/src/app/reset-password/page.test.tsx
+++ b/carbontrack/src/app/reset-password/page.test.tsx
@@ -10,7 +10,7 @@ jest.mock("next/navigation", () => ({
   useRouter: () => ({ push: mockPush }),
 }));
 
-// Mock next/image with explicit displayName
+
 jest.mock('next/image', () => {
   const MockImage = (props: ImgHTMLAttributes<HTMLImageElement>) =>
     <img {...props} alt={props.alt || 'mocked image'} />;
@@ -18,7 +18,7 @@ jest.mock('next/image', () => {
   return { __esModule: true, default: MockImage };
 });
 
-// Mock framer-motion components with displayName
+
 jest.mock('framer-motion', () => {
   type MotionProps<T extends keyof React.JSX.IntrinsicElements> = React.PropsWithChildren<React.JSX.IntrinsicElements[T]> & {
     [key: string]: unknown;
@@ -44,7 +44,7 @@ jest.mock('framer-motion', () => {
   };
 });
 
-// Mock react-icons/fi components
+
 jest.mock("react-icons/fi", () => {
   const FiEye = () => <span data-testid="eye-icon" aria-label="Show password"></span>;
   FiEye.displayName = "MockFiEye";
@@ -86,7 +86,6 @@ describe("ResetPasswordPage", () => {
 
     expect(screen.getByAltText("carbon-track logo")).toBeInTheDocument();
     expect(screen.getByText("Carbon Track")).toBeInTheDocument();
-    expect(screen.getByText("Welcome Back")).toBeInTheDocument();
     expect(screen.getByRole("heading", { name: "New Password" })).toBeInTheDocument();
     expect(screen.getByPlaceholderText("eg,0@HGY4")).toBeInTheDocument();
   });
diff --git a/carbontrack/src/app/reset-password/page.tsx b/carbontrack/src/app/reset-password/page.tsx
index ed4c862..800ada2 100644
--- a/carbontrack/src/app/reset-password/page.tsx
+++ b/carbontrack/src/app/reset-password/page.tsx
@@ -54,23 +54,42 @@ export default function ResetPasswordPage() {
   };
 
   return (
-    <div className="flex min-h-screen w-screen">
-      <div className="flex flex-col items-center justify-center flex-1 bg-[#E7E7E7]">
-    <div className="flex flex-col items-center flex-1 bg-gray-200 text-center 2xl:p-10 2xl:pt-40">
-            <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}>
-              <Image src="/images/logo.png" alt="carbon-track logo" width={0} height={0} sizes="100vw" className="w-100 h-100 mx-auto object-contain 2xl:w-[400px] 2xl:h-[400px]" />
-            </motion.div>
-            <motion.h1 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 0.5, ease: "easeOut" }} className="text-5xl md:text-3xl lg:text-4xl font-black text-[#2A4759] 2xl:text-[60px]">
-              Carbon Track
-            </motion.h1>
-            <motion.p initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 1, ease: "easeOut" }} className="text-base md:text-lg lg:text-xl 2xl:text-[35px] 2xl:py-2 font-semibold text-[#F79B72]">
-            Welcome Back
-            </motion.p>
-          </div>
-      </div>
+<div className="flex h-screen w-screen flex-col lg:flex-row bg-[#D9D9D9]">
+             <div className="flex flex-col items-center justify-center p-6 bg-gray-200 text-center lg:w-1/2">
+               <motion.div
+                 initial={{ opacity: 0, scale: 0.9 }}
+                 animate={{ opacity: 1, scale: 1 }}
+                 transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
+                 className="mb-6"
+               >
+                 <Image
+                   src="/images/logo.png"
+                   alt="carbon-track logo"
+                   width={200}
+                   height={200}
+                   className="mx-auto object-contain w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 xl:w-90"
+                 />
+               </motion.div>
+               <motion.h1
+                 initial={{ opacity: 0, y: 20 }}
+                 animate={{ opacity: 1, y: 0 }}
+                 transition={{ duration: 1, delay: 0.5, ease: "easeOut" }}
+                 className="text-2xl sm:text-3xl md:text-4xl font-black text-[#2A4759] xl:text-5xl"
+               >
+                 Carbon Track
+               </motion.h1>
+               <motion.p
+                 initial={{ opacity: 0, y: 20 }}
+                 animate={{ opacity: 1, y: 0 }}
+                 transition={{ duration: 1, delay: 1, ease: "easeOut" }}
+                 className="text-sm sm:text-base md:text-lg font-semibold text-[#F79B72] mt-2 px-4 xl:text-2xl"
+               >
+                 Welcome back
+               </motion.p>
+             </div>
       <div className="flex-1 flex items-center justify-center bg-[#234052]">
         <div
-          className="max-w-xl w-1/2 bg-[#E7E7E7] rounded-2xl p-14 flex flex-col items-center"
+          className="max-w-xl w-1/2 bg-[#E7E7E7] rounded-2xl p-14 flex flex-col items-center md:w-100"
           style={{ boxShadow: "0 1px 10px 0 #f79b72" }}
         >
           <h2 className="text-4xl font-bold mb-8 text-[#F7A77B] text-center">
diff --git a/carbontrack/src/app/sharedComponents/Button/index.tsx b/carbontrack/src/app/sharedComponents/Button/index.tsx
index 70e3ea1..271602d 100644
--- a/carbontrack/src/app/sharedComponents/Button/index.tsx
+++ b/carbontrack/src/app/sharedComponents/Button/index.tsx
@@ -10,9 +10,9 @@ const Button = ({buttonText, variant, onclickHandler, icon, type="button"}: Butt
     const buttonVariants=()=>{
         switch(variant){
             case "primary":
-                return 'bg-[#2A4759] text-white p-2 w-70 h-15 font-bold hover:bg-[#F79B72] transition-colors duration-400 ease-in-out'
+                return 'bg-[#2A4759] text-white p-2 w-70 h-15 font-bold hover:bg-[#F79B72] transition-colors duration-400 ease-in-out '
             case "secondary":
-                return 'w-full p-3 bg-[#F79B72] text-white rounded-md font-bold text-[1.4rem] mt-2 hover:bg-[#F8B88F] transition disabled:opacity-60 drop-shadow-lg '
+                return 'w-full p-3 bg-[#F79B72] text-white rounded-md font-bold text-[1.4rem] mt-2 hover:bg-[#F8B88F] transition md:h-12 md:text-[20px] disabled:opacity-60 drop-shadow-lg xl:h-15 xl:text-[25px] '
             case "create":
                 return 'bg-[#F79B72]  p-4 2xl:w-50 xl:w-40 lg:w-30 2xl:h-17 xl:h-15 lg:h-11 text-white  font-bold 2xl:text-[20px] xl:text-[20px] lg:text-[15px] hover:bg-[#F79B72] transition-colors duration-400 ease-in-out '
             case "update":
diff --git a/carbontrack/src/app/sharedComponents/Pagination/index.tsx b/carbontrack/src/app/sharedComponents/Pagination/index.tsx
index cdaec86..3d39b10 100644
--- a/carbontrack/src/app/sharedComponents/Pagination/index.tsx
+++ b/carbontrack/src/app/sharedComponents/Pagination/index.tsx
@@ -31,7 +31,7 @@ const Pagination: React.FC<PaginationProps> = ({ page, totalPages, onPageChange,
     if (e.key === "Escape") setEdit(false);
   };
   return (
-    <div className="flex items-center justify-center 2xl:mt-7 2xl:gap-6 xl:mt-7 xl:gap-6 lg:mt-5 lg:gap-2">
+    <div className="flex items-center justify-center 2xl:mt-7 2xl:gap-6 xl:mt-3 xl:gap-6 lg:mt-5 lg:gap-2">
       <button
         className={`rounded-full p-2 ${page === 1 ? "opacity-50 cursor-not-allowed" : ""}`}
         onClick={() => page > 1 && onPageChange(page - 1)}
diff --git a/carbontrack/src/app/teaser/page.tsx b/carbontrack/src/app/teaser/page.tsx
index 64d5643..d00e8ac 100644
--- a/carbontrack/src/app/teaser/page.tsx
+++ b/carbontrack/src/app/teaser/page.tsx
@@ -14,7 +14,7 @@ function Teaser() {
   }, [router]);
 
   return (
-    <main className="2xl:pt-20 w-screen  flex flex-col justify-center items-center bg-gray-100 h-screen">
+    <main className="2xl:pt-20 w-screen  flex flex-col justify-center items-center bg-gray-100 h-screen ">
       <div>
         <Image
           src={"/images/Ellipse 11.png"}
diff --git a/carbontrack/src/app/verify-otp/page.tsx b/carbontrack/src/app/verify-otp/page.tsx
index 2cb407a..f39eda9 100644
--- a/carbontrack/src/app/verify-otp/page.tsx
+++ b/carbontrack/src/app/verify-otp/page.tsx
@@ -96,22 +96,42 @@ function VerifyCodeContent() {
   };
 
   return (
-    <div className="h-screen w-screen flex">
-      <div className="flex flex-col items-center justify-center flex-1 bg-[#E7E7E7]">
-        <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}>
-          <Image src="/images/logo.png" alt="carbon-track logo" width={0} height={0} sizes="100vw" className="w-100 h-100 mx-auto object-contain 2xl:w-[400px] 2xl:h-[400px]" />
-        </motion.div>
-
-        <motion.h1 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 0.5, ease: "easeOut" }} className="text-5xl md:text-3xl lg:text-4xl font-black text-[#2A4759] 2xl:text-[60px]">
-          Carbon Track
-        </motion.h1>
-        <motion.p initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 1, delay: 1, ease: "easeOut" }} className="text-base md:text-lg lg:text-xl 2xl:text-[35px] 2xl:py-2 font-semibold text-[#F79B72]">
-          Welcome Back
-        </motion.p>
-      </div>
+           <div className="flex h-screen w-screen flex-col lg:flex-row bg-[#D9D9D9]">
+                <div className="flex flex-col items-center justify-center p-6 bg-gray-200 text-center lg:w-1/2">
+                  <motion.div
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
+                    className="mb-6"
+                  >
+                    <Image
+                      src="/images/logo.png"
+                      alt="carbon-track logo"
+                      width={200}
+                      height={200}
+                      className="mx-auto object-contain w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 xl:w-90"
+                    />
+                  </motion.div>
+                  <motion.h1
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 1, delay: 0.5, ease: "easeOut" }}
+                    className="text-2xl sm:text-3xl md:text-4xl font-black text-[#2A4759] xl:text-5xl"
+                  >
+                    Carbon Track
+                  </motion.h1>
+                  <motion.p
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 1, delay: 1, ease: "easeOut" }}
+                    className="text-sm sm:text-base md:text-lg font-semibold text-[#F79B72] mt-2 px-4 xl:text-2xl"
+                  >
+                    Welcome back
+                  </motion.p>
+                </div>
       <div className="flex-1 flex items-center justify-center bg-[#234052]">
         <div
-          className="max-w-2xl w-1/2 bg-[#E7E7E7] rounded-2xl p-12"
+          className="max-w-2xl w-1/2 bg-[#E7E7E7] rounded-2xl p-12 lg:w-110"
           style={{ boxShadow: "0 2px 10px 0 #F79B72" }}
         >
           <h2 className="text-4xl font-bold mb-4 text-[#F7A77B] text-center">

From cf64f6288315d6317b6fa701f36ac78fc3210bee Mon Sep 17 00:00:00 2001
From: BerissaMuyizere <muyizereberissa@gmail.com>
Date: Sat, 27 Sep 2025 09:21:27 +0300
Subject: [PATCH 2/2] responsive

---
 carbontrack/src/app/components/EditProfile/index.tsx   | 4 ++--
 carbontrack/src/app/components/SharedProfile/index.tsx | 7 ++++---
 carbontrack/src/app/login/page.tsx                     | 3 +--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/carbontrack/src/app/components/EditProfile/index.tsx b/carbontrack/src/app/components/EditProfile/index.tsx
index cf1f458..fa55565 100644
--- a/carbontrack/src/app/components/EditProfile/index.tsx
+++ b/carbontrack/src/app/components/EditProfile/index.tsx
@@ -139,10 +139,10 @@ export default function EditProfilePage() {
       setIsSubmitting(false);
     }
   };
-
+  if (loading) return <div className="mt-32 text-center text-white">Loading...</div>;
   if (error) return <div className="mt-32 text-center text-red-500">{error}</div>;
   if (!profile) return null;
-  if (loading) return <div className="mt-32 text-center text-white">Loading...</div>;
+ 
 
   return (
       <main className="min-h-screen bg-gradient-to-br from-gray-900 to-black text-white p-20">
diff --git a/carbontrack/src/app/components/SharedProfile/index.tsx b/carbontrack/src/app/components/SharedProfile/index.tsx
index b76cc04..f2bfde3 100644
--- a/carbontrack/src/app/components/SharedProfile/index.tsx
+++ b/carbontrack/src/app/components/SharedProfile/index.tsx
@@ -9,10 +9,11 @@ import Image from "next/image";
 export default function ProfileDisplay() {
   const router = useRouter();
   const { user: profile, error, loading } = useFetchUsers();
-
-  if (error) return <div className="mt-32 text-center text-red-500">{error}</div>;
-if (!profile) return null;
+  
 if (loading) return <div className="mt-32 text-center text-white">Loading...</div>;
+if (error) return <div className="mt-32 text-center text-red-500">{error}</div>;
+if (!profile) return null;
+
 
 const getProfileRoute = () => {
   return profile.user_type === "factory" ? "/edit-factory-profile" : "/ktda-edit-profile";
diff --git a/carbontrack/src/app/login/page.tsx b/carbontrack/src/app/login/page.tsx
index 3a92c3d..80346c5 100644
--- a/carbontrack/src/app/login/page.tsx
+++ b/carbontrack/src/app/login/page.tsx
@@ -31,8 +31,7 @@ export default function LoginPage() {
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
-                 className="mb-6"
-               >
+                 className="mb-6">
                  <Image
                    src="/images/logo.png"
                    alt="carbon-track logo"