diff --git a/src/components/DashboardGrid.tsx b/src/components/DashboardGrid.tsx
index b6193ba..4952355 100644
--- a/src/components/DashboardGrid.tsx
+++ b/src/components/DashboardGrid.tsx
@@ -333,7 +333,7 @@ export default function DashboardGrid() {
     const CardHeader = ({ title, value, valueChange, icon, tooltipText }: { title: string, value: string, valueChange?: string, icon: string, tooltipText?: string }) => {
 
         return (
-            <div className="flex items-center gap-2 border-r-2 border-gray-200 pr-4 last:border-r-0 w-[32%]"
+            <div className="flex items-center gap-2 border-r-2 border-gray-200 pr-4 last:border-r-0 w-full lg:w-[32%] py-2 lg:py-0"
                 onMouseEnter={() => {
                     if (tooltipText) {
                         setIsHovered(true)
@@ -344,12 +344,12 @@ export default function DashboardGrid() {
                         setIsHovered(false)
                     }
                 }}>
-                <img src={icon} alt="Active Keywords" className="w-14 h-14" />
+                <img src={icon} alt="Active Keywords" className="w-12 h-12 sm:w-14 sm:h-14" />
 
-                <div className="flex flex-col px-4">
+                <div className="flex flex-col px-2 sm:px-4">
 
                     <div className="flex items-center gap-2">
-                        <span className="text-2xl text-gray-500 font-bold">{value}</span>
+                        <span className="text-xl sm:text-2xl text-gray-500 font-bold">{value}</span>
 
                         {tooltipText && <div className="relative">
                             {/* <Info size={16} className="text-gray-800 cursor-pointer" /> */}
@@ -364,9 +364,9 @@ export default function DashboardGrid() {
                             )}
                         </div>}
                     </div>
-                    <div className="text-lg text-gray-500 ">{title}</div>
-                    <div className="text-lg text-gray-500 flex items-center gap-2">
-                        <span className="text-lg text-gray-500 font-bold">{valueChange}</span>
+                    <div className="text-sm sm:text-base lg:text-lg text-gray-500 ">{title}</div>
+                    <div className="text-sm sm:text-base lg:text-lg text-gray-500 flex items-center gap-2">
+                        <span className="text-sm sm:text-base lg:text-lg text-gray-500 font-bold">{valueChange}</span>
                     </div>
 
                 </div>
@@ -382,8 +382,8 @@ export default function DashboardGrid() {
             <HeaderPage title="Dashboard" />
 
             {/* Main content area with new metric cards */}
-            <main className="pb-4  px-2 border-collapse border-2 mb-6 rounded-lg">
-                <div className="flex flex-wrap gap-4 lg:flex-row flex-col justify-between items-center py-4 px-4">
+            <main className="pb-4 px-2 sm:px-4 border-collapse border-2 mb-6 rounded-lg">
+                <div className="flex flex-col lg:flex-row flex-wrap gap-4 justify-between items-stretch py-4 px-2 sm:px-4">
                     <CardHeader title="Active Keywords" value="5" icon={ActiveKeywords} />
                     <CardHeader title="Total Backlinks" value="112/1012" icon={TotalBacklinks} />
                     <CardHeader title="Portfolio Performance" value="34%" icon={PortfolioPerformance} tooltipText="Portfolio Performance is the percentage of keywords that are performing well." />
diff --git a/src/components/Strategy/ProgressMetrics.tsx b/src/components/Strategy/ProgressMetrics.tsx
index 7e62302..5f36f5e 100644
--- a/src/components/Strategy/ProgressMetrics.tsx
+++ b/src/components/Strategy/ProgressMetrics.tsx
@@ -16,7 +16,7 @@ function ProgressMetrics() {
     return (
         <div className="bg-white rounded-lg border border-gray-200 p-3 mb-6">
 
-            <div className="flex items-center justify-between pb-3 px-2">
+            <div className="flex items-center md:flex-row flex-col justify-between pb-3 px-2">
                 <h3 className="text-lg font-bold text-gray-600">CPA Los Angeles</h3>
                 {/* Example 2: With Completed Status */}
                 <div>
@@ -31,9 +31,9 @@ function ProgressMetrics() {
 
             </div>
 
-            <div className="flex items-center justify-between border-2 border-solid border-gray-100 rounded-lg p-4 gap-8">
+            <div className="flex flex-col md:flex-row items-center justify-between border-2 border-solid border-gray-100 rounded-lg p-4 gap-8">
                 {/* Left section with progress indicators */}
-                <div className="flex items-center w-1/3 border-r-2 border-solid border-gray-300 pr-10">
+                <div className="flex items-center md:w-1/3 w-full md:border-r-2 border-0 border-solid border-gray-300 md:pr-10 pr-0">
                     {/* 60% Progress */}
                     <div className="w-[100%]">
                         <div className="flex items-center justify-between">
@@ -52,7 +52,7 @@ function ProgressMetrics() {
 
                 </div>
 
-                <div className="flex items-center w-1/3 border-r-2 border-solid border-gray-300 2xl:gap-32 gap-3">
+                <div className="flex items-center md:w-1/3 w-full md:border-r-2 border-0 border-solid border-gray-300 2xl:gap-32 gap-3">
                     {/* 75% Keyword Visibility */}
                     <div className="w-[30%]">
                         <div className="text-4xl font-bold text-gray-900 mb-1">75%</div>
@@ -80,7 +80,7 @@ function ProgressMetrics() {
                 </div>
 
                 {/* Right section with Chat GPT and metrics */}
-                <div className="flex items-center w-1/3">
+                <div className="flex items-center md:w-1/3 w-full">
 
                     {/* Performance metrics with chart */}
                     <div className="flex items-center gap-4">
diff --git a/src/components/shared/ContainerPage.tsx b/src/components/shared/ContainerPage.tsx
index cf72b64..ae234aa 100644
--- a/src/components/shared/ContainerPage.tsx
+++ b/src/components/shared/ContainerPage.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 const ContainerPage = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className='min-h-screen container pt-6 pb-20'>
+    <div className='min-h-screen container pt-0 pb-20 md:pt-6 md:px-0 px-2'>
       {children}
     </div>
   )
diff --git a/src/components/shared/HeaderPage.tsx b/src/components/shared/HeaderPage.tsx
index e5080de..3fcc9ab 100644
--- a/src/components/shared/HeaderPage.tsx
+++ b/src/components/shared/HeaderPage.tsx
@@ -3,8 +3,8 @@ import UrlDropdown from "./UrlDropdown"
 
 const HeaderPage = ({ title }: { title: string }) => {
     return (
-        <div className="flex space-x-4 my-4 lg:flex-row flex-col items-baseline">
-            <h1 className="text-3xl font-bold text-gray-800">{title}</h1>
+        <div className="flex space-x-4 my-0 md:my-4 lg:flex-row flex-col items-baseline">
+            <h1 className="text-3xl font-bold text-gray-800 mb:mb-0 mb-4">{title}</h1>
 
             <UrlDropdown />
 
diff --git a/src/components/shared/Stepper.tsx b/src/components/shared/Stepper.tsx
index 62cec36..6b2ee00 100644
--- a/src/components/shared/Stepper.tsx
+++ b/src/components/shared/Stepper.tsx
@@ -13,7 +13,7 @@ interface StepperProps {
 
 export function Stepper({ steps }: StepperProps) {
   return (
-    <div className="inline-flex items-center gap-3 rounded-full px-4 py-2">
+    <div className="flex md:flex-row flex-col items-center gap-3 rounded-full px-4 py-2">
       {steps.map((step, index) => (
         <div key={step.number} className="flex items-center gap-3 ">
           {/* Step Badge and Label */}
diff --git a/src/components/shared/UrlDropdown.tsx b/src/components/shared/UrlDropdown.tsx
index 9fa5ed2..9b77556 100644
--- a/src/components/shared/UrlDropdown.tsx
+++ b/src/components/shared/UrlDropdown.tsx
@@ -21,7 +21,7 @@ export default function UrlDropdown() {
     };
 
     return (
-        <div className="relative text-sm max-w-[400px] min-w-[220px]">
+        <div className="relative text-sm max-w-[400px] min-w-[220px] mb:mb-0 mb-4">
             {/* Input box */}
             <div
                 className="flex justify-between items-center border border-gray-300 bg-white px-2 py-1 rounded-xl cursor-pointer focus:border-2 focus:border-blue-500"
diff --git a/src/pages/Portfolio.tsx b/src/pages/Portfolio.tsx
index f012558..2a2d58e 100644
--- a/src/pages/Portfolio.tsx
+++ b/src/pages/Portfolio.tsx
@@ -78,27 +78,26 @@ function Portfolio() {
     return (
         <ContainerPage>
             <HeaderPage title="Live Library" />
-            <div className='flex gap-8 mx-auto'>
+            <div className='flex flex-col lg:flex-row gap-6 lg:gap-8 mx-auto'>
 
                 <RoadmapSidebar mode={"portfolio"} selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
 
                 {/* Table Section */}
-                <section className='flex-1 bg-white border rounded-2xl shadow-sm px-6 py-4'>
+                <section className='flex-1 bg-white border rounded-2xl shadow-sm px-4 sm:px-6 py-4 overflow-x-auto'>
                     {/* Title Bar */}
-                    <div className='flex items-center justify-between mb-2'>
+                    <div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-4'>
                         <div className='flex flex-col items-start gap-2'>
-                            <span className='text-2xl font-extrabold text-[#4285F4]'>CPA Los Angeles</span>
-                            <span className='text-gray-500 rounded-md text-md font-medium'><span className='font-bold pr-3 text-black'>Links:</span>
-
-                                Indexed  <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 mr-5'>32%</b>
-
-                                Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1'>4%</b></span>
-
-                            <span className='flex items-center gap-2 text-gray-800 text-md'>Content Publishing:
-                                <span className='bg-[#f9eaef] text-[#8B0E3A] px-2 py-0 rounded-md font-bold border'>Locked</span>
+                            <span className='text-xl sm:text-2xl font-extrabold text-[#4285F4]'>CPA Los Angeles</span>
+                            <span className='text-gray-500 rounded-md text-sm sm:text-md font-medium'>
+                                <span className='font-bold pr-2 sm:pr-3 text-black'>Links:</span>
+                                Indexed  <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 mr-3 sm:mr-5 text-xs sm:text-sm'>32%</b>
+                                Interlinked <b className='font-bold bg-[#e2eff7] text-[#004A74] px-2 py-1 rounded-md mx-1 text-xs sm:text-sm'>4%</b>
+                            </span>
+                            <span className='flex items-center gap-2 text-gray-800 text-sm sm:text-md'>Content Publishing:
+                                <span className='bg-[#f9eaef] text-[#8B0E3A] px-2 py-0 rounded-md font-bold border text-xs sm:text-sm'>Locked</span>
                             </span>
                         </div>
-                        <div className='flex items-center gap-3'>
+                        <div className='flex flex-wrap items-center gap-2 sm:gap-3'>
                             <BacklinkTypeDropdown options={
                                 {
                                     Social: true, Citation: true, 'Web 2.0': true, Multimedia: false, Crowd: false
@@ -110,17 +109,16 @@ function Portfolio() {
 
                             <BacklinkTypeDropdown options={{ DA: true, DR: true, Traffic: true }} title="Traffic" subTitle="Show rings:" />
 
-                            <button className='bg-[#fff] text-gray-500 border px-4 py-1 rounded-lg text-md font-bold  transition-colors flex items-center gap-2'>
-                                <img src={Share2} alt="" />
+                            <button className='bg-[#fff] text-gray-500 border px-3 sm:px-4 py-1 rounded-lg text-sm sm:text-md font-bold transition-colors flex items-center gap-2'>
+                                <img src={Share2} alt="" className='w-4 h-4' />
                                 <span>Export</span>
-                                {/* <MetricCard label="Export" tooltipText="tooltipText" /> */}
                             </button>
                         </div>
                     </div>
 
                     {/* Global Filter/Sort Header Row */}
-                    <div className='flex items-center justify-end gap-4 mb-2 px-4 py-3 '>
-                        <div className='flex items-center gap-8 text-sm font-medium text-gray-600'>
+                    <div className='hidden lg:flex items-center justify-end gap-4 mb-2 px-4 py-3 '>
+                        <div className='flex items-center gap-4 xl:gap-8 text-xs xl:text-sm font-medium text-gray-600'>
                             <span className='flex items-center cursor-pointer hover:text-[#4285F4] transition-colors '>
                                 DR <SortIcon />
                             </span>
@@ -154,32 +152,31 @@ function Portfolio() {
                                     <span className='text-md font-bold bg-white p-1 px-2  rounded-full'>{cat.rows.length}</span>
                                 </div>
                             </div>
-                            <div className='bg-white rounded-xl border overflow-hidden shadow-sm'>
-                                <table className='w-full'>
+                            <div className='bg-white rounded-xl border overflow-x-auto shadow-sm'>
+                                <table className='w-full min-w-[800px]'>
                                     <tbody>
                                         {cat.rows.map((row, rIdx) => (
                                             <tr key={rIdx} className='border-b last:border-0 hover:bg-[#f1f7fe] transition-colors'>
-                                                <td className='w-12 px-4 py-3'>
+                                                <td className='w-12 px-2 sm:px-4 py-3'>
                                                     <div className='flex items-center gap-2'>
-                                                        <img src={row.icon} alt="" className='w-10 h-10 rounded-full' />
+                                                        <img src={row.icon} alt="" className='w-8 h-8 sm:w-10 sm:h-10 rounded-full' />
                                                         <span className='text-xs font-bold w-[40px]'> </span>
                                                     </div>
                                                 </td>
 
                                                 <td className='w-full text-[#4285F4] hover:text-[#1e40af] font-medium' title={row.title}>
-                                                    <div className='truncate max-w-[400px] whitespace-pre-wrap underline py-1 cursor-pointer'>{row.title}</div>
+                                                    <div className='truncate max-w-[250px] sm:max-w-[400px] whitespace-pre-wrap underline py-1 cursor-pointer text-sm'>{row.title}</div>
                                                 </td>
-                                                <td className='py-3 px-4 text-center w-20 font-semibold text-gray-700'>{row.DR}</td>
-                                                <td className='py-3 px-4 text-center w-20 font-semibold text-gray-700'>{row.DA}</td>
-                                                <td className='py-3 px-4 text-center w-24 font-semibold text-gray-700'>{row.traffic}</td>
-                                                <td className='py-3 px-4 text-center '>
+                                                <td className='py-3 px-2 sm:px-4 text-center w-16 sm:w-20 font-semibold text-gray-700 text-sm'>{row.DR}</td>
+                                                <td className='py-3 px-2 sm:px-4 text-center w-16 sm:w-20 font-semibold text-gray-700 text-sm'>{row.DA}</td>
+                                                <td className='py-3 px-2 sm:px-4 text-center w-20 sm:w-24 font-semibold text-gray-700 text-sm'>{row.traffic}</td>
+                                                <td className='py-3 px-2 sm:px-4 text-center'>
                                                     <div className={`rounded-full text-xs ${pillClass(row.indexed.toString())}`}>{row.indexed}</div>
-                                                    {/* whitespace-nowrap */}
                                                 </td>
-                                                <td className='py-3 px-2 text-center w-28'>
+                                                <td className='py-3 px-2 text-center w-24 sm:w-28'>
                                                     <span className={`rounded-full text-xs ${pillClass(row.interlinked.toString())}`}>{row.interlinked}</span>
                                                 </td>
-                                                <td className='py-3 px-4 text-center w-24 font-medium text-gray-700'>{row.date}</td>
+                                                <td className='py-3 px-2 sm:px-4 text-center w-20 sm:w-24 font-medium text-gray-700 text-sm'>{row.date}</td>
                                             </tr>
                                         ))}
                                     </tbody>
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 1b5ac68..783d43e 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 const Settings = () => {
   const [activeSection, setActiveSection] = useState("profile");
@@ -78,11 +78,11 @@ const Settings = () => {
   };
 
   return (
-      <div className="max-w-7xl mx-auto px-6 py-8">
-        <div className="flex gap-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8">
+        <div className="flex flex-col lg:flex-row gap-8">
           {/* Sidebar */}
-          <div className="w-64 flex-shrink-0">
-            <h1 className="text-3xl font-bold text-gray-900 mb-8">Settings</h1>
+          <div className="w-full lg:w-64 flex-shrink-0">
+            <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-6 lg:mb-8">Settings</h1>
             
             <nav className="space-y-2">
               {sidebarItems.map((item) => (
@@ -131,83 +131,146 @@ const Settings = () => {
 
           {/* Main Content */}
           <div className="flex-1">
-            <div className="bg-white">
-              <h2 className="text-3xl font-bold text-gray-900 mb-2">Basic Information</h2>
-              <p className="text-gray-600 mb-8">
-                View and update your personal details and account information.
-              </p>
+            {activeSection === "profile" && (
+              <div className="bg-white">
+                <h2 className="text-3xl font-bold text-gray-900 mb-2">Basic Information</h2>
+                <p className="text-gray-600 mb-8">
+                  View and update your personal details and account information.
+                </p>
 
-              <form className="space-y-6">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Name
-                  </label>
-                  <input
-                    type="text"
-                    defaultValue="Eugiene Jonathan"
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                </div>
+                <form className="space-y-6">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Name
+                    </label>
+                    <input
+                      type="text"
+                      defaultValue="Eugiene Jonathan"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    />
+                  </div>
 
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Email
-                  </label>
-                  <input
-                    type="email"
-                    defaultValue="Eugiene Jonathan"
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Email
+                    </label>
+                    <input
+                      type="email"
+                      defaultValue="Eugiene Jonathan"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    />
+                  </div>
 
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Password
-                  </label>
-                  <input
-                    type="password"
-                    defaultValue="Eugiene Jonathan"
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Password
+                    </label>
+                    <input
+                      type="password"
+                      defaultValue="Eugiene Jonathan"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    />
+                  </div>
 
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    Member Since
-                  </label>
-                  <input
-                    type="text"
-                    defaultValue="12 Aug 2025"
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      Member Since
+                    </label>
+                    <input
+                      type="text"
+                      defaultValue="12 Aug 2025"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    />
+                  </div>
 
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    <div className="flex items-center space-x-2">
-                      <span>Total Keywords Campaigns</span>
-                      <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
-                        <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
-                      </svg>
-                    </div>
-                  </label>
-                  <input
-                    type="text"
-                    defaultValue="234,029"
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                </div>
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      <div className="flex items-center space-x-2">
+                        <span>Total Keywords Campaigns</span>
+                        <svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
+                          <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+                        </svg>
+                      </div>
+                    </label>
+                    <input
+                      type="text"
+                      defaultValue="234,029"
+                      className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                    />
+                  </div>
 
-                <div className="flex justify-end">
-                  <button
-                    type="submit"
-                    className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
-                  >
-                    Save
+                  <div className="flex justify-end">
+                    <button
+                      type="submit"
+                      className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
+                    >
+                      Save
+                    </button>
+                  </div>
+                </form>
+              </div>
+            )}
+
+            {activeSection === "campaigns" && (
+              <div className="bg-white">
+                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
+                  <div>
+                    <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Campaigns</h2>
+                    <p className="text-sm sm:text-base text-gray-600">
+                      Manage your keyword campaigns and track performance.
+                    </p>
+                  </div>
+                  <button className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors whitespace-nowrap self-start sm:self-auto">
+                    Create Campaign
                   </button>
                 </div>
-              </form>
-            </div>
+
+                <div className="space-y-4">
+                  {[
+                    { name: "Summer Sale 2025", keywords: 127, status: "Active", performance: "+12.5%" },
+                    { name: "Product Launch Q3", keywords: 89, status: "Active", performance: "+8.3%" },
+                    { name: "Brand Awareness", keywords: 234, status: "Paused", performance: "+5.2%" },
+                    { name: "Holiday Campaign", keywords: 156, status: "Active", performance: "+15.7%" },
+                  ].map((campaign, index) => (
+                    <div key={index} className="border border-gray-200 rounded-lg p-4 sm:p-6 hover:border-blue-300 transition-colors">
+                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+                        <div className="flex-1">
+                          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mb-2">
+                            <h3 className="text-base sm:text-lg font-semibold text-gray-900">{campaign.name}</h3>
+                            <span className={`px-3 py-1 rounded-full text-xs font-medium self-start ${
+                              campaign.status === "Active" 
+                                ? "bg-green-100 text-green-700" 
+                                : "bg-yellow-100 text-yellow-700"
+                            }`}>
+                              {campaign.status}
+                            </span>
+                          </div>
+                          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-6 text-sm text-gray-600">
+                            <span>{campaign.keywords} keywords</span>
+                            <span className="flex items-center space-x-1">
+                              <span>Performance:</span>
+                              <span className="text-green-600 font-medium">{campaign.performance}</span>
+                            </span>
+                          </div>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <button className="p-2 text-gray-400 hover:text-blue-600 transition-colors">
+                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                              <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
+                            </svg>
+                          </button>
+                          <button className="p-2 text-gray-400 hover:text-red-600 transition-colors">
+                            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                              <path fillRule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clipRule="evenodd" />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </div>
diff --git a/src/pages/Strategy.tsx b/src/pages/Strategy.tsx
index f12dc56..efebe21 100644
--- a/src/pages/Strategy.tsx
+++ b/src/pages/Strategy.tsx
@@ -20,16 +20,14 @@ function Strategy() {
     return (
         <ContainerPage>
             <HeaderPage title="Strategy" />
-            <div className="flex lg:flex-row flex-col items-center lg:items-start bg-white h-[100%]">
-
-                {/* <RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} /> */}
+            <div className="flex lg:flex-row flex-col items-center lg:items-start bg-white h-[100%] gap-6 lg:gap-8">
 
                 <RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />
 
-                <div className="flex-1 px-4">
+                <div className="flex-1 px-2 sm:px-4 w-full lg:w-auto">
                     <ProgressMetrics />
 
-                    <div className="bg-white rounded-lg border border-gray-200 p-3 pb-10">
+                    <div className="bg-white rounded-lg border border-gray-200 p-2 sm:p-3 pb-6 sm:pb-10">
 
                         {selectedKeyword === "CPA Los Angeles" ? <IntegratedStrategy /> : <ShowDetails />
                         }
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 58a0964..77eaf91 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -285,7 +285,7 @@ export default function Login() {
                         )}
 
                         <form onSubmit={handleSubmitForgotPassword} className="space-y-4 mt-4">
-                        {/* <form onSubmit={swapAuth ? handleSubmitSignUp : forgotPassword ? handleSubmitForgotPassword : handleSubmit} className="space-y-4 mt-4"> */}
+                            {/* <form onSubmit={swapAuth ? handleSubmitSignUp : forgotPassword ? handleSubmitForgotPassword : handleSubmit} className="space-y-4 mt-4"> */}
                             <div className="relative">
                                 <label htmlFor="email" className="block text-sm font-medium mb-1">Email Address</label>
                                 <div className="relative">
@@ -299,7 +299,7 @@ export default function Login() {
                                         name="email"
                                         type="email"
                                         required
-                                        className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 text-white"
+                                        className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500  "
                                         placeholder="your.email@example.com"
                                         value={email}
                                         onChange={(e) => setEmail(e.target.value)}
@@ -429,7 +429,7 @@ export default function Login() {
                                     name="email"
                                     type="email"
                                     required
-                                    className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 text-white"
+                                    className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 dark:text-white"
                                     placeholder="your.email@example.com"
                                     value={email}
                                     onChange={(e) => setEmail(e.target.value)}
@@ -450,7 +450,7 @@ export default function Login() {
                                     name="password"
                                     type="password"
                                     required
-                                    className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 text-white"
+                                    className="w-full pl-10 pr-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm transition-all duration-300 hover:border-blue-300 dark:hover:border-blue-500 dark:text-white"
                                     placeholder="••••••••"
                                     value={password}
                                     onChange={(e) => setPassword(e.target.value)}