diff --git a/frontend/app/account/[address]/AmountChart.tsx b/frontend/app/account/[address]/AmountChart.tsx
index e05e4f98..ab7f8324 100644
--- a/frontend/app/account/[address]/AmountChart.tsx
+++ b/frontend/app/account/[address]/AmountChart.tsx
@@ -1,5 +1,5 @@
 'use client'
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useRef } from 'react'
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -13,6 +13,7 @@ import {
   ChartData,
   TooltipItem,
 } from 'chart.js'
+import type { Chart } from 'chart.js'
 import { Line } from 'react-chartjs-2'
 import 'chartjs-adapter-moment'
 import moment from 'moment'
@@ -59,9 +60,23 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
   const [selectedYear, setSelectedYear] = useState<string>(
     moment().format('YYYY'),
   )
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+  const chartRef = useRef<Chart<'line'> | null>(null)
+  const [isChartReady, setIsChartReady] = useState(false)
 
   useEffect(() => {
     setMounted(true)
+
+    // Add a small delay to ensure container is properly sized
+    const timer = setTimeout(() => {
+      setIsChartReady(true)
+      if (chartRef.current) {
+        chartRef.current.resize()
+      }
+    }, 150)
+
+    return () => clearTimeout(timer)
   }, [])
 
   // Available years (last 7 years)
@@ -74,9 +89,9 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
     return {
       gridColor: actualTheme === 'dark' ? '#292929' : '#e2e8f0',
       tickColor: actualTheme === 'dark' ? '#FFFFFF' : '#374151',
-      tooltipBg: actualTheme === 'dark' ? '#272729' : '#f8fafc',
+      tooltipBg: actualTheme === 'dark' ? '#24252A' : '#f8fafc',
       tooltipText: actualTheme === 'dark' ? '#FFFFFF' : '#374151',
-      selectorBg: actualTheme === 'dark' ? '#272729' : '#f1f5f9',
+      selectorBg: actualTheme === 'dark' ? '#24252A' : '#f1f5f9',
       selectorText: actualTheme === 'dark' ? '#8E9BAE' : '#64748b',
       selectBg: actualTheme === 'dark' ? '#2D2F34' : '#f8fafc',
       selectText: actualTheme === 'dark' ? '#9CA3AF' : '#6b7280',
@@ -106,13 +121,15 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
               ? moment().startOf('day')
               : moment().startOf('day').year(selectedYearInt)
 
-          // Generate 24 hourly data points
-          for (let i = 0; i < 24; i++) {
-            const date = moment(dayStart).add(i, 'hours').toDate()
+          // Generate data points every 30 minutes (48 points total)
+          for (let i = 0; i < 48; i++) {
+            const date = moment(dayStart)
+              .add(i * 30, 'minutes')
+              .toDate()
 
             // Small random changes for hourly data - only after mount
             if (mounted) {
-              baseValue += (Math.random() - 0.5) * 20
+              baseValue += (Math.random() - 0.5) * 15
             }
 
             data.push({
@@ -134,19 +151,21 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
                   .startOf('day')
                   .year(selectedYearInt)
 
-          // Generate 7 daily data points
-          for (let i = 0; i < 7; i++) {
-            const date = moment(weekStart).add(i, 'days').toDate()
+          // Generate data points every 4 hours (42 points total)
+          for (let i = 0; i < 42; i++) {
+            const date = moment(weekStart)
+              .add(i * 4, 'hours')
+              .toDate()
 
             // Slightly larger changes for daily data - only after mount
             if (mounted) {
-              baseValue += (Math.random() - 0.5) * 50
+              baseValue += (Math.random() - 0.5) * 30
             }
 
             data.push({
               date,
               year: moment(date).format('YYYY'),
-              displayDate: moment(date).format('MMM DD'),
+              displayDate: moment(date).format('MMM DD HH:mm'),
               value: Math.max(50, Math.round(baseValue)),
             })
           }
@@ -156,14 +175,14 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
           // For 1M, create data for the last 30 days but in the selected year
           const monthStart =
             selectedYearInt === currentYear
-              ? moment().subtract(15, 'days').startOf('day')
+              ? moment().subtract(29, 'days').startOf('day')
               : moment()
-                  .subtract(15, 'days')
+                  .subtract(29, 'days')
                   .startOf('day')
                   .year(selectedYearInt)
 
           // Generate 30 daily data points
-          for (let i = 0; i < 15; i++) {
+          for (let i = 0; i < 30; i++) {
             const date = moment(monthStart).add(i, 'days').toDate()
 
             // More noticeable changes for monthly view - only after mount
@@ -181,18 +200,20 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
           break
 
         case '3M':
-          // For 3M, create data for the last 12 weeks but in the selected year
+          // For 3M, create data for the last 90 days but in the selected year
           const quarterStart =
             selectedYearInt === currentYear
-              ? moment().subtract(11, 'weeks').startOf('week')
+              ? moment().subtract(89, 'days').startOf('day')
               : moment()
-                  .subtract(11, 'weeks')
-                  .startOf('week')
+                  .subtract(89, 'days')
+                  .startOf('day')
                   .year(selectedYearInt)
 
-          // Generate 12 weekly data points
-          for (let i = 0; i < 12; i++) {
-            const date = moment(quarterStart).add(i, 'weeks').toDate()
+          // Generate data points every 3 days (30 points total)
+          for (let i = 0; i < 30; i++) {
+            const date = moment(quarterStart)
+              .add(i * 3, 'days')
+              .toDate()
 
             // Larger changes for 3-month view - only after mount
             if (mounted) {
@@ -308,6 +329,11 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
       return {
         responsive: true,
         maintainAspectRatio: false,
+        backgroundColor: 'transparent',
+        resizeDelay: 0,
+        layout: {
+          padding: 0,
+        },
         scales: {
           x: {
             type: 'time',
@@ -323,14 +349,18 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
               },
             },
             grid: {
-              display: true,
-              color: colors.gridColor,
-              lineWidth: 1,
-              drawOnChartArea: true,
-              drawTicks: true,
+              display: false, // Hide vertical grid lines for cleaner look
             },
             ticks: {
               color: colors.tickColor,
+              maxTicksLimit: 6, // Limit number of x-axis labels
+              font: {
+                size: 11,
+              },
+              padding: 8, // Add spacing between labels and chart
+            },
+            border: {
+              display: false,
             },
           },
           y: {
@@ -338,47 +368,72 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
             grid: {
               display: true,
               color: colors.gridColor,
-              lineWidth: 1,
+              lineWidth: 0.5, // Thinner grid lines
               drawOnChartArea: true,
-              drawTicks: true,
+              drawTicks: false,
             },
             ticks: {
               color: colors.tickColor,
+              maxTicksLimit: 5, // Limit number of y-axis labels
+              font: {
+                size: 11,
+              },
+              padding: 12, // Add spacing between price labels and chart
+              callback: function (value: string | number) {
+                // Simplify y-axis labels
+                if (typeof value === 'number') {
+                  if (value >= 1000) {
+                    return (value / 1000).toFixed(1) + 'K'
+                  }
+                  return value.toFixed(0)
+                }
+                return value
+              },
+            },
+            border: {
+              display: false,
             },
           },
         },
         plugins: {
           legend: {
-            display: false, // Hide legend since we only have one dataset
+            display: false,
           },
           tooltip: {
+            enabled: true,
             mode: 'index',
-            intersect: false, // Allow tooltip when near point
+            intersect: false,
             backgroundColor: colors.tooltipBg,
-            cornerRadius: 10,
+            cornerRadius: 8,
             titleColor: colors.tooltipText,
             bodyColor: colors.tooltipText,
-            borderColor: '#6F2FCE',
-            borderWidth: 0,
-            padding: 12,
-            displayColors: true,
-            boxWidth: 8,
-            boxHeight: 8,
-            usePointStyle: true, // This makes the legend markers circular
-            // @ts-expect-error Chart.js types don't properly define pointStyle as allowing 'circle'
-            pointStyle: 'circle',
-            boxPadding: 3,
+            borderColor: 'rgba(111, 47, 206, 0.2)',
+            borderWidth: 1,
+            padding: 8,
+            displayColors: false, // Remove color box for cleaner tooltip
+            titleFont: {
+              size: 11,
+              weight: 500,
+            },
+            bodyFont: {
+              size: 12,
+              weight: 600,
+            },
             callbacks: {
+              title: () => '', // Remove title for cleaner look
               label: (context: TooltipItem<'line'>): string => {
-                let label = 'Price: '
                 if (
                   context.parsed &&
                   context.parsed.y !== null &&
                   context.parsed.y !== undefined
                 ) {
-                  label += `${context.parsed.y.toLocaleString()}`
+                  const value = context.parsed.y
+                  if (value >= 1000) {
+                    return `$${(value / 1000).toFixed(1)}K`
+                  }
+                  return `$${value.toFixed(0)}`
                 }
-                return label
+                return ''
               },
             },
           },
@@ -390,17 +445,18 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
         },
         elements: {
           point: {
-            radius: 3, // Center point size
+            radius: 0, // Hide points by default for cleaner look
             hoverRadius: 4,
-            backgroundColor: '#6F2FCE', // Center point color
-            borderColor: 'rgba(0, 0, 0, 0)', // Transparent space
-            borderWidth: 5, // Width of transparent space
+            backgroundColor: '#6F2FCE',
+            borderColor: 'white',
+            borderWidth: 2,
             hoverBackgroundColor: '#6F2FCE',
-            hoverBorderColor: '#6F2FCE',
-            hoverBorderWidth: 5,
+            hoverBorderColor: 'white',
+            hoverBorderWidth: 2,
           },
           line: {
-            tension: 0.4, // Smooth curve
+            tension: 0.3, // Slightly less curved for more professional look
+            borderWidth: 2,
           },
         },
       }
@@ -417,32 +473,63 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
           label: 'Price',
           data: data.map((item) => item.value),
           borderColor: '#6F2FCE',
-          backgroundColor: 'rgba(111, 47, 206, 0.1)', // Area fill color
-          fill: true,
-          tension: 0.4,
-          // Point styling
-          pointRadius: 3, // Center point size
-          pointHoverRadius: 4, // Slightly larger on hover
-          pointBackgroundColor: '#6F2FCE', // Center point color
+          backgroundColor: 'transparent', // No background fill
+          fill: false, // Disable area fill completely
+          tension: 0.3,
+          borderWidth: 2,
+          // Point styling - hidden by default, shown on hover
+          pointRadius: 0,
+          pointHoverRadius: 4,
+          pointBackgroundColor: '#6F2FCE',
           pointHoverBackgroundColor: '#6F2FCE',
-          pointBorderColor: 'rgba(0, 0, 0, 0)', // Transparent space
-          pointBorderWidth: 5, // Width of transparent space
-          pointHoverBorderColor: 'rgba(0, 0, 0, 0)',
-          pointHoverBorderWidth: 5,
-          // We'll use a custom point style with the outer border
+          pointBorderColor: 'white',
+          pointBorderWidth: 2,
+          pointHoverBorderColor: 'white',
+          pointHoverBorderWidth: 2,
           pointStyle: 'circle',
-          // Additional styling for tooltip
-          hoverBackgroundColor: '#6F2FCE',
         },
       ],
     }
   }
 
   // Handle year selection change
-  const handleYearChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedYear(e.target.value)
+  const handleYearChange = (year: string) => {
+    setSelectedYear(year)
+    setIsDropdownOpen(false)
   }
 
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
+  // Handle window resize to ensure chart stays properly sized
+  useEffect(() => {
+    const handleResize = () => {
+      if (chartRef.current) {
+        // Small delay to ensure container has updated dimensions
+        setTimeout(() => {
+          chartRef.current?.resize()
+        }, 100)
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [mounted])
+
   // Handle date range change
   const handleDateRangeChange = (range: DateRangeType) => {
     setDateRange(range)
@@ -454,6 +541,15 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
     const data = generateChartData(dateRange, selectedYear)
     setChartData(prepareChartData(data))
     setChartOptions(getChartOptions(dateRange))
+
+    // Force chart resize after data update
+    const timer = setTimeout(() => {
+      if (chartRef.current) {
+        chartRef.current.resize()
+      }
+    }, 50)
+
+    return () => clearTimeout(timer)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dateRange, selectedYear, actualTheme, mounted])
 
@@ -479,10 +575,18 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
 
   if (!mounted) {
     return (
-      <div className="bg-theme-bg-secondary border border-theme-border rounded-lg p-6 w-full transition-colors duration-300">
-        <div className="animate-pulse">
-          <div className="h-6 bg-theme-bg-tertiary rounded w-1/4 mb-4"></div>
-          <div className="h-64 bg-theme-bg-tertiary rounded"></div>
+      <div className="bg-theme-bg-tertiary border border-theme-border rounded-lg p-6 w-full transition-colors duration-300">
+        <div className="space-y-4">
+          <div className="h-5 w-40 rounded bg-theme-bg-secondary animate-pulse" />
+          <div className="relative h-64 w-full rounded bg-theme-bg-tertiary border border-theme-border overflow-hidden">
+            <div className="absolute inset-0 p-3 grid grid-rows-5 gap-3">
+              <div className="h-8 w-full rounded bg-theme-bg-secondary animate-pulse" />
+              <div className="h-8 w-full rounded bg-theme-bg-secondary animate-pulse" />
+              <div className="h-8 w-full rounded bg-theme-bg-secondary animate-pulse" />
+              <div className="h-8 w-full rounded bg-theme-bg-secondary animate-pulse" />
+              <div className="h-8 w-full rounded bg-theme-bg-secondary animate-pulse" />
+            </div>
+          </div>
         </div>
       </div>
     )
@@ -491,90 +595,167 @@ const AmountAnalysisChart: React.FC<AmountAnalysisChartProps> = ({
   const colors = getThemeColors()
 
   return (
-    <div className="bg-theme-bg-secondary border border-theme-border rounded-lg p-6 w-full transition-colors duration-300">
-      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-6 gap-2 sm:gap-0">
+    <div className="border border-theme-border rounded-lg p-4 sm:p-6 w-full transition-colors duration-300">
+      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-4 gap-3 sm:gap-0">
         <div className="flex items-center gap-2">
-          <h2 className="text-xl font-semibold text-theme transition-colors duration-300">
+          <h2 className="text-lg sm:text-xl font-medium text-theme transition-colors duration-300">
             Price Analysis
           </h2>
         </div>
-        {/* Desktop: Range buttons */}
-        <div
-          className="hidden sm:flex"
-          style={{
-            display: 'flex',
-            gap: '10px',
-            backgroundColor: colors.selectorBg,
-            padding: '4px',
-            borderRadius: '7.1px',
-          }}
-        >
-          {dateRangeOptions.map((range) => (
-            <button
-              key={range}
-              onClick={() => handleDateRangeChange(range)}
-              style={{
-                padding: '6px 8px',
-                backgroundColor:
-                  dateRange === range ? '#6F2FCE' : 'transparent',
-                color: dateRange === range ? 'white' : colors.selectorText,
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '12.93px',
-                fontWeight: dateRange === range ? 'bold' : 'normal',
-                transition: 'all 0.2s ease',
-              }}
-            >
-              {range}
-            </button>
-          ))}
-        </div>
-        <div className="relative ml-2">
-          <select
-            value={selectedYear}
-            onChange={handleYearChange}
-            disabled={dateRange === 'ALL'}
-            className={`rounded-md px-3 py-1 text-sm font-medium appearance-none pr-8 focus:outline-none focus:ring-2 focus:ring-primary border border-theme-border transition-colors duration-300 ${
-              dateRange === 'ALL'
-                ? 'cursor-not-allowed opacity-50'
-                : 'cursor-pointer'
-            }`}
+        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
+          {/* Simplified Range buttons */}
+          <div
+            className="flex"
             style={{
-              backgroundColor: colors.selectBg,
-              color: dateRange !== 'ALL' ? '#6F2FCE' : colors.selectText,
+              gap: '6px',
+              backgroundColor: colors.selectorBg,
+              padding: '3px',
+              borderRadius: '8px',
             }}
           >
-            {availableYears.map((year) => (
-              <option
-                key={year}
-                value={year}
+            {dateRangeOptions.map((range) => (
+              <button
+                key={range}
+                onClick={() => handleDateRangeChange(range)}
                 style={{
-                  color: year === selectedYear ? '#6F2FCE' : colors.selectText,
-                  backgroundColor: colors.selectBg,
+                  padding: '4px 8px',
+                  backgroundColor:
+                    dateRange === range ? '#6F2FCE' : 'transparent',
+                  color: dateRange === range ? 'white' : colors.selectorText,
+                  border: 'none',
+                  borderRadius: '5px',
+                  cursor: 'pointer',
+                  fontSize: '11px',
+                  fontWeight: dateRange === range ? '600' : '400',
+                  transition: 'all 0.2s ease',
+                  minWidth: '28px',
                 }}
               >
-                {year}
-              </option>
+                {range}
+              </button>
             ))}
-          </select>
-          <div className="pointer-events-none absolute inset-y-0 right-[75%] flex items-center px-2 text-theme-muted">
-            <svg
-              className="h-4 w-4 fill-current"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
+          </div>
+          {/* Ultra Modern Custom Dropdown */}
+          <div className="relative" ref={dropdownRef}>
+            <div
+              onClick={() =>
+                dateRange !== 'ALL' && setIsDropdownOpen(!isDropdownOpen)
+              }
+              className={`relative rounded-xl px-4 py-2.5 text-sm font-bold cursor-pointer transition-all duration-300 border-2 ${
+                dateRange === 'ALL'
+                  ? 'cursor-not-allowed opacity-40 border-gray-300'
+                  : isDropdownOpen
+                    ? 'border-primary shadow-lg shadow-primary/20 scale-105'
+                    : 'border-transparent hover:border-primary/30 hover:shadow-md hover:scale-102'
+              }`}
+              style={{
+                background:
+                  dateRange !== 'ALL'
+                    ? isDropdownOpen
+                      ? 'linear-gradient(135deg, rgba(111, 47, 206, 0.1) 0%, rgba(111, 47, 206, 0.05) 50%, rgba(111, 47, 206, 0.1) 100%)'
+                      : `linear-gradient(135deg, ${colors.selectBg} 0%, rgba(111, 47, 206, 0.03) 100%)`
+                    : colors.selectBg,
+                color: dateRange !== 'ALL' ? '#6F2FCE' : colors.selectText,
+                minWidth: '80px',
+                backdropFilter: 'blur(10px)',
+              }}
             >
-              <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
-            </svg>
+              <div className="flex items-center justify-between">
+                <span className="font-bold text-base">{selectedYear}</span>
+                <div
+                  className={`ml-3 transition-all duration-300 ${
+                    isDropdownOpen ? 'rotate-180 scale-110' : 'rotate-0'
+                  }`}
+                >
+                  <svg className="h-4 w-4 fill-current" viewBox="0 0 20 20">
+                    <path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+
+            {/* Custom Dropdown Menu */}
+            {isDropdownOpen && dateRange !== 'ALL' && (
+              <div
+                className="absolute top-full left-0 right-0 mt-2 rounded-xl border-2 border-primary/20 shadow-2xl shadow-primary/10 z-50 overflow-hidden backdrop-blur-md"
+                style={{
+                  background: `linear-gradient(135deg, ${colors.selectBg} 0%, rgba(111, 47, 206, 0.02) 100%)`,
+                  animation: 'slideDown 0.2s ease-out',
+                }}
+              >
+                {availableYears.map((year, index) => (
+                  <div
+                    key={year}
+                    onClick={() => handleYearChange(year)}
+                    className={`px-4 py-3 text-sm font-semibold cursor-pointer transition-all duration-200 ${
+                      year === selectedYear
+                        ? 'bg-primary text-white shadow-inner'
+                        : 'hover:bg-primary/10 hover:text-primary'
+                    }`}
+                    style={{
+                      color:
+                        year === selectedYear ? 'white' : colors.selectText,
+                      borderBottom:
+                        index < availableYears.length - 1
+                          ? `1px solid rgba(111, 47, 206, 0.1)`
+                          : 'none',
+                    }}
+                  >
+                    <div className="flex items-center justify-between">
+                      <span>{year}</span>
+                      {year === selectedYear && (
+                        <svg
+                          className="h-4 w-4 fill-current"
+                          viewBox="0 0 20 20"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
           </div>
         </div>
       </div>
       <div className="w-full overflow-x-auto" style={{ overflowY: 'hidden' }}>
         <div
-          className="h-[320px]"
-          style={{ minWidth: isMobile ? minChartWidth : '100%' }}
+          className="chart-container h-[280px] sm:h-[320px]"
+          style={{
+            minWidth: isMobile ? minChartWidth : '100%',
+            backgroundColor: 'transparent',
+          }}
         >
-          <Line data={chartData} options={chartOptions} />
+          {isChartReady && mounted ? (
+            <Line
+              ref={chartRef}
+              data={chartData}
+              options={{
+                ...chartOptions,
+                onResize: () => {
+                  // Chart resize handler - ensures proper dimensions
+                },
+                plugins: {
+                  ...chartOptions.plugins,
+                  filler: {
+                    propagate: false,
+                  },
+                },
+              }}
+            />
+          ) : (
+            <div className="flex items-center justify-center h-full">
+              <div className="animate-pulse">
+                <div className="h-4 bg-theme-border rounded w-32 mb-4"></div>
+                <div className="h-64 bg-theme-border rounded"></div>
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/frontend/app/account/[address]/Navbar.tsx b/frontend/app/account/[address]/Navbar.tsx
index ab822861..c64ec78a 100644
--- a/frontend/app/account/[address]/Navbar.tsx
+++ b/frontend/app/account/[address]/Navbar.tsx
@@ -95,7 +95,7 @@ const Navbar: React.FC<NavbarProps> = ({
   ]
 
   return (
-    <nav className="bg-theme-secondary border-b border-theme text-theme flex justify-between items-center p-3 lg:p-4 transition-colors duration-300">
+    <nav className="fixed top-0 left-0 right-0 z-40 bg-theme-secondary border-b border-theme text-theme flex justify-between items-center p-3 lg:p-4 transition-colors duration-300">
       <div className="flex items-center gap-3">
         {/* Mobile menu button */}
         {isMobile && (
diff --git a/frontend/app/account/[address]/Sidebar.tsx b/frontend/app/account/[address]/Sidebar.tsx
index 83d2d93c..4237c950 100644
--- a/frontend/app/account/[address]/Sidebar.tsx
+++ b/frontend/app/account/[address]/Sidebar.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image'
 import SidebarProfile from './Profile'
 import { NavItem } from './navigation'
 import Link from 'next/link'
-import { X } from 'lucide-react'
+import { X, Pin, PinOff } from 'lucide-react'
 import { useSpherreAccount } from '../../context/account-context'
 import { sliceWalletAddress } from '@/components/utils'
 
@@ -15,8 +15,11 @@ interface SidebarProps {
   navItems: NavItem[]
   selectedPage: string
   isMobile: boolean
+  isUltraWide: boolean
   sidebarExpanded: boolean
   setSidebarExpanded: (expanded: boolean) => void
+  desktopSidebarExpanded: boolean
+  setDesktopSidebarExpanded: (expanded: boolean) => void
 }
 
 const Sidebar = ({
@@ -24,45 +27,67 @@ const Sidebar = ({
   navItems,
   selectedPage,
   isMobile,
+  isUltraWide,
   sidebarExpanded,
   setSidebarExpanded,
+  setDesktopSidebarExpanded,
 }: SidebarProps) => {
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => setMounted(true), [])
-
   // State to track sidebar expansion
   const [expanded, setExpanded] = useState(false) // Start with false for SSR
 
+  // State to track if sidebar is pinned (fixed) or hover mode
+  const [isPinned, setIsPinned] = useState(false)
+
   const { accountAddress } = useSpherreAccount()
 
-  // Load saved preference after mount
+  // Load saved preferences after mount
   useEffect(() => {
-    if (mounted && typeof window !== 'undefined') {
-      const saved = localStorage.getItem('sidebarExpanded')
-      if (saved !== null) {
-        setExpanded(JSON.parse(saved))
+    if (typeof window !== 'undefined') {
+      const savedExpanded = localStorage.getItem('sidebarExpanded')
+      if (savedExpanded !== null) {
+        setExpanded(JSON.parse(savedExpanded))
+      }
+
+      const savedPinned = localStorage.getItem('sidebarPinned')
+      if (savedPinned !== null) {
+        setIsPinned(JSON.parse(savedPinned))
       }
     }
-  }, [mounted])
+  }, [])
 
   // Store expanded state in localStorage when it changes
   useEffect(() => {
-    if (mounted && typeof window !== 'undefined') {
+    if (typeof window !== 'undefined') {
       localStorage.setItem('sidebarExpanded', JSON.stringify(expanded))
     }
-  }, [expanded, mounted])
+  }, [expanded])
+
+  // Store pinned state in localStorage when it changes
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('sidebarPinned', JSON.stringify(isPinned))
+    }
+  }, [isPinned])
+
+  // Update parent state when sidebar expansion changes (hover or pin)
+  useEffect(() => {
+    if (!isMobile && !isUltraWide) {
+      const shouldExpand = isPinned || expanded
+      setDesktopSidebarExpanded(shouldExpand)
+    }
+  }, [isPinned, expanded, isMobile, isUltraWide, setDesktopSidebarExpanded])
 
   // References for staggered animations
   const itemsRef = useRef<(HTMLLIElement | null)[]>([])
 
-  // Reset expanded state when clicking outside
+  // Reset expanded state when clicking outside (not on ultra-wide or when pinned)
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const sidebar = document.getElementById('sidebar')
       if (sidebar && !sidebar.contains(event.target as Node)) {
         if (isMobile) {
           setSidebarExpanded(false)
-        } else {
+        } else if (!isUltraWide && !isPinned) {
           setExpanded(false)
         }
       }
@@ -72,7 +97,7 @@ const Sidebar = ({
     return () => {
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [isMobile, setSidebarExpanded])
+  }, [isMobile, isUltraWide, isPinned, setSidebarExpanded])
 
   // Set animation delays for staggered menu reveal
   useEffect(() => {
@@ -83,13 +108,13 @@ const Sidebar = ({
     })
   }, [expanded])
 
-  // Handle keyboard navigation
+  // Handle keyboard navigation (not on ultra-wide or when pinned)
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         if (isMobile) {
           setSidebarExpanded(false)
-        } else {
+        } else if (!isUltraWide && !isPinned) {
           setExpanded(false)
         }
       }
@@ -99,7 +124,7 @@ const Sidebar = ({
     return () => {
       window.removeEventListener('keydown', handleKeyDown)
     }
-  }, [isMobile, setSidebarExpanded])
+  }, [isMobile, isUltraWide, isPinned, setSidebarExpanded])
 
   // Tooltip component for collapsed state
   const Tooltip = ({
@@ -115,16 +140,22 @@ const Sidebar = ({
     </div>
   )
 
-  const isExpanded = isMobile ? sidebarExpanded : expanded
-
-  if (!mounted) return null
+  // Determine if sidebar should be expanded:
+  // - Ultra-wide: always expanded
+  // - Mobile: use sidebarExpanded state
+  // - Desktop: if pinned, always expanded; otherwise use hover-based expanded state
+  const isExpanded = isUltraWide
+    ? true
+    : isMobile
+      ? sidebarExpanded
+      : isPinned || expanded
 
   return (
     <>
       {/* Mobile overlay */}
       {isMobile && isExpanded && (
         <div
-          className="fixed inset-0 bg-black bg-opacity-50 z-20 lg:hidden"
+          className="fixed top-16 left-0 right-0 bottom-0 bg-black bg-opacity-50 z-25 lg:hidden"
           onClick={() => setSidebarExpanded(false)}
         />
       )}
@@ -133,15 +164,19 @@ const Sidebar = ({
         id="sidebar"
         className={`${
           isMobile
-            ? `fixed top-0 left-0 h-screen w-64 transform transition-transform duration-300 z-30 ${
+            ? `fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 transform transition-transform duration-300 z-30 ${
                 isExpanded ? 'translate-x-0' : '-translate-x-full'
               }`
-            : `flex-shrink-0 transition-all duration-300 ${isExpanded ? 'w-64' : 'w-16'}`
-        } sidebar-bg text-theme border-r border-theme sidebar-transition`}
-        onMouseEnter={() => !isMobile && setExpanded(true)}
-        onMouseLeave={() => !isMobile && setExpanded(false)}
+            : `fixed top-16 left-0 h-[calc(100vh-4rem)] flex-shrink-0 transition-all duration-300 z-20 ${isExpanded ? 'w-64' : 'w-16'}`
+        } sidebar-bg text-theme border-r border-theme-border sidebar-transition overflow-x-hidden`}
+        onMouseEnter={() =>
+          !isMobile && !isUltraWide && !isPinned && setExpanded(true)
+        }
+        onMouseLeave={() =>
+          !isMobile && !isUltraWide && !isPinned && setExpanded(false)
+        }
       >
-        <div className="p-4 h-full flex flex-col">
+        <div className="h-full flex flex-col">
           {/* Mobile close button */}
           {isMobile && (
             <div className="flex justify-end mb-4">
@@ -154,90 +189,53 @@ const Sidebar = ({
             </div>
           )}
 
-          {/* Logo */}
+          {/* Logo - Simple and Always Visible */}
           <div
-            className={`flex items-center sidebar-transition ${
-              mounted && isExpanded ? 'gap-4 mb-14' : 'justify-center mb-14'
+            className={`flex items-center justify-center flex-shrink-0 ${
+              isExpanded ? 'py-6 px-4' : 'py-4 px-2'
             }`}
           >
             <Image
               src={logo}
-              alt="logo"
-              width={mounted && isExpanded ? 24 : 40}
-              height={mounted && isExpanded ? 24 : 40}
-              className="sidebar-transition"
+              alt="Spherre Logo"
+              width={40}
+              height={40}
+              priority
+              className={`transition-all duration-300 ${
+                isExpanded ? 'w-10 h-10' : 'w-8 h-8'
+              }`}
             />
-            <div
-              className={`overflow-hidden transition-all ${mounted && isExpanded ? 'w-auto opacity-100' : 'w-0 opacity-0'}`}
-            >
-              <h2 className="text-[24px] font-semibold whitespace-nowrap text-theme">
-                Spherre
-              </h2>
-            </div>
           </div>
 
-          {/* Menu Items */}
-          <ul className="flex flex-col gap-5 text-[16px] flex-1 overflow-y-auto">
-            {navItems.map((item, index) => (
-              <li
-                key={item.name}
-                ref={(el) => {
-                  itemsRef.current[index] = el
-                }}
-                className="staggered-item menu-item-animation"
-              >
-                {mounted && isExpanded ? (
-                  <Link
-                    href={item?.route ?? `/account/${accountAddress}/`}
-                    className={`flex items-center p-3 rounded-lg sidebar-transition sidebar-menu-item ${
-                      selectedPage === item.name
-                        ? 'active'
-                        : 'text-theme-secondary hover:text-theme'
-                    }`}
-                    onClick={() => isMobile && setSidebarExpanded(false)}
-                  >
-                    <div className="relative flex items-center justify-center w-6 h-6 mr-3">
-                      <Image
-                        src={item.icon}
-                        alt={item.name}
-                        width={24}
-                        height={24}
-                        className="sidebar-transition"
-                      />
-                      {item.notification && (
-                        <span className="absolute -top-1 -right-1 text-xs bg-red-500 text-white rounded-full w-4 h-4 flex items-center justify-center">
-                          {item.notification}
-                        </span>
-                      )}
-                    </div>
-                    <span className="truncate">{item.name}</span>
-                    {item.comingSoon && (
-                      <span className="text-[10px] text-green-400 border-[0.5px] bg-green-400/10 border-green-400/40 px-2 py-[0.5px] rounded-xl ml-auto flex-shrink-0">
-                        Coming soon
-                      </span>
-                    )}
-                  </Link>
-                ) : (
-                  <Tooltip content={item.name}>
+          {/* Menu Items - Fill remaining space between logo and profile */}
+          <div className="flex-1 min-h-0 flex flex-col">
+            <ul
+              className={`flex flex-col ${isExpanded ? 'gap-5' : 'gap-6 mt-3'} text-[16px] flex-1 overflow-y-auto overflow-x-hidden`}
+            >
+              {navItems.map((item, index) => (
+                <li
+                  key={item.name}
+                  ref={(el) => {
+                    itemsRef.current[index] = el
+                  }}
+                  className="staggered-item menu-item-animation"
+                >
+                  {isExpanded ? (
                     <Link
-                      href={item?.route ?? `/${accountAddress}/`}
-                      className={`flex items-center justify-center p-3 rounded-lg sidebar-transition sidebar-menu-item ${
+                      href={item?.route ?? `/account/${accountAddress}/`}
+                      className={`flex items-center p-3 rounded-lg mx-2 sidebar-transition sidebar-menu-item ${
                         selectedPage === item.name
                           ? 'active'
                           : 'text-theme-secondary hover:text-theme'
                       }`}
-                      style={{
-                        width: '40px',
-                        height: '40px',
-                      }}
                       onClick={() => isMobile && setSidebarExpanded(false)}
                     >
-                      <div className="relative flex items-center justify-center">
+                      <div className="relative flex items-center justify-center w-6 h-6 mr-3">
                         <Image
                           src={item.icon}
                           alt={item.name}
-                          width={30}
-                          height={30}
+                          width={24}
+                          height={24}
                           className="sidebar-transition"
                         />
                         {item.notification && (
@@ -246,16 +244,73 @@ const Sidebar = ({
                           </span>
                         )}
                       </div>
+                      <span className="truncate">{item.name}</span>
+                      {item.comingSoon && (
+                        <span className="text-[10px] text-green-400 border-[0.5px] bg-green-400/10 border-green-400/40 px-2 py-[0.5px] rounded-xl ml-auto flex-shrink-0">
+                          Coming soon
+                        </span>
+                      )}
                     </Link>
-                  </Tooltip>
-                )}
-              </li>
-            ))}
-          </ul>
+                  ) : (
+                    <Tooltip content={item.name}>
+                      <Link
+                        href={item?.route ?? `/${accountAddress}/`}
+                        className={`flex items-center justify-center mx-auto rounded-lg sidebar-transition sidebar-menu-item ${
+                          selectedPage === item.name
+                            ? 'active'
+                            : 'text-theme-secondary hover:text-theme'
+                        }`}
+                        style={{
+                          width: '32px',
+                          height: '32px',
+                        }}
+                        onClick={() => isMobile && setSidebarExpanded(false)}
+                      >
+                        <div className="relative flex items-center justify-center">
+                          <Image
+                            src={item.icon}
+                            alt={item.name}
+                            width={20}
+                            height={20}
+                            className="sidebar-transition"
+                          />
+                          {item.notification && (
+                            <span className="absolute -top-1 -right-1 text-xs bg-red-500 text-white rounded-full w-4 h-4 flex items-center justify-center">
+                              {item.notification}
+                            </span>
+                          )}
+                        </div>
+                      </Link>
+                    </Tooltip>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Pin/Unpin Toggle Button - Only visible on desktop (not mobile or ultra-wide) */}
+          {!isMobile && !isUltraWide && (
+            <div
+              className={`mb-40 ${isExpanded ? 'px-3' : 'flex justify-center'}`}
+            >
+              <button
+                onClick={() => setIsPinned(!isPinned)}
+                className={`p-2 rounded-lg transition-colors duration-200 hover:bg-theme-tertiary ${
+                  isPinned
+                    ? 'bg-primary/10 text-primary'
+                    : 'text-theme-secondary'
+                }`}
+                title={isPinned ? 'Unpin sidebar' : 'Pin sidebar'}
+                aria-label={isPinned ? 'Unpin sidebar' : 'Pin sidebar'}
+              >
+                {isPinned ? <Pin size={18} /> : <PinOff size={18} />}
+              </button>
+            </div>
+          )}
 
           {/* Profile Section with smooth transition */}
           <div
-            className={`profile-section mt-auto ${isExpanded ? 'h-auto opacity-100' : 'h-0 opacity-0'}`}
+            className={`profile-section flex-shrink-0 ${isExpanded ? 'h-auto opacity-100' : 'h-0 opacity-0'}`}
           >
             {isExpanded && (
               <SidebarProfile
diff --git a/frontend/app/account/[address]/Tabs.tsx b/frontend/app/account/[address]/Tabs.tsx
index 224711cd..b219d17e 100644
--- a/frontend/app/account/[address]/Tabs.tsx
+++ b/frontend/app/account/[address]/Tabs.tsx
@@ -13,6 +13,7 @@ import nft8 from '@/public/Images/nft8.png'
 import strk from '@/public/Images/strk.png'
 import { useTheme } from '@/app/context/theme-context-provider'
 import { getTokenImage } from '@/lib/utils/token_image'
+import { Skeleton } from '@/components/ui/skeleton'
 
 // NFT data with correctly imported image objects
 export const nfts = [
@@ -68,6 +69,7 @@ export default function Tabs({
   setNFTModalOpen: Dispatch<SetStateAction<number | undefined>>
 }) {
   const [mounted, setMounted] = useState(false)
+  const [minSkeletonElapsed, setMinSkeletonElapsed] = useState(false)
   useTheme()
   const [activeTab, setActiveTab] = useState('Tokens')
   const [tokenImages, setTokenImages] = useState<Record<string, string>>({})
@@ -76,6 +78,25 @@ export default function Tabs({
     setMounted(true)
   }, [])
 
+  // Keep skeletons visible for at least 5 seconds on initial load
+  useEffect(() => {
+    try {
+      const done = sessionStorage.getItem('tokensSkeletonShown') === 'true'
+      if (done) {
+        setMinSkeletonElapsed(true)
+        return
+      }
+    } catch {}
+
+    const id = setTimeout(() => {
+      setMinSkeletonElapsed(true)
+      try {
+        sessionStorage.setItem('tokensSkeletonShown', 'true')
+      } catch {}
+    }, 5000)
+    return () => clearTimeout(id)
+  }, [])
+
   useEffect(() => {
     if (!mounted) return
 
@@ -144,109 +165,91 @@ export default function Tabs({
       </div>
 
       {activeTab === 'Tokens' &&
-        (loadingTokenData ? (
-          <div className="p-8 flex justify-center">
-            <div className="animate-spin rounded-full h-12 w-12 border-4 border-theme-border border-t-theme transition-colors duration-300"></div>
-          </div>
-        ) : (
-          <div className="my-2 px-2 py-2 rounded-lg">
-            {/* Mobile View - Card Layout */}
-            <div className="block sm:hidden">
-              {tokens.map((token) => (
-                <div
-                  key={token.coin}
-                  className="mb-3 p-3 rounded-lg bg-theme-bg-secondary border border-theme-border hover:bg-theme-bg-tertiary transition-colors duration-200"
-                >
-                  <div className="flex items-center justify-between mb-2">
-                    <div className="flex items-center gap-2">
-                      <Image
-                        src={tokenImages[token.coin] || strk}
-                        width={20}
-                        height={20}
-                        alt="token icon"
-                      />
-                      <span className="text-theme font-medium transition-colors duration-300">
-                        {token.coin}
-                      </span>
-                    </div>
-                    <div className="text-theme font-semibold transition-colors duration-300">
-                      {token.price}
-                    </div>
-                  </div>
+        (() => {
+          const isPending = loadingTokenData || !minSkeletonElapsed
+          if (isPending) {
+            return (
+              <div className="my-2 rounded-lg bg-theme-bg-tertiary border border-theme-border p-4 sm:p-6">
+                <div className="space-y-4">
+                  {/* Header skeleton */}
+                  <div className="h-5 w-40 rounded bg-theme-bg-secondary animate-pulse mx-1 sm:mx-2" />
 
-                  <div className="grid grid-cols-2 gap-2 text-xs">
-                    <div>
-                      <span className="text-theme-secondary">Balance: </span>
-                      <span className="text-theme transition-colors duration-300">
-                        {token.balance}
-                      </span>
-                    </div>
-                    <div>
-                      <span className="text-theme-secondary">Value: </span>
-                      <span className="text-theme transition-colors duration-300">
-                        {token.value}
-                      </span>
-                    </div>
+                  {/* Mobile skeleton cards */}
+                  <div className="block sm:hidden space-y-3">
+                    {Array.from({ length: 3 }).map((_, i) => (
+                      <div
+                        key={i}
+                        className="p-4 rounded-lg bg-theme-bg-secondary mx-1"
+                      />
+                    ))}
                   </div>
 
-                  <div className="mt-2">
-                    <div className="flex justify-between items-center mb-1">
-                      <span className="text-theme-secondary text-xs">Size</span>
-                      <span className="text-theme-secondary text-xs">
-                        {token.size}
-                      </span>
-                    </div>
-                    <div className="relative w-full h-1 bg-theme-bg-tertiary rounded-full">
-                      <div
-                        className="absolute top-0 left-0 h-1 bg-gray-900 dark:bg-white rounded-full transition-colors duration-300"
-                        style={{ width: token.size }}
-                      ></div>
+                  {/* Desktop skeleton table */}
+                  <div className="hidden sm:block">
+                    <div className="min-w-[600px] space-y-3">
+                      {Array.from({ length: 5 }).map((_, i) => (
+                        <div
+                          key={i}
+                          className="h-10 rounded-lg bg-theme-bg-secondary animate-pulse mx-2"
+                        />
+                      ))}
                     </div>
                   </div>
                 </div>
-              ))}
-            </div>
-
-            {/* Desktop/Tablet View - Table Layout */}
-            <div className="hidden sm:block overflow-x-auto">
-              <div className="min-w-[600px]">
-                <div className="flex text-xs sm:text-sm text-theme-secondary font-semibold mb-1 gap-6 transition-colors duration-300">
-                  <div className="w-1/5">Coin</div>
-                  <div className="w-1/5">Price</div>
-                  <div className="w-1/5">Balance</div>
-                  <div className="w-1/5">Value</div>
-                  <div className="w-1/5">Size</div>
-                </div>
+              </div>
+            )
+          }
+          return (
+            <div className="my-2 px-2 py-2 rounded-lg">
+              {/* Mobile View - Card Layout */}
+              <div className="block sm:hidden">
                 {tokens.map((token) => (
                   <div
                     key={token.coin}
-                    className="flex items-center gap-6 rounded-lg px-3 py-3 hover:bg-theme-bg-tertiary transition-colors duration-200"
+                    className="mb-3 p-3 rounded-lg bg-theme-bg-secondary border border-theme-border hover:bg-theme-bg-tertiary transition-colors duration-200"
                   >
-                    <div className="flex items-center gap-1 w-1/5">
-                      <Image
-                        src={tokenImages[token.coin] || strk}
-                        width={18}
-                        height={18}
-                        alt="starknet token icon"
-                      />
-                      <span className="text-theme transition-colors duration-300">
-                        {token.coin}
-                      </span>
-                    </div>
-                    <div className="w-1/5 text-theme transition-colors duration-300">
-                      {token.price}
-                    </div>
-                    <div className="w-1/5 text-theme transition-colors duration-300">
-                      {token.balance}
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center gap-2">
+                        <Image
+                          src={tokenImages[token.coin] || strk}
+                          width={20}
+                          height={20}
+                          alt="token icon"
+                        />
+                        <span className="text-theme font-medium transition-colors duration-300">
+                          {token.coin}
+                        </span>
+                      </div>
+                      <div className="text-theme font-semibold transition-colors duration-300">
+                        {token.price}
+                      </div>
                     </div>
-                    <div className="w-1/5 text-theme transition-colors duration-300">
-                      {token.value}
+
+                    <div className="grid grid-cols-2 gap-2 text-xs">
+                      <div>
+                        <span className="text-theme-secondary">Balance: </span>
+                        <span className="text-theme transition-colors duration-300">
+                          {token.balance}
+                        </span>
+                      </div>
+                      <div>
+                        <span className="text-theme-secondary">Value: </span>
+                        <span className="text-theme transition-colors duration-300">
+                          {token.value}
+                        </span>
+                      </div>
                     </div>
-                    <div className="w-1/5 flex flex-col items-start gap-[3px]">
-                      <div className="text-[10px] sm:text-sm mt-1 text-left text-theme-secondary transition-colors duration-300">
-                        {token.size}
+
+                    <div className="mt-2">
+                      <div className="flex justify-between items-center mb-1">
+                        <span className="text-theme-secondary text-xs">
+                          Size
+                        </span>
+                        <span className="text-theme-secondary text-xs">
+                          {token.size}
+                        </span>
                       </div>
-                      <div className="relative w-full h-1 rounded-full">
+                      <div className="relative w-full h-1 bg-theme-bg-tertiary rounded-full">
                         <div
                           className="absolute top-0 left-0 h-1 bg-gray-900 dark:bg-white rounded-full transition-colors duration-300"
                           style={{ width: token.size }}
@@ -256,29 +259,89 @@ export default function Tabs({
                   </div>
                 ))}
               </div>
+
+              {/* Desktop/Tablet View - Table Layout */}
+              <div className="hidden sm:block overflow-x-auto">
+                <div className="min-w-[600px]">
+                  <div className="flex text-xs sm:text-sm text-theme-secondary font-semibold mb-1 gap-6 transition-colors duration-300">
+                    <div className="w-1/5">Coin</div>
+                    <div className="w-1/5">Price</div>
+                    <div className="w-1/5">Balance</div>
+                    <div className="w-1/5">Value</div>
+                    <div className="w-1/5">Size</div>
+                  </div>
+                  {tokens.map((token) => (
+                    <div
+                      key={token.coin}
+                      className="flex items-center gap-6 rounded-lg px-3 py-3 hover:bg-theme-bg-tertiary transition-colors duration-200"
+                    >
+                      <div className="flex items-center gap-1 w-1/5">
+                        <Image
+                          src={tokenImages[token.coin] || strk}
+                          width={18}
+                          height={18}
+                          alt="starknet token icon"
+                        />
+                        <span className="text-theme transition-colors duration-300">
+                          {token.coin}
+                        </span>
+                      </div>
+                      <div className="w-1/5 text-theme transition-colors duration-300">
+                        {token.price}
+                      </div>
+                      <div className="w-1/5 text-theme transition-colors duration-300">
+                        {token.balance}
+                      </div>
+                      <div className="w-1/5 text-theme transition-colors duration-300">
+                        {token.value}
+                      </div>
+                      <div className="w-1/5 flex flex-col items-start gap-[3px]">
+                        <div className="text-[10px] sm:text-sm mt-1 text-left text-theme-secondary transition-colors duration-300">
+                          {token.size}
+                        </div>
+                        <div className="relative w-full h-1 rounded-full">
+                          <div
+                            className="absolute top-0 left-0 h-1 bg-gray-900 dark:bg-white rounded-full transition-colors duration-300"
+                            style={{ width: token.size }}
+                          ></div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
             </div>
-          </div>
-        ))}
+          )
+        })()}
 
       {activeTab === 'NFT' && (
         <div className="p-2 sm:p-4">
           <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4">
-            {nfts.map((nft) => (
-              <div
-                key={nft.id}
-                className="rounded-lg overflow-hidden bg-theme-bg-secondary border-2 border-theme-border hover:border-theme-border/80 transition-all duration-200"
-                onClick={() => setNFTModalOpen(nft.id)}
-              >
-                <div className="aspect-square relative">
-                  <Image
-                    src={nft.image}
-                    alt={`NFT ${nft.id}`}
-                    fill
-                    className="object-cover"
-                  />
-                </div>
-              </div>
-            ))}
+            {nfts.length === 0
+              ? Array.from({ length: 8 }).map((_, i) => (
+                  <div
+                    key={i}
+                    className="rounded-lg overflow-hidden bg-theme-bg-secondary border-2 border-theme-border"
+                  >
+                    <Skeleton className="aspect-square w-full bg-theme-bg-secondary" />
+                  </div>
+                ))
+              : nfts.map((nft) => (
+                  <div
+                    key={nft.id}
+                    className="rounded-lg overflow-hidden bg-theme-bg-secondary border-2 border-theme-border hover:border-theme-border/80 transition-all duration-200"
+                    onClick={() => setNFTModalOpen(nft.id)}
+                  >
+                    <div className="aspect-square relative">
+                      <Image
+                        src={nft.image}
+                        alt={`NFT ${nft.id}`}
+                        fill
+                        className="object-cover"
+                      />
+                    </div>
+                  </div>
+                ))}
           </div>
         </div>
       )}
diff --git a/frontend/app/account/[address]/deposit/deposit-via-address/components/ManualDeposit.tsx b/frontend/app/account/[address]/deposit/deposit-via-address/components/ManualDeposit.tsx
index 104bd40f..0e44930a 100644
--- a/frontend/app/account/[address]/deposit/deposit-via-address/components/ManualDeposit.tsx
+++ b/frontend/app/account/[address]/deposit/deposit-via-address/components/ManualDeposit.tsx
@@ -25,7 +25,7 @@ const ManualDeposit = () => {
       margin: 2, // Less whitespace
       color: {
         dark: '#ffffff',
-        light: '#1C1D1F',
+        light: '#1D1E22',
       },
       errorCorrectionLevel: 'H',
     }).then(setSrc)
@@ -112,7 +112,7 @@ const ManualDeposit = () => {
 
       <div className="flex flex-col h-[322px] w-full">
         <div className="flex justify-between gap-5">
-          <div className="size-[250px] relative overflow-hidden rounded-[10px] bg-gray-100 dark:bg-[#1C1D1F] p-2 shadow-lg transition-colors duration-300">
+          <div className="size-[250px] relative overflow-hidden rounded-[10px] bg-gray-100 dark:bg-[#1D1E22] p-2 shadow-lg transition-colors duration-300">
             {src ? (
               <>
                 <Image
@@ -127,7 +127,7 @@ const ManualDeposit = () => {
                   alt="member avatar"
                   height={60}
                   width={60}
-                  className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-100 dark:bg-[#1C1D1F] p-2 transition-colors duration-300"
+                  className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-100 dark:bg-[#1D1E22] p-2 transition-colors duration-300"
                 />
               </>
             ) : (
@@ -183,7 +183,7 @@ const ManualDeposit = () => {
       <div className="flex justify-between gap-5 mt-5">
         <button
           onClick={downloadQRCode}
-          className="w-[304px] h-[50px] rounded-[7px] bg-gray-200 dark:bg-[#272729] text-gray-900 dark:text-white transition-colors duration-300"
+          className="w-[304px] h-[50px] rounded-[7px] bg-gray-200 dark:bg-[#24252A] text-gray-900 dark:text-white transition-colors duration-300"
         >
           Save as image
         </button>{' '}
diff --git a/frontend/app/account/[address]/layout.tsx b/frontend/app/account/[address]/layout.tsx
index 646db253..abecb0c0 100644
--- a/frontend/app/account/[address]/layout.tsx
+++ b/frontend/app/account/[address]/layout.tsx
@@ -15,7 +15,7 @@ import Apps from '@/public/Images/Apps.png'
 import Settings from '@/public/Images/Settings.png'
 import Support from '@/public/Images/Support.png'
 import SmartLock from '@/public/Images/Smart-lock.png'
-import { NavItem } from './navigation'
+import { NavItem, getSelectedPage } from './navigation'
 import { usePathname } from 'next/navigation'
 import { useSpherreAccount } from '@/app/context/account-context'
 import { useGetAccountName } from '@/lib'
@@ -30,17 +30,19 @@ interface DappLayoutProps {
 export default function DappLayout({ children, params }: DappLayoutProps) {
   // All hooks at the top - ALWAYS called in the same order
   const [sidebarExpanded, setSidebarExpanded] = useState(false)
+  const [desktopSidebarExpanded, setDesktopSidebarExpanded] = useState(false)
   const [isMobile, setIsMobile] = useState(false)
+  const [isUltraWide, setIsUltraWide] = useState(false)
   const pathname = usePathname()
-  const selectedPage = pathname
   const account_address = useSpherreAccount().accountAddress
   const { address } = React.use(params)
   const addressToUse = account_address ?? (address as `0x${string}`)
+  const selectedPage = getSelectedPage(pathname, addressToUse)
   const { data: accountName } = useGetAccountName(addressToUse)
   const [title, setTitle] = useState(pathname)
 
   // Define navigation items using addressToUse for all routes
-  const navItems: NavItem[] = [
+  const allNavItems: NavItem[] = [
     {
       name: 'Dashboard',
       icon: Dashboard,
@@ -99,49 +101,49 @@ export default function DappLayout({ children, params }: DappLayoutProps) {
     },
   ]
 
-  // Check for mobile screen size - only use window after mount
+  // Filter out items with comingSoon: true to keep sidebar neater
+  const navItems = allNavItems.filter((item) => !item.comingSoon)
+
+  // Check for mobile and ultra-wide screen sizes - only use window after mount
   useEffect(() => {
     if (typeof window === 'undefined') return
 
-    const checkMobile = () => {
+    const checkScreenSize = () => {
       setIsMobile(window.innerWidth < 768)
+      setIsUltraWide(window.innerWidth >= 2560)
     }
 
-    checkMobile()
-    window.addEventListener('resize', checkMobile)
+    checkScreenSize()
+    window.addEventListener('resize', checkScreenSize)
 
-    return () => window.removeEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkScreenSize)
   }, [])
 
-  // Listen for sidebar expansion state changes - only use document after mount
+  // Track desktop sidebar expansion for layout adjustments
   useEffect(() => {
     if (typeof window === 'undefined') return
 
-    const sidebar = document.getElementById('sidebar')
-
-    const handleSidebarHover = () => {
-      if (!isMobile) {
-        setSidebarExpanded(true)
-      }
-    }
-    const handleSidebarLeave = () => {
-      if (!isMobile) {
-        setSidebarExpanded(false)
+    // Listen to localStorage changes for pinned state
+    const checkPinnedState = () => {
+      const isPinned = localStorage.getItem('sidebarPinned')
+      if (isPinned) {
+        setDesktopSidebarExpanded(JSON.parse(isPinned))
       }
     }
 
-    if (sidebar && !isMobile) {
-      sidebar.addEventListener('mouseenter', handleSidebarHover)
-      sidebar.addEventListener('mouseleave', handleSidebarLeave)
-    }
+    checkPinnedState()
 
-    return () => {
-      if (sidebar && !isMobile) {
-        sidebar.removeEventListener('mouseenter', handleSidebarHover)
-        sidebar.removeEventListener('mouseleave', handleSidebarLeave)
-      }
+    // Also check on storage events (for cross-tab sync)
+    window.addEventListener('storage', checkPinnedState)
+    return () => window.removeEventListener('storage', checkPinnedState)
+  }, [])
+
+  // Handle ultra-wide screen behavior
+  useEffect(() => {
+    if (isUltraWide) {
+      setDesktopSidebarExpanded(true)
     }
-  }, [isMobile])
+  }, [isUltraWide])
 
   useEffect(() => {
     if (accountName) {
@@ -150,27 +152,40 @@ export default function DappLayout({ children, params }: DappLayoutProps) {
   }, [accountName])
 
   return (
-    <div className="bg-theme min-h-screen overflow-x-hidden transition-colors duration-300">
-      <div className="flex min-h-screen">
-        <Sidebar
-          accountName={accountName ?? 'Spherre Account'}
-          navItems={navItems}
-          selectedPage={selectedPage}
-          isMobile={isMobile}
-          sidebarExpanded={sidebarExpanded}
-          setSidebarExpanded={setSidebarExpanded}
-        />
-        <div className="flex-1 flex flex-col min-h-screen">
+    <>
+      <Sidebar
+        accountName={accountName ?? 'Spherre Account'}
+        navItems={navItems}
+        selectedPage={selectedPage}
+        isMobile={isMobile}
+        isUltraWide={isUltraWide}
+        sidebarExpanded={sidebarExpanded}
+        setSidebarExpanded={setSidebarExpanded}
+        desktopSidebarExpanded={desktopSidebarExpanded}
+        setDesktopSidebarExpanded={setDesktopSidebarExpanded}
+      />
+      <div className="bg-theme min-h-screen transition-colors duration-300">
+        <div
+          className={`flex flex-col min-h-screen main-content-transition ${
+            isMobile
+              ? 'ml-0'
+              : isUltraWide
+                ? 'ml-64'
+                : desktopSidebarExpanded
+                  ? 'ml-64'
+                  : 'ml-16'
+          }`}
+        >
           <Navbar
             title={title}
             isMobile={isMobile}
             setSidebarExpanded={setSidebarExpanded}
           />
-          <main className="flex-1 p-4 sm:p-6 lg:p-8 overflow-x-hidden bg-theme transition-colors duration-300">
-            <div className="max-w-full">{children}</div>
+          <main className="flex-1 bg-theme transition-colors duration-300 pt-16 lg:pt-20">
+            <div className="global-content-container">{children}</div>
           </main>
         </div>
       </div>
-    </div>
+    </>
   )
 }
diff --git a/frontend/app/account/[address]/members/components/member-card.tsx b/frontend/app/account/[address]/members/components/member-card.tsx
index 0728dbea..faac5c57 100644
--- a/frontend/app/account/[address]/members/components/member-card.tsx
+++ b/frontend/app/account/[address]/members/components/member-card.tsx
@@ -130,7 +130,7 @@ function MemberCardBase({
     if (perms.permissions.length > 0) {
       setCurrentMember({ ...member, permissions: perms.permissions })
     }
-  }, [perms.permissions])
+  }, [perms.permissions, member])
 
   return (
     <div
diff --git a/frontend/app/account/[address]/members/page.tsx b/frontend/app/account/[address]/members/page.tsx
index 5c0816e2..998986ca 100644
--- a/frontend/app/account/[address]/members/page.tsx
+++ b/frontend/app/account/[address]/members/page.tsx
@@ -22,6 +22,7 @@ import {
   feltToAddress,
 } from '@/lib/utils/validation'
 import MemberCard from './components/member-card'
+import { Skeleton } from '@/components/ui/skeleton'
 
 interface Member {
   id: number
@@ -164,6 +165,26 @@ const Members = () => {
     return () => clearInterval(interval)
   }, [])
 
+  // Session-gated skeleton (show once per session for 5s max)
+  const [minSkeletonElapsed, setMinSkeletonElapsed] = useState(false)
+  useEffect(() => {
+    try {
+      const done = sessionStorage.getItem('membersSkeletonShown') === 'true'
+      if (done) {
+        setMinSkeletonElapsed(true)
+        return
+      }
+    } catch {}
+
+    const id = setTimeout(() => {
+      setMinSkeletonElapsed(true)
+      try {
+        sessionStorage.setItem('membersSkeletonShown', 'true')
+      } catch {}
+    }, 5000)
+    return () => clearTimeout(id)
+  }, [])
+
   const handleCopy = useCallback(async (address: string) => {
     try {
       await navigator.clipboard.writeText(address)
@@ -312,7 +333,7 @@ const Members = () => {
 
   if (!accountReady) {
     return (
-      <div className="bg-theme min-h-screen p-3 sm:p-4 lg:p-5 py-6 sm:py-8 lg:py-10 overflow-x-hidden transition-colors duration-300">
+      <div className="overflow-x-hidden transition-colors duration-300">
         <div className="flex items-center justify-center h-64">
           <div className="text-theme text-lg">Loading account…</div>
         </div>
@@ -320,11 +341,19 @@ const Members = () => {
     )
   }
 
-  if (isLoading) {
+  if (isLoading || !minSkeletonElapsed) {
     return (
-      <div className="bg-theme min-h-screen p-3 sm:p-4 lg:p-5 py-6 sm:py-8 lg:py-10 overflow-x-hidden transition-colors duration-300">
-        <div className="flex items-center justify-center h-64">
-          <div className="text-theme text-lg">Loading members...</div>
+      <div className="overflow-x-hidden transition-colors duration-300 p-4 sm:p-6 lg:p-8">
+        <div className="bg-theme-bg-tertiary border border-theme-border rounded-lg p-4 sm:p-6">
+          <div className="h-6 w-48 bg-theme-bg-secondary rounded animate-pulse mb-6 mx-1" />
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Skeleton
+                key={i}
+                className="h-60 w-full rounded-lg bg-theme-bg-secondary mx-1"
+              />
+            ))}
+          </div>
         </div>
       </div>
     )
@@ -332,7 +361,7 @@ const Members = () => {
 
   if (error) {
     return (
-      <div className="bg-theme min-h-screen p-3 sm:p-4 lg:p-5 py-6 sm:py-8 lg:py-10 overflow-x-hidden transition-colors duration-300">
+      <div className="overflow-x-hidden transition-colors duration-300">
         <div className="flex items-center justify-center h-64">
           <div className="text-red-500 text-lg">
             Error loading members: {error.message}
@@ -343,7 +372,7 @@ const Members = () => {
   }
 
   return (
-    <div className="bg-theme min-h-screen p-3 sm:p-4 lg:p-5 py-6 sm:py-8 lg:py-10 overflow-x-hidden transition-colors duration-300">
+    <div className="overflow-x-hidden transition-colors duration-300">
       <div className="flex flex-col sm:flex-row text-theme justify-between border-b-2 relative border-theme-border gap-4">
         <div className="flex items-center flex-wrap">
           <p className="cursor-pointer px-3 sm:px-4 py-2 text-sm sm:text-base transition-colors duration-200 border-b-2 border-theme text-theme">
diff --git a/frontend/app/account/[address]/navigation.ts b/frontend/app/account/[address]/navigation.ts
index ed5abc5c..d5c19a22 100644
--- a/frontend/app/account/[address]/navigation.ts
+++ b/frontend/app/account/[address]/navigation.ts
@@ -2,18 +2,18 @@
 import { StaticImageData } from 'next/image'
 
 export const routeToPageMap = (address: string) => ({
-  [`/${address}/`]: 'Dashboard',
-  [`/${address}/trade`]: 'Trade',
-  [`/${address}/members`]: 'Members',
-  [`/${address}/transactions`]: 'Transactions',
-  [`/${address}/stake`]: 'Stake',
-  [`/${address}/smart-will`]: 'Smart Will',
-  [`/${address}/treasury`]: 'Treasury',
-  [`/${address}/payments`]: 'Payments',
-  [`/${address}/apps`]: 'Apps',
-  [`/${address}/settings`]: 'Settings',
-  [`/${address}/support`]: 'Support',
-  [`/${address}/smart`]: 'Smart Lock',
+  [`/account/${address}/`]: 'Dashboard',
+  [`/account/${address}/trade`]: 'Trade',
+  [`/account/${address}/members`]: 'Members',
+  [`/account/${address}/transactions`]: 'Transactions',
+  [`/account/${address}/stake`]: 'Stake',
+  [`/account/${address}/smart-will`]: 'Smart Will',
+  [`/account/${address}/treasury`]: 'Treasury',
+  [`/account/${address}/payments`]: 'Payments',
+  [`/account/${address}/apps`]: 'Apps',
+  [`/account/${address}/settings`]: 'Settings',
+  [`/account/${address}/support`]: 'Support',
+  [`/account/${address}/smart`]: 'Smart Lock',
 })
 
 export type PageName = keyof typeof routeToPageMap
diff --git a/frontend/app/account/[address]/page.tsx b/frontend/app/account/[address]/page.tsx
index f31a2a98..a6ee5520 100644
--- a/frontend/app/account/[address]/page.tsx
+++ b/frontend/app/account/[address]/page.tsx
@@ -13,12 +13,16 @@ import { SpherreAccountContext } from '@/app/context/account-context'
 import { useRouter } from 'next/navigation'
 import { routes } from '@/lib/utils/routes'
 import NFTDetailsModal from '../../components/NFTDetailsModal'
+import { Eye, EyeOff } from 'lucide-react'
+import { Skeleton } from '@/components/ui/skeleton'
 
 export default function DashboardPage() {
   useTheme()
   const [open, setOpen] = useState(false)
   const [depositOpen, setDepositOpen] = useState(false)
   const [mounted, setMounted] = useState(false)
+  const [minSkeletonElapsed, setMinSkeletonElapsed] = useState(false)
+  const [isBalanceVisible, setIsBalanceVisible] = useState(true)
   const { accountAddress } = useContext(SpherreAccountContext)
   const { tokensDisplay, loadingTokenData } = useTokenBalances()
   const [nftModalOpen, setNFTModalOpen] = useState<number | undefined>()
@@ -30,6 +34,25 @@ export default function DashboardPage() {
     setMounted(true)
   }, [])
 
+  // Ensure loaders are visible for at least 5 seconds to communicate background work
+  useEffect(() => {
+    try {
+      const done = sessionStorage.getItem('dashboardSkeletonShown') === 'true'
+      if (done) {
+        setMinSkeletonElapsed(true)
+        return
+      }
+    } catch {}
+
+    const id = setTimeout(() => {
+      setMinSkeletonElapsed(true)
+      try {
+        sessionStorage.setItem('dashboardSkeletonShown', 'true')
+      } catch {}
+    }, 5000)
+    return () => clearTimeout(id)
+  }, [])
+
   useEffect(() => {
     console.log(tokensDisplay)
   }, [tokensDisplay])
@@ -39,6 +62,12 @@ export default function DashboardPage() {
     return acc + numericValue
   }, 0)
 
+  // Only show skeletons while fetching; zero balances should still show real UI
+  const isTokenDataPending = loadingTokenData || !minSkeletonElapsed
+
+  const isMembersPending = info?.isLoading || !minSkeletonElapsed
+  const isThresholdPending = info?.isLoading || !minSkeletonElapsed
+
   useEffect(() => {
     console.log('Modal state:', open)
   }, [open])
@@ -63,6 +92,10 @@ export default function DashboardPage() {
     setNFTModalOpen(val)
   }
 
+  const toggleBalance = () => {
+    setIsBalanceVisible(!isBalanceVisible)
+  }
+
   const handleSelectOption = () => {
     router.push(routes(accountAddress).withdraw)
     // Handle the selected option
@@ -71,7 +104,7 @@ export default function DashboardPage() {
   if (!mounted) return null
 
   return (
-    <div className="py-4 sm:py-6 lg:py-8 px-1 sm:px-4 lg:px-6 rounded-[10px] flex flex-col gap-y-4 sm:gap-y-6 lg:gap-y-8 border-theme-border border-2 mx-1 sm:mx-4 overflow-x-hidden w-full min-h-[90vh] bg-theme-bg-secondary transition-colors duration-300">
+    <div className="rounded-[10px] flex flex-col gap-y-4 sm:gap-y-6 lg:gap-y-8 overflow-x-hidden w-full min-h-[90vh] bg-theme-bg-secondary transition-colors duration-300 p-4 sm:p-6 lg:p-8">
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 lg:gap-[15px] w-full">
         <div className="bg-theme-bg-tertiary border border-theme-border rounded-[10px] py-4 sm:py-6 lg:py-[25px] px-3 sm:px-6 lg:px-[28px] w-full transition-colors duration-300">
           <div className="grid gap-y-4 sm:gap-y-6 lg:gap-y-[26px] mb-6 sm:mb-8 lg:mb-[55px]">
@@ -80,13 +113,19 @@ export default function DashboardPage() {
                 <h3 className="text-theme-secondary font-semibold text-sm sm:text-base lg:text-[16px] transition-colors duration-300">
                   Wallet Balance
                 </h3>
-                <Image
-                  className="pt-1"
-                  height={20}
-                  width={20}
-                  src="/eye.svg"
-                  alt="Eye Icon"
-                />
+                <button
+                  onClick={toggleBalance}
+                  className="focus:outline-none hover:opacity-70 transition-opacity duration-200"
+                  aria-label={
+                    isBalanceVisible ? 'Hide balance' : 'Show balance'
+                  }
+                >
+                  {isBalanceVisible ? (
+                    <Eye size={20} className="text-theme-secondary" />
+                  ) : (
+                    <EyeOff size={20} className="text-theme-secondary" />
+                  )}
+                </button>
               </div>
               <Image
                 className="pt-1"
@@ -97,7 +136,15 @@ export default function DashboardPage() {
               />
             </div>
             <h2 className="text-2xl sm:text-3xl lg:text-[45px] text-theme font-semibold transition-colors duration-300">
-              {loadingTokenData ? 'Loading...' : `$${totalValue.toFixed(2)}`}
+              {isTokenDataPending ? (
+                <div className="w-40 sm:w-48 lg:w-56">
+                  <Skeleton className="h-8 sm:h-9 lg:h-10 w-full bg-theme-bg-secondary" />
+                </div>
+              ) : isBalanceVisible ? (
+                `$${totalValue.toFixed(2)}`
+              ) : (
+                '•••••'
+              )}
             </h2>
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-x-3">
@@ -133,10 +180,10 @@ export default function DashboardPage() {
                 Members
               </p>
             </div>
-            {info?.isLoading ? (
-              <span className="text-theme-secondary text-lg animate-pulse">
-                Loading...
-              </span>
+            {isMembersPending ? (
+              <div className="w-16 sm:w-20 lg:w-24">
+                <Skeleton className="h-7 w-full bg-theme-bg-secondary" />
+              </div>
             ) : info?.error && !info.members ? (
               <span className="text-theme-secondary text-lg">—</span>
             ) : (
@@ -165,10 +212,10 @@ export default function DashboardPage() {
                 />
               </div>
             </div>
-            {info?.isLoading ? (
-              <span className="text-theme-secondary text-lg animate-pulse">
-                Loading...
-              </span>
+            {isThresholdPending ? (
+              <div className="w-16 sm:w-20 lg:w-24">
+                <Skeleton className="h-7 w-full bg-theme-bg-secondary" />
+              </div>
             ) : info?.error && !info.threshold ? (
               <span className="text-theme-secondary text-lg">-</span>
             ) : (
@@ -181,22 +228,65 @@ export default function DashboardPage() {
       </div>
       <div className="grid grid-cols-1 lg:grid-cols-[2.5fr_1fr] gap-3 sm:gap-4 lg:gap-[15px] w-full">
         <div className="rounded-[10px] overflow-hidden w-full">
-          <AmountChart />
+          {isTokenDataPending ? (
+            <div className="bg-theme-bg-tertiary border border-theme-border rounded-lg p-4 sm:p-6 w-full transition-colors duration-300">
+              <div className="space-y-4">
+                {/* Header skeletons */}
+                <div className="flex items-center justify-between">
+                  <div className="w-32 sm:w-40">
+                    <div className="h-5 w-full rounded bg-theme-bg-secondary animate-pulse" />
+                  </div>
+                  <div className="hidden sm:flex items-center gap-2">
+                    <div className="h-6 w-8 rounded bg-theme-bg-secondary animate-pulse" />
+                    <div className="h-6 w-8 rounded bg-theme-bg-secondary animate-pulse" />
+                    <div className="h-6 w-8 rounded bg-theme-bg-secondary animate-pulse" />
+                    <div className="h-6 w-8 rounded bg-theme-bg-secondary animate-pulse" />
+                    <div className="h-6 w-8 rounded bg-theme-bg-secondary animate-pulse" />
+                    <div className="h-6 w-14 rounded bg-theme-bg-secondary animate-pulse" />
+                  </div>
+                </div>
+
+                {/* Chart area skeleton: darker grid bars */}
+                <div className="relative h-[260px] w-full rounded bg-theme-bg-tertiary border border-theme-border overflow-hidden">
+                  <div className="absolute inset-0 p-3 grid grid-rows-5 gap-3">
+                    <div className="h-8 w-full rounded bg-theme-bg-secondary animate-pulse" />
+                    <div className="h-8 w-full rounded bg-theme-bg-secondary animate-pulse" />
+                    <div className="h-8 w-full rounded bg-theme-bg-secondary animate-pulse" />
+                    <div className="h-8 w-full rounded bg-theme-bg-secondary animate-pulse" />
+                    <div className="h-8 w-full rounded bg-theme-bg-secondary animate-pulse" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <AmountChart />
+          )}
         </div>
         <div className="bg-theme-bg-tertiary border border-theme-border flex flex-col gap-y-4 sm:gap-y-6 lg:gap-y-[23px] items-center justify-between rounded-[10px] py-4 sm:py-6 lg:py-[25px] px-3 sm:px-6 lg:px-[28px] w-full transition-colors duration-300">
-          <h3 className="self-start mb-3 sm:mb-4 lg:mb-5 text-theme-secondary text-sm sm:text-base lg:text-[16px] font-bold transition-colors duration-300">
-            Request Status
-          </h3>
-          <Image
-            height={80}
-            width={80}
-            className="sm:h-[100px] sm:w-[100px]"
-            src="/request_placeholder.svg"
-            alt="Request Placeholder Icon"
-          />
-          <p className="text-theme-secondary text-center text-sm sm:text-base transition-colors duration-300">
-            You currently haven`t sent for any fund confirmation approval.
-          </p>
+          {isTokenDataPending ? (
+            <div className="w-full">
+              <div className="h-5 w-40 bg-theme-bg-secondary rounded animate-pulse mb-5 mx-1" />
+              <div className="h-[120px] rounded bg-theme-bg-secondary animate-pulse mx-1 mb-4" />
+              <div className="h-4 w-3/4 bg-theme-bg-secondary rounded animate-pulse mx-1 mb-2" />
+              <div className="h-4 w-2/3 bg-theme-bg-secondary rounded animate-pulse mx-1" />
+            </div>
+          ) : (
+            <>
+              <h3 className="self-start mb-3 sm:mb-4 lg:mb-5 text-theme-secondary text-sm sm:text-base lg:text-[16px] font-bold transition-colors duration-300">
+                Request Status
+              </h3>
+              <Image
+                height={80}
+                width={80}
+                className="sm:h-[100px] sm:w-[100px]"
+                src="/request_placeholder.svg"
+                alt="Request Placeholder Icon"
+              />
+              <p className="text-theme-secondary text-center text-sm sm:text-base transition-colors duration-300">
+                You currently haven`t sent for any fund confirmation approval.
+              </p>
+            </>
+          )}
         </div>
       </div>
       <div className="w-full overflow-x-auto">
diff --git a/frontend/app/account/[address]/settings/layout.tsx b/frontend/app/account/[address]/settings/layout.tsx
index 5480102f..b3b89ab4 100644
--- a/frontend/app/account/[address]/settings/layout.tsx
+++ b/frontend/app/account/[address]/settings/layout.tsx
@@ -7,7 +7,7 @@ export default function SettingsLayout({
   children: React.ReactNode
 }) {
   return (
-    <div className="w-full font-sans px-2 sm:px-4 lg:px-6">
+    <div className="w-full font-sans">
       <div className="w-full flex flex-col space-y-4 sm:space-y-8 items-start">
         <SettingsNavbar />
         {children}
diff --git a/frontend/app/account/[address]/smart-will/page.tsx b/frontend/app/account/[address]/smart-will/page.tsx
index 0cc5080c..e685ea4d 100644
--- a/frontend/app/account/[address]/smart-will/page.tsx
+++ b/frontend/app/account/[address]/smart-will/page.tsx
@@ -105,7 +105,7 @@ const SmartWillPage = () => {
   if (!mounted) return null
 
   return (
-    <div className="p-4 font-['Nunito_Sans'] bg-theme min-h-screen transition-colors duration-300">
+    <div className="font-['Nunito_Sans'] bg-theme min-h-screen transition-colors duration-300 p-4 sm:p-6 lg:p-8">
       <h1 className="text-2xl font-bold flex items-center gap-2.5 text-gray-900 dark:text-white transition-colors duration-300">
         Smart Will{' '}
         <Info size={20} className="text-gray-500 dark:text-[#8E9BAE]" />{' '}
@@ -126,7 +126,7 @@ const SmartWillPage = () => {
           </p>
         </div>
 
-        <div className="w-full flex-1 bg-gray-50 dark:bg-[#1C1D1F] rounded-[10px] p-4 h-fit flex flex-col items-start gap-10 transition-colors duration-300">
+        <div className="w-full flex-1 bg-gray-50 dark:bg-[#1D1E22] rounded-[10px] p-4 h-fit flex flex-col items-start gap-10 transition-colors duration-300">
           <h2 className="text-gray-900 dark:text-[#FFFFFF] text-xl font-bold transition-colors duration-300">
             All Wallets
           </h2>
@@ -248,7 +248,7 @@ const SmartWillPage = () => {
               <Button
                 onClick={resetCountdown}
                 variant="secondary"
-                className="bg-gray-200 dark:bg-[#272729] !p-2.5 rounded-[10px] text-gray-700 dark:text-white transition-colors duration-300"
+                className="bg-gray-200 dark:bg-[#24252A] !p-2.5 rounded-[10px] text-gray-700 dark:text-white transition-colors duration-300"
               >
                 <TimerReset />
                 Reset Countdown
diff --git a/frontend/app/account/[address]/transactions/page.tsx b/frontend/app/account/[address]/transactions/page.tsx
index 633854e7..7ea09544 100644
--- a/frontend/app/account/[address]/transactions/page.tsx
+++ b/frontend/app/account/[address]/transactions/page.tsx
@@ -242,7 +242,7 @@ export default function TransactionsPage() {
 
   if (isLoading) {
     return (
-      <div className="p-6">
+      <div className="p-4 sm:p-6 lg:p-8">
         <h1 className="text-2xl font-bold mb-6 text-theme">
           Transaction Activity
         </h1>
@@ -258,7 +258,7 @@ export default function TransactionsPage() {
   }
 
   return (
-    <div className="p-6">
+    <div className="p-4 sm:p-6 lg:p-8">
       <div className="flex items-center justify-between mb-6">
         <h1 className="text-2xl font-bold text-theme">Transaction Activity</h1>
 
diff --git a/frontend/app/account/[address]/treasury/components/treasury-portfoliochat.tsx b/frontend/app/account/[address]/treasury/components/treasury-portfoliochat.tsx
index 8efec253..5e2a9dbb 100644
--- a/frontend/app/account/[address]/treasury/components/treasury-portfoliochat.tsx
+++ b/frontend/app/account/[address]/treasury/components/treasury-portfoliochat.tsx
@@ -273,7 +273,7 @@ const TreasuryPortfoliochat = ({
       {/* Desktop Layout: Side by Side (Original) */}
       <div className="hidden lg:grid lg:grid-cols-4 lg:h-[445px] gap-6">
         {/* Chart Section - Desktop */}
-        <div className="lg:col-span-3 h-full bg-theme-bg-secondary rounded-[10px] p-4 border-4 border-theme-border transition-colors duration-300">
+        <div className="lg:col-span-3 h-full bg-theme-bg-secondary rounded-[10px] p-4 border border-theme-border transition-colors duration-300">
           <div className="flex items-center justify-between mb-4">
             {/* Left: Token/NFT Legend */}
             <div className="flex items-center gap-6">
@@ -324,7 +324,7 @@ const TreasuryPortfoliochat = ({
           </div>
         </div>
         {/* Top Tokens Section - Desktop */}
-        <div className="bg-theme-bg-secondary h-full rounded-[10px] p-4 border-4 border-theme-border transition-colors duration-300">
+        <div className="bg-theme-bg-secondary h-full rounded-[10px] p-4 border border-theme-border transition-colors duration-300">
           <h3 className="text-lg font-semibold text-theme mb-4">Top Tokens</h3>
           <div className="flex flex-col h-[calc(100%-2rem)]">
             {topTokens.map((token, index) => {
diff --git a/frontend/app/account/[address]/treasury/page.tsx b/frontend/app/account/[address]/treasury/page.tsx
index f13a40a1..0acff0db 100644
--- a/frontend/app/account/[address]/treasury/page.tsx
+++ b/frontend/app/account/[address]/treasury/page.tsx
@@ -1,5 +1,5 @@
 'use client'
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import TreasuryHeader from './components/treasury-header'
 import TreasuryStatscard from './components/treasury-statscard'
 import TreasuryPortfoliochat from './components/treasury-portfoliochat'
@@ -10,6 +10,8 @@ import DepositModal from '@/app/components/deposit-modal'
 import { useTokenBalances } from '@/hooks/useTokenBalances'
 import { useNftTransactionList } from '@/hooks/useSpherreHooks'
 import { useSpherreAccount } from '@/app/context/account-context'
+import NFTDetailsModal from '@/app/components/NFTDetailsModal'
+import { Skeleton } from '@/components/ui/skeleton'
 
 const chartDataByPeriod = {
   '1D': {
@@ -129,6 +131,7 @@ const TreasuryPage = () => {
   >('1Y')
   const [withdrawOpen, setWithdrawOpen] = useState(false)
   const [depositOpen, setDepositOpen] = useState(false)
+  const [nftModalOpen, setNFTModalOpen] = useState<number | undefined>()
 
   // Token data
   const { tokensDisplay, loadingTokenData } = useTokenBalances()
@@ -185,8 +188,29 @@ const TreasuryPage = () => {
     setSelectedPeriod(period as '1D' | '7D' | '1M' | '3M' | '1Y')
   }
 
+  // 5s minimum skeleton for consistency
+  const [minSkeletonElapsed, setMinSkeletonElapsed] = useState(false)
+  useEffect(() => {
+    try {
+      const done = sessionStorage.getItem('treasurySkeletonShown') === 'true'
+      if (done) {
+        setMinSkeletonElapsed(true)
+        return
+      }
+    } catch {}
+
+    const id = setTimeout(() => {
+      setMinSkeletonElapsed(true)
+      try {
+        sessionStorage.setItem('treasurySkeletonShown', 'true')
+      } catch {}
+    }, 5000)
+    return () => clearTimeout(id)
+  }, [])
+  const isPending = loadingTokenData || !minSkeletonElapsed
+
   return (
-    <div className=" sm:py-6 lg:py-8 p-2 sm:px-4 lg:px-6 rounded-[10px] flex flex-col gap-y-4 sm:gap-y-6 lg:gap-y-8 border-theme-border border-2 mx-1 sm:mx-4 overflow-x-hidden w-full min-h-[90vh] bg-theme-bg-secondary transition-colors duration-300">
+    <div className="rounded-[10px] flex flex-col gap-y-4 sm:gap-y-6 lg:gap-y-8 overflow-x-hidden w-full min-h-[90vh] bg-theme-bg-secondary transition-colors duration-300 p-4 sm:p-6 lg:p-8">
       <ErrorBoundary
         errorComponent={({ error }) => (
           <div className="text-red-500 py-4 sm:py-6 lg:py-8 px-3 sm:px-6 lg:px-[28px]">
@@ -200,28 +224,57 @@ const TreasuryPage = () => {
         )}
       >
         <div className=" lg:space-y-8 w-full">
-          <TreasuryHeader
-            balance={totalBalance.toFixed(2)}
-            isBalanceVisible={isBalanceVisible}
-            toggleBalance={toggleBalance}
-            onWithdraw={handleWithdraw}
-            onDeposit={handleDeposit}
-            onTrade={handleTrade}
-          />
+          {isPending ? (
+            <div className="bg-theme-bg-tertiary border border-theme-border rounded-lg p-4 sm:p-6">
+              <div className="h-6 w-48 bg-theme-bg-secondary rounded animate-pulse mb-4 mx-1" />
+              <div className="flex gap-3">
+                <Skeleton className="h-10 w-28 bg-theme-bg-secondary rounded-lg mx-1" />
+                <Skeleton className="h-10 w-28 bg-theme-bg-secondary rounded-lg mx-1" />
+                <Skeleton className="h-10 w-28 bg-theme-bg-secondary rounded-lg mx-1" />
+              </div>
+            </div>
+          ) : (
+            <TreasuryHeader
+              balance={totalBalance.toFixed(2)}
+              isBalanceVisible={isBalanceVisible}
+              toggleBalance={toggleBalance}
+              onWithdraw={handleWithdraw}
+              onDeposit={handleDeposit}
+              onTrade={handleTrade}
+            />
+          )}
 
-          <TreasuryStatscard
-            totalTokens={
-              tokensDisplay.filter((t) => parseFloat(t.balance) > 0).length
-            }
-            totalStakes={0}
-            totalNFTs={nftList?.length ?? 0}
-          />
+          {isPending ? (
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
+              {Array.from({ length: 3 }).map((_, i) => (
+                <Skeleton
+                  key={i}
+                  className="h-28 w-full bg-theme-bg-secondary rounded-lg"
+                />
+              ))}
+            </div>
+          ) : (
+            <TreasuryStatscard
+              totalTokens={
+                tokensDisplay.filter((t) => parseFloat(t.balance) > 0).length
+              }
+              totalStakes={0}
+              totalNFTs={nftList?.length ?? 0}
+            />
+          )}
 
-          <TreasuryPortfoliochat
-            data={chartData}
-            onPeriodChange={handlePeriodChange}
-            topTokens={topTokens}
-          />
+          {isPending ? (
+            <div className="bg-theme-bg-tertiary border border-theme-border rounded-lg p-4 sm:p-6">
+              <div className="h-5 w-40 bg-theme-bg-secondary rounded animate-pulse mb-4 mx-1" />
+              <div className="h-[280px] w-full bg-theme-bg-secondary rounded-lg mx-1" />
+            </div>
+          ) : (
+            <TreasuryPortfoliochat
+              data={chartData}
+              onPeriodChange={handlePeriodChange}
+              topTokens={topTokens}
+            />
+          )}
 
           <div
             className="w-full flex min-w-0"
@@ -236,6 +289,7 @@ const TreasuryPage = () => {
               <Tabs
                 loadingTokenData={loadingTokenData}
                 tokens={tokensDisplay}
+                setNFTModalOpen={setNFTModalOpen}
               />
             </div>
           </div>
@@ -248,6 +302,7 @@ const TreasuryPage = () => {
           onSelectOption={handleWithdrawSelect}
         />
         <DepositModal open={depositOpen} onClose={handleDepositClose} />
+        <NFTDetailsModal open={nftModalOpen} onClose={setNFTModalOpen} />
       </ErrorBoundary>
     </div>
   )
diff --git a/frontend/app/account/[address]/withdraw/withdraw-step-two.tsx b/frontend/app/account/[address]/withdraw/withdraw-step-two.tsx
index 1e211e56..6efc6577 100644
--- a/frontend/app/account/[address]/withdraw/withdraw-step-two.tsx
+++ b/frontend/app/account/[address]/withdraw/withdraw-step-two.tsx
@@ -27,7 +27,7 @@ export default function WithdrawStepTwo({
       <div className="flex flex-col gap-6">
         <div className=" flex flex-col gap-5 md:p-6">
           <label className="block text-xl text-gray-500">Enter Amount</label>
-          <div className="flex border border-[#272729] rounded-lg p-4 text-white">
+          <div className="flex border border-[#24252A] rounded-lg p-4 text-white">
             <div className="flex-1 flex flex-col gap-2">
               <Input
                 type="text"
diff --git a/frontend/app/create-account/layout.tsx b/frontend/app/create-account/layout.tsx
index e267c681..b770b86d 100644
--- a/frontend/app/create-account/layout.tsx
+++ b/frontend/app/create-account/layout.tsx
@@ -6,13 +6,15 @@ export default function layout({
   children: React.ReactNode
 }>) {
   return (
-    <main className="w-full lg:px-[50px] md:px-6 px-4 md:py-[50px] py-4 overflow-x-hidden h-screen bg-theme">
-      <Nav />
-      <section className="max-w-2xl mx-auto md:mt-10 mt-10">
-        <div className="w-full flex flex-col items-center gap-6">
-          {children}
-        </div>
-      </section>
+    <main className="w-full overflow-x-hidden h-screen bg-theme">
+      <div className="container-large px-4 sm:px-6 lg:px-8 py-4 md:py-[50px]">
+        <Nav />
+        <section className="max-w-2xl mx-auto md:mt-10 mt-10">
+          <div className="w-full flex flex-col items-center gap-6">
+            {children}
+          </div>
+        </section>
+      </div>
     </main>
   )
 }
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index bb4192be..d5f4dba0 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -34,23 +34,23 @@
 
 /* Dark theme variables */
 .dark {
-  --background: #0a0a0a;
+  --background: #17181c;
   --foreground: #ededed;
 
-  --theme-bg: #0a0a0a;
-  --theme-bg-secondary: #1c1d1f;
-  --theme-bg-tertiary: #272729;
+  --theme-bg: #17181c;
+  --theme-bg-secondary: #1d1e22;
+  --theme-bg-tertiary: #24252a;
   --theme-text: #ffffff;
   --theme-text-secondary: #8e9bae;
   --theme-text-muted: #64748b;
   --theme-border: #292929;
 
   /* Card and UI backgrounds */
-  --card-bg: #1c1d1f;
-  --card-bg-secondary: #272729;
-  --sidebar-bg: #1c1d1f;
-  --navbar-bg: #1c1d1f;
-  --modal-bg: #1c1d1f;
+  --card-bg: #1d1e22;
+  --card-bg-secondary: #24252a;
+  --sidebar-bg: #1d1e22;
+  --navbar-bg: #1d1e22;
+  --modal-bg: #1d1e22;
 
   /* Borders and dividers */
   --border-color: #292929;
@@ -405,6 +405,7 @@ body {
   background-color: var(--theme-bg-tertiary);
   color: var(--theme-text);
   border-left: 3px solid var(--primary-color);
+  padding-left: 8px;
 }
 
 /* Tooltip styles for collapsed sidebar */
@@ -518,6 +519,104 @@ body {
   animation: none;
 }
 
+/* Custom z-index utilities */
+.z-25 {
+  z-index: 25;
+}
+
+/* Main content transition improvements */
+.main-content-transition {
+  transition: margin-left 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Responsive container for large screens - properly centered */
+.responsive-container {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+/* Progressive max-width constraints */
+@media (min-width: 640px) {
+  .responsive-container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 768px) {
+  .responsive-container {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .responsive-container {
+    max-width: 1000px;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .responsive-container {
+    max-width: 1200px;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 1536px) {
+  .responsive-container {
+    max-width: 1400px;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+@media (min-width: 1920px) {
+  .responsive-container {
+    max-width: 1600px;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+/* Ultra-wide screens - maximum constraint */
+@media (min-width: 2560px) {
+  .responsive-container {
+    max-width: 1800px;
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+}
+
+/* Utility class for full-width sections that break out of container */
+.full-width {
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+}
+
+/* Custom large container - 30% bigger than original max-w-6xl */
+.container-large {
+  width: 100%;
+  max-width: 1500px; /* 30% larger than 1152px */
+  margin: 0 auto;
+}
+
+/* Debug class to visualize container boundaries (remove in production) */
+/* .debug-container {
+  outline: 2px dashed rgba(111, 47, 206, 0.3);
+  outline-offset: -2px;
+} */
+
 /* Mobile sidebar adjustments */
 @media (max-width: 768px) {
   .sidebar-mobile {
@@ -672,29 +771,11 @@ body {
   background-color: #374151;
 }
 
-/* Responsive utilities for common patterns */
-.responsive-container {
-  width: 100%;
-  max-width: 100%;
-  margin: 0 auto;
-  padding: 0 1rem;
-}
-
-@media (min-width: 640px) {
-  .responsive-container {
-    padding: 0 1.5rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .responsive-container {
-    padding: 0 2rem;
-  }
-}
-
-@media (min-width: 1280px) {
-  .responsive-container {
-    padding: 0 2.5rem;
+/* Ultra-wide and 4K centered layout */
+@media (min-width: 2560px) {
+  .main-content-centered {
+    max-width: 2200px;
+    margin: 0 auto;
   }
 }
 
@@ -764,3 +845,55 @@ select {
     margin: 1.5rem;
   }
 }
+
+/* Custom dropdown animation */
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Additional hover scale utilities */
+.hover\:scale-102:hover {
+  transform: scale(1.02);
+}
+
+/* Global Layout Consistency System */
+.global-content-container {
+  width: 100%;
+  max-width: 1400px; /* Standardized max width */
+  margin: 0 auto; /* Center the container */
+  padding: 1rem 1rem; /* Base padding for mobile */
+}
+
+/* Responsive padding for different screen sizes */
+@media (min-width: 640px) {
+  .global-content-container {
+    padding: 1.5rem 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .global-content-container {
+    padding: 2rem 2rem;
+  }
+}
+
+/* Ultra-wide screen support - maintain centering */
+@media (min-width: 2560px) {
+  .global-content-container {
+    max-width: 1680px; /* Slightly larger for ultra-wide */
+    padding: 2.5rem 2.5rem;
+  }
+}
+
+/* Force chart canvas to be transparent - more specific selector */
+.chart-container canvas {
+  background: transparent !important;
+  background-color: transparent !important;
+}
diff --git a/frontend/components/shared/Button.tsx b/frontend/components/shared/Button.tsx
index b80b05dc..6965216b 100644
--- a/frontend/components/shared/Button.tsx
+++ b/frontend/components/shared/Button.tsx
@@ -17,7 +17,7 @@ export const Button: React.FC<ButtonProps> = ({
 }) => {
   const variantStyles = {
     primary: 'bg-[#6F2FCE] text-white',
-    secondary: 'bg-[#1C1D1F] text-[#FFFFFF]',
+    secondary: 'bg-[#1D1E22] text-[#FFFFFF]',
     outline: 'border-2 border-[#6F2FCE] text-[#6F2FCE] bg-transparent',
   }
 
diff --git a/frontend/components/shared/ThemeButton.tsx b/frontend/components/shared/ThemeButton.tsx
new file mode 100644
index 00000000..97b13474
--- /dev/null
+++ b/frontend/components/shared/ThemeButton.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import Image, { StaticImageData } from 'next/image'
+import { useTheme } from '@/app/context/theme-context-provider'
+
+interface ThemeButtonProps {
+  onClick: () => void
+  icon?: StaticImageData
+  children: React.ReactNode
+}
+
+const ThemeButton: React.FC<ThemeButtonProps> = ({
+  onClick,
+  icon,
+  children,
+}) => {
+  const { actualTheme } = useTheme()
+
+  return (
+    <button
+      onClick={onClick}
+      className={`w-full sm:w-72 flex items-center justify-center gap-1 px-6 py-2 rounded-lg mx-auto my-3 transition-all duration-200 ${
+        actualTheme === 'dark'
+          ? 'bg-white text-black hover:bg-gray-200'
+          : 'bg-gray-900 text-white hover:bg-gray-800'
+      }`}
+    >
+      {icon && <Image src={icon} height={30} width={24} alt="" />}
+      <p className={actualTheme === 'dark' ? 'text-black' : 'text-white'}>
+        {children}
+      </p>
+    </button>
+  )
+}
+
+export default ThemeButton
diff --git a/frontend/components/welcome.tsx b/frontend/components/welcome.tsx
index 853b28e1..c0dda4e7 100644
--- a/frontend/components/welcome.tsx
+++ b/frontend/components/welcome.tsx
@@ -4,6 +4,7 @@ import logo from '../public/Images/spherrelogo.png'
 import wall from '../public/Images/wall.png'
 import add from '../public/Images/Add.png'
 import Logo from './shared/Logo'
+import ThemeButton from './shared/ThemeButton'
 import { useRouter } from 'next/navigation'
 import { Connector, useAccount, useConnect } from '@starknet-react/core'
 import { StarknetkitConnector, useStarknetkitConnectModal } from 'starknetkit'
@@ -15,7 +16,7 @@ import { useSpherreAccount } from '@/app/context/account-context'
 const Welcome = () => {
   // for navigation
   const router = useRouter()
-  const { actualTheme, theme, setTheme } = useTheme()
+  const { theme, setTheme } = useTheme()
   const [isThemeMenuOpen, setIsThemeMenuOpen] = useState(false)
   const themeMenuRef = useRef<HTMLDivElement>(null)
 
@@ -77,124 +78,97 @@ const Welcome = () => {
     { value: 'system', label: 'System', icon: <Monitor size={16} /> },
   ]
   return (
-    <div className="flex flex-col lg:flex-row bg-theme transition-colors duration-300 min-h-screen">
-      {/* Left Section with Image */}
-      <div className="lg:w-[40vw]">
-        <Image
-          src={wall}
-          alt={''}
-          className="h-32 lg:h-screen p-4 rounded-lg"
-        />
-      </div>
-
-      {/* Right Section */}
-      <div className="flex-1 flex flex-col justify-between p-4 lg:p-14">
-        <div className="flex items-center justify-between">
-          <Logo className="w-[50px]" href="/" image={logo} />
-
-          <div className="relative" ref={themeMenuRef}>
-            <button
-              onClick={toggleThemeMenu}
-              className="p-2 hover:bg-theme-bg-secondary rounded-lg transition-colors duration-200 border border-theme-border"
-              aria-label="Toggle theme"
-            >
-              {getThemeIcon()}
-            </button>
-
-            {isThemeMenuOpen && (
-              <div className="absolute right-0 top-full mt-2 z-50 w-40 bg-theme-bg-secondary border border-theme-border rounded-lg shadow-lg py-1">
-                {themeOptions.map((option) => (
-                  <button
-                    key={option.value}
-                    onClick={() => {
-                      setTheme(option.value as 'light' | 'dark' | 'system')
-                      setIsThemeMenuOpen(false)
-                    }}
-                    className={`w-full flex items-center gap-3 px-3 py-2 text-sm transition-colors ${
-                      theme === option.value
-                        ? 'bg-primary text-white'
-                        : 'text-theme-secondary hover:bg-theme-bg-tertiary hover:text-theme'
-                    }`}
-                  >
-                    {option.icon}
-                    <span>{option.label}</span>
-                    {theme === option.value && (
-                      <span className="ml-auto text-xs">✓</span>
-                    )}
-                  </button>
-                ))}
-              </div>
-            )}
+    <div className="bg-theme transition-colors duration-300 min-h-screen">
+      <div className="w-full px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col lg:flex-row min-h-screen">
+          {/* Left Section with Image */}
+          <div className="lg:w-2/5">
+            <Image
+              src={wall}
+              alt={''}
+              className="h-32 lg:h-screen p-4 rounded-lg"
+            />
           </div>
-        </div>
 
-        {/* Centered Content */}
-        <div className="flex flex-col justify-center items-center flex-1 gap-4">
-          <p className="opacity-40 text-theme transition-colors duration-300">
-            Welcome to Spherre!
-          </p>
-          <div className="text-center">
-            {/* Responsive Text */}
-            <p className="text-lg md:text-2xl lg:text-4xl w-full md:w-[80%] lg:w-[60%] mx-auto text-theme transition-colors duration-300">
-              The Future of Secure, Collaborative Crypto Management!
-            </p>
-
-            {/* Responsive Button */}
-            {address ? (
-              <button
-                onClick={() => router.push('/create-account/step-1')}
-                className={`w-full sm:w-72 flex items-center justify-center gap-1 px-6 py-2 rounded-lg mx-auto my-3 transition-all duration-200 ${
-                  actualTheme === 'dark'
-                    ? 'bg-white text-black hover:bg-gray-200'
-                    : 'bg-gray-900 text-white hover:bg-gray-800'
-                }`}
-              >
-                <Image src={add} height={30} width={24} alt={'add'} />
-                <p
-                  className={
-                    actualTheme === 'dark' ? 'text-black' : 'text-white'
-                  }
-                >
-                  Create Spherre
-                </p>
-              </button>
-            ) : (
-              <button
-                onClick={connectWallet}
-                className={`w-full sm:w-72 flex items-center justify-center gap-1 px-6 py-2 rounded-lg mx-auto my-3 transition-all duration-200 ${
-                  actualTheme === 'dark'
-                    ? 'bg-white text-black hover:bg-gray-200'
-                    : 'bg-gray-900 text-white hover:bg-gray-800'
-                }`}
-              >
-                <p
-                  className={
-                    actualTheme === 'dark' ? 'text-black' : 'text-white'
-                  }
+          {/* Right Section */}
+          <div className="flex-1 flex flex-col justify-between p-4 lg:p-14">
+            <div className="flex items-center justify-between">
+              <Logo className="w-[50px]" href="/" image={logo} />
+
+              <div className="relative" ref={themeMenuRef}>
+                <button
+                  onClick={toggleThemeMenu}
+                  className="p-2 hover:bg-theme-bg-secondary rounded-lg transition-colors duration-200 border border-theme-border"
+                  aria-label="Toggle theme"
                 >
-                  Connect Wallet
-                </p>
-              </button>
-            )}
-            <button
-              onClick={() => router.push(`/account/${accountAddress}`)}
-              className={`w-full sm:w-72 flex items-center justify-center gap-1 px-6 py-2 rounded-lg mx-auto my-3 transition-all duration-200 ${
-                actualTheme === 'dark'
-                  ? 'bg-white text-black hover:bg-gray-200'
-                  : 'bg-gray-900 text-white hover:bg-gray-800'
-              }`}
-            >
-              <Image src={add} height={30} width={24} alt={'add'} />
-              <p
-                className={actualTheme === 'dark' ? 'text-black' : 'text-white'}
-              >
-                Go to default account
+                  {getThemeIcon()}
+                </button>
+
+                {isThemeMenuOpen && (
+                  <div className="absolute right-0 top-full mt-2 z-50 w-40 bg-theme-bg-secondary border border-theme-border rounded-lg shadow-lg py-1">
+                    {themeOptions.map((option) => (
+                      <button
+                        key={option.value}
+                        onClick={() => {
+                          setTheme(option.value as 'light' | 'dark' | 'system')
+                          setIsThemeMenuOpen(false)
+                        }}
+                        className={`w-full flex items-center gap-3 px-3 py-2 text-sm transition-colors ${
+                          theme === option.value
+                            ? 'bg-primary text-white'
+                            : 'text-theme-secondary hover:bg-theme-bg-tertiary hover:text-theme'
+                        }`}
+                      >
+                        {option.icon}
+                        <span>{option.label}</span>
+                        {theme === option.value && (
+                          <span className="ml-auto text-xs">✓</span>
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Centered Content */}
+            <div className="flex flex-col justify-center items-center flex-1 gap-4">
+              <p className="opacity-40 text-theme transition-colors duration-300">
+                Welcome to Spherre!
               </p>
-            </button>
+              <div className="text-center">
+                {/* Responsive Text */}
+                <p className="text-lg md:text-2xl lg:text-4xl w-full md:w-[80%] lg:w-[60%] mx-auto text-theme transition-colors duration-300">
+                  The Future of Secure, Collaborative Crypto Management!
+                </p>
+
+                {/* Responsive Button */}
+                {address ? (
+                  <ThemeButton
+                    onClick={() => router.push('/create-account/step-1')}
+                    icon={add}
+                  >
+                    Create Spherre
+                  </ThemeButton>
+                ) : (
+                  <ThemeButton onClick={connectWallet}>
+                    Connect Wallet
+                  </ThemeButton>
+                )}
+                {accountAddress && (
+                  <ThemeButton
+                    onClick={() => router.push(`/account/${accountAddress}`)}
+                    icon={add}
+                  >
+                    Go to default account
+                  </ThemeButton>
+                )}
+              </div>
+            </div>
+
+            <div className="h-8"></div>
           </div>
         </div>
-
-        <div className="h-8"></div>
       </div>
     </div>
   )
diff --git a/frontend/public/empty.svg b/frontend/public/empty.svg
index 0882e1d2..2b2ad780 100644
--- a/frontend/public/empty.svg
+++ b/frontend/public/empty.svg
@@ -12,7 +12,7 @@
 <path fill-rule="evenodd" clip-rule="evenodd" d="M67.1407 178.631C66.6249 178.717 66.0231 178.717 65.5073 178.804C65.3353 178.804 65.0774 178.89 64.9055 178.89C64.2178 178.89 63.4441 178.89 62.7563 178.89C62.4125 178.89 62.1546 178.89 61.8107 178.89C61.3809 178.89 61.037 178.89 60.6072 178.717C60.3493 178.631 60.7791 178.025 61.2089 178.025C61.9826 178.025 62.7563 177.939 63.53 177.939C64.0458 177.939 64.4757 177.766 64.9915 177.679C65.5073 177.593 66.0231 177.506 66.6249 177.42C66.9687 177.333 67.3126 177.333 67.5705 177.247C68.0863 177.16 68.6021 177.074 69.0319 176.901C69.3758 176.814 69.8056 176.641 70.1495 176.554C70.2355 176.554 70.3214 176.468 70.4074 176.468C70.7513 176.381 70.8372 176.468 71.0092 176.727C71.0092 176.814 71.0951 176.814 71.0951 176.901C71.1811 177.16 71.0951 177.333 70.9232 177.506C70.3214 177.852 69.6337 178.198 68.946 178.371C68.1723 178.544 67.6565 178.631 67.1407 178.631Z" fill="#8E9BAE"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M93.447 81.833C92.8453 81.833 92.3295 81.833 91.7277 81.833C91.5558 81.833 91.2979 81.833 91.1259 81.833C90.3522 81.833 89.6645 81.7465 88.8908 81.833C88.5469 81.833 88.203 81.9195 87.9451 81.9195C87.5153 82.006 87.0855 82.0925 86.6556 82.006C86.3977 82.006 86.6556 81.314 87.0855 81.141C87.9451 80.968 88.7188 80.795 89.6645 80.795C90.1803 80.795 90.6961 80.622 91.2119 80.622C91.8137 80.5355 92.3295 80.5355 92.9312 80.5355C93.2751 80.5355 93.619 80.5355 93.9628 80.449C94.4786 80.449 95.0804 80.3625 95.5962 80.3625C96.026 80.3625 96.4559 80.276 96.7997 80.1895C96.8857 80.1895 96.9717 80.1895 97.0577 80.1895C97.4015 80.1895 97.4875 80.276 97.5735 80.622C97.5735 80.7085 97.5735 80.795 97.6594 80.8815C97.6594 81.141 97.5735 81.314 97.3156 81.487C96.6278 81.7465 95.8541 82.006 95.0804 82.006C94.5646 81.9195 94.0488 81.9195 93.447 81.833Z" fill="#8E9BAE"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M61.982 78.1132C56.1362 79.0647 50.2045 80.0163 44.2728 80.7083C42.1236 80.9678 39.9744 81.3138 37.7393 81.4868C33.8707 81.7463 30.0022 81.9194 26.1337 81.7463C22.2652 81.5733 18.3107 81.2273 14.5281 79.6703C13.6685 79.4107 12.8948 78.8917 12.1211 78.4592C11.3473 77.8537 10.5736 77.4212 9.88591 76.5561C9.19817 75.6911 8.8543 74.5665 9.02624 73.442C9.1122 72.404 9.45607 71.4524 9.97188 70.5874C11.1754 68.5113 12.8948 66.9542 14.6141 65.5702C16.4194 64.2726 18.3967 63.0616 20.5458 62.456C22.0073 62.11 21.8353 62.629 20.9757 63.4941C20.116 64.3591 18.6546 65.8297 16.8492 67.3002C15.2159 68.5978 13.8404 70.1549 12.8088 71.6254C12.293 72.404 12.0351 73.1825 11.9491 73.7015C11.9491 74.2205 12.0351 74.5666 12.6369 75.0856C13.9264 76.2966 15.8176 76.9886 17.7089 77.5942C19.6862 78.1132 21.7494 78.4592 23.8986 78.7187C29.0566 79.2377 34.5585 78.7187 39.8884 78.1997C45.7342 77.5942 51.6659 76.7291 57.5117 75.7776C61.1223 75.1721 64.7329 74.5665 68.3436 73.8745C73.7595 72.8365 79.2614 71.7984 84.6773 70.6739C88.8897 69.8088 92.9302 68.7708 97.1425 67.9923C98.0882 67.8193 98.9479 67.6463 99.8935 67.4733C103.418 66.9542 104.536 67.3002 105.395 67.8193C105.567 67.9058 105.825 68.0788 105.911 68.1653C106.255 68.5978 104.88 69.1168 102.473 69.8088C98.8619 70.7604 95.0793 71.5389 91.2108 72.4905C87.3423 73.269 83.4738 74.134 79.5193 74.9126C73.7595 75.9506 67.9137 77.1617 61.982 78.1132Z" fill="#8E9BAE"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9172 67.473C29.4001 58.1306 50.2042 54.584 70.5784 51.2104C75.4785 50.3453 80.6365 49.5668 85.4507 50.7778C90.3508 51.9889 94.9071 55.7085 95.5089 60.7258L95.3369 67.3865L45.0462 78.632L18.3104 79.5835L10.0575 79.67L7.47852 73.7878L10.9172 67.473Z" fill="#272729"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9172 67.473C29.4001 58.1306 50.2042 54.584 70.5784 51.2104C75.4785 50.3453 80.6365 49.5668 85.4507 50.7778C90.3508 51.9889 94.9071 55.7085 95.5089 60.7258L95.3369 67.3865L45.0462 78.632L18.3104 79.5835L10.0575 79.67L7.47852 73.7878L10.9172 67.473Z" fill="#24252A"/>
 <path d="M10.9177 67.4734C10.7457 67.3869 10.2299 67.8194 9.45623 68.7709C9.11237 69.2899 8.59656 69.8955 8.16673 70.5875C7.90883 70.9335 7.65092 71.366 7.39302 71.7986C7.30706 71.8851 7.22109 72.0581 7.13512 72.1446C7.04915 72.3176 6.87722 72.4906 6.79125 72.6636C6.61932 73.0096 6.36142 73.3556 6.10352 73.7016C6.36142 74.3072 6.53335 74.9127 6.79125 75.5182C6.96319 75.9507 7.13512 76.4698 7.30706 76.9888C7.47899 77.5078 7.73689 78.0268 7.90883 78.5458C8.25269 79.3244 8.59656 80.1894 8.94043 81.0544C9.8001 81.0544 10.6598 81.0544 11.5194 81.0544C12.1212 81.0544 12.637 81.0544 13.2388 81.0544C14.4423 81.0544 15.6459 81.1409 16.9354 81.1409C19.5144 81.1409 22.2653 81.1409 25.1882 81.0544C28.1111 80.9679 31.2919 80.9679 34.5586 80.8814C37.9114 80.7949 41.522 80.7084 45.2186 80.6219C51.4942 79.2379 58.1996 77.8538 65.3349 76.2967C72.3842 74.7397 79.7774 73.0961 87.4284 71.4525C90.3513 70.7605 93.2742 70.155 96.1111 69.463L97.5725 69.1169L97.7445 63.6672L97.8305 61.9371V61.0721V60.4666C97.8305 60.2071 97.7445 59.9476 97.7445 59.7745C97.4006 57.6985 96.5409 55.7954 95.3374 54.2383C94.1339 52.6813 92.7584 51.4702 91.211 50.4322C89.6636 49.4806 88.0302 48.7021 86.3109 48.2696C84.5915 47.8371 82.8722 47.5775 81.2388 47.5775C77.8861 47.491 74.7913 47.9236 71.9543 48.3561C69.1174 48.8751 66.2805 49.3941 63.5296 49.8266C52.6117 51.8162 42.8974 53.8923 34.9885 56.3144C31.034 57.5255 27.4234 58.7365 24.4145 59.9476C21.3197 61.1586 18.8267 62.3697 16.7634 63.4077C15.7318 63.9267 14.8722 64.4457 14.0985 64.8783C13.3248 65.3108 12.723 65.7433 12.2072 66.0893C11.2615 66.8678 10.8317 67.3004 10.9177 67.4734C11.3475 68.2519 20.2021 63.7537 36.106 59.9476C44.015 57.958 53.6433 56.2279 64.4752 54.4978C67.2262 54.0653 69.9771 53.6328 72.814 53.2003C75.6509 52.7678 78.4878 52.4217 81.1528 52.5947C82.5283 52.6813 83.9038 52.8543 85.1933 53.2003C86.3968 53.5463 87.6863 54.0653 88.8039 54.8438C91.039 56.2279 92.7584 58.3905 93.1023 60.8126C93.1023 61.0721 93.1023 60.8126 93.1023 61.2451V62.1102V63.8402V65.3973C90.9531 65.8298 88.8899 66.3488 86.6547 66.8679C79.0037 68.5979 71.6105 70.328 64.5612 71.8851C57.5978 73.5286 51.0643 75.0857 44.8747 76.4698C41.2641 76.6428 37.8254 76.8158 34.5586 76.9888C31.2919 77.1618 28.1111 77.3348 25.1882 77.5078C22.2653 77.6808 19.5144 77.8538 16.9354 78.0268C15.6459 78.1133 14.4423 78.1133 13.2388 78.1998C12.637 78.1998 12.1212 78.2863 11.5194 78.2863C11.2615 78.2863 11.0036 78.3728 10.7457 78.3728C10.6598 78.2863 10.5738 78.1133 10.5738 78.0268L10.4878 77.8538C10.4878 77.7673 10.4019 77.7673 10.3159 77.5943C10.058 77.0753 9.8001 76.5563 9.5422 76.1237C9.2843 75.6047 9.0264 75.1722 8.85446 74.7397L8.7685 74.5667L8.85446 74.3937L8.7685 74.2207C8.68253 74.1342 8.59656 73.9611 8.59656 73.8746C8.68253 73.7016 8.68253 73.5286 8.7685 73.4421L8.85446 73.1826C8.94043 73.0961 8.94043 72.9231 9.0264 72.8366C9.19833 72.4041 9.45623 71.9716 9.62817 71.539C9.97204 70.7605 10.3159 69.982 10.4878 69.463C10.9177 68.2519 11.0896 67.5599 10.9177 67.4734Z" fill="#8E9BAE"/>
 <path d="M95.5087 132.438C95.7666 132.438 95.9386 132.005 96.1965 131.4C96.4544 130.794 96.7123 130.016 97.4 129.324C97.7439 128.978 98.0877 128.718 98.5176 128.545C98.9474 128.372 99.4632 128.372 99.893 128.545C100.323 128.718 100.753 128.978 101.183 129.497C101.612 130.016 101.956 130.708 102.214 131.486C102.3 131.832 102.386 132.092 102.472 132.438C102.558 132.784 102.558 133.043 102.644 133.476C102.73 133.908 102.73 134.341 102.73 134.687C102.73 135.033 102.644 135.379 102.73 135.292V135.379C102.558 135.465 102.3 135.465 101.956 135.465C101.612 135.465 101.269 135.465 100.925 135.379C100.581 135.292 100.237 135.292 99.893 135.206C99.2913 135.119 98.7755 134.946 98.3456 134.687C97.486 134.254 96.9702 133.735 96.6263 133.216C96.1105 132.784 95.7666 132.351 95.5087 132.438C95.2508 132.438 95.0789 132.87 95.0789 133.649C95.0789 134.427 95.6806 135.725 96.8842 136.676C97.486 137.109 98.2597 137.541 99.0334 137.801C99.4632 137.974 99.8071 138.06 100.237 138.147C100.667 138.233 101.097 138.32 101.612 138.406C102.128 138.493 102.644 138.493 103.418 138.32C103.848 138.233 104.191 138.06 104.621 137.801C104.965 137.541 105.223 137.195 105.481 136.849C105.653 136.503 105.825 135.984 105.911 135.638C105.997 135.292 105.997 135.033 105.997 134.687C105.997 134.081 105.997 133.562 105.911 133.043C105.911 132.697 105.825 132.178 105.739 131.746C105.653 131.313 105.567 130.881 105.395 130.448C105.051 129.41 104.449 128.372 103.762 127.421C102.988 126.555 101.87 125.777 100.667 125.604C99.4632 125.431 98.4316 125.604 97.486 126.123C96.5403 126.555 95.9385 127.334 95.5947 128.026C94.821 129.41 94.821 130.621 94.9929 131.4C94.9929 132.092 95.2508 132.438 95.5087 132.438Z" fill="#6F2FCE"/>
 <path d="M5.24459 49.9119C5.76039 49.8254 6.10426 49.0468 6.70603 48.7008C6.96393 48.5278 7.13587 48.6143 7.3078 48.7008C7.3078 48.7873 7.39377 48.7873 7.47974 48.9603C7.5657 49.1333 7.73764 49.3928 7.82361 49.7389C7.82361 49.8254 7.90957 49.9984 7.90957 50.0849C7.90957 50.1714 7.90957 50.1714 7.90957 50.2579V50.4309V50.5174C7.90957 50.5174 7.90957 50.5174 7.90957 50.6039C7.90957 50.6039 7.90957 50.6039 7.82361 50.6039C7.3078 50.6039 6.96393 50.5174 6.70603 50.4309C6.44813 50.3444 6.19023 50.2579 6.0183 50.0849C5.67443 49.9984 5.41653 49.8254 5.24459 49.9119C4.98669 49.9119 4.81476 50.0849 4.72879 50.5174C4.64282 50.8634 4.72879 51.5554 5.15862 52.161C5.58846 52.7665 6.36216 53.2855 7.22184 53.4585C7.3078 53.4585 7.47974 53.545 7.65167 53.545C7.82361 53.545 7.99554 53.6315 8.16747 53.6315C8.51134 53.718 8.85521 53.718 9.19908 53.6315C9.88682 53.545 10.4886 53.199 10.9184 52.68C11.3483 52.0745 11.4342 51.2094 11.3483 50.2579C11.3483 50.0849 11.3483 49.9119 11.2623 49.8254C11.2623 49.6524 11.1763 49.5658 11.1763 49.4793C11.0904 49.2198 11.0904 48.9603 11.0044 48.7008C10.7465 48.0953 10.4886 47.4898 9.97278 46.9707C9.45698 46.4517 8.76924 45.9327 7.99554 45.8462C6.44813 45.5867 5.15862 46.5382 4.81476 47.4033C4.38492 48.2683 4.47089 48.9603 4.64282 49.3928C4.72879 49.7389 4.98669 49.9119 5.24459 49.9119Z" fill="#6F2FCE"/>
diff --git a/frontend/public/empty_nft.svg b/frontend/public/empty_nft.svg
index 99a70d43..abdc1c7a 100644
--- a/frontend/public/empty_nft.svg
+++ b/frontend/public/empty_nft.svg
@@ -13,8 +13,8 @@
 <path d="M184.51 0.347763C183.728 -0.434393 182.165 0.434669 180.602 1.91207C180.515 1.99898 180.428 2.08589 180.342 2.17279C180.255 2.2597 180.168 2.3466 180.081 2.43351C178.605 3.99782 177.736 5.47522 178.518 6.34429C179.213 7.03954 180.776 6.25738 182.426 4.77998C182.512 4.69307 182.599 4.60616 182.686 4.51926C182.773 4.43235 182.86 4.34545 182.947 4.25854C184.423 2.60732 185.291 1.04301 184.51 0.347763Z" fill="#A8A8A8"/>
 <path d="M117.124 42.0626C116.95 41.8019 115.213 42.7579 112.347 44.7567C110.871 45.7996 109.134 47.1032 107.224 48.8413C105.314 50.5794 103.316 52.7521 101.493 55.5331C99.669 58.3141 98.3665 62.051 98.4533 66.1356C98.5402 70.2202 100.103 74.4786 103.056 78.0418C104.532 79.7799 106.356 81.4311 108.44 82.6478C110.524 83.8645 113.042 84.7335 115.647 84.8204C118.252 84.9073 121.118 84.2121 123.376 82.6478C125.634 81.0835 127.457 78.8239 128.499 76.1298C129.281 73.9572 129.541 71.6107 129.107 69.3512C128.847 68.2214 128.412 67.0047 127.631 65.9618C126.849 64.9189 125.634 64.1368 124.505 63.7023C121.639 62.7463 118.6 63.007 116.081 64.0499C113.563 65.0927 111.392 66.8309 109.829 68.8297C109.048 69.7857 108.266 70.9155 107.745 72.0452C107.224 73.175 106.79 74.3048 106.442 75.4346C105.748 77.781 105.487 80.0406 105.4 82.3002C105.314 86.7324 105.921 90.817 106.529 94.5539C107.224 98.2909 108.006 101.767 108.961 104.809C110.784 110.979 112.868 115.672 114.518 118.888C116.168 122.016 117.297 123.581 117.558 123.494C117.818 123.407 117.037 121.582 115.821 118.279C114.605 115.064 112.782 110.284 111.305 104.201C110.524 101.159 109.829 97.7695 109.308 94.1194C108.787 90.4693 108.353 86.4717 108.527 82.3871C108.613 80.3882 108.874 78.3025 109.482 76.3036C110.09 74.3048 110.958 72.3929 112.347 70.8286C113.65 69.1773 115.387 67.8737 117.384 67.0916C119.294 66.3094 121.552 66.1356 123.376 66.8309C124.071 67.0916 124.678 67.4392 125.026 67.9607C125.46 68.4821 125.72 69.1773 125.894 69.9595C126.242 71.5238 126.068 73.2619 125.46 74.9131C124.678 76.912 123.289 78.737 121.639 79.8668C119.902 81.0835 117.905 81.6049 115.908 81.518C113.91 81.4311 111.913 80.8228 110.09 79.8668C108.353 78.9108 106.79 77.5203 105.487 76.0429C102.969 73.0881 101.579 69.3512 101.319 65.9618C101.145 62.4856 102.187 59.3569 103.664 56.7498C105.14 54.1426 106.963 51.9699 108.7 50.2318C110.437 48.4937 112 47.0163 113.303 45.8865C115.821 43.54 117.297 42.2364 117.124 42.0626Z" fill="#8E9BAE"/>
 <path d="M267.701 168.685C267.701 168.685 279.859 163.818 286.719 169.033C293.579 174.247 253.807 187.37 232.098 188.413C255.718 181.2 265.704 177.115 265.704 177.115L267.701 168.685Z" fill="#8E9BAE"/>
-<path d="M215.946 136.095C210.475 121.061 208.738 124.276 204.657 122.712C197.797 120.018 186.334 118.019 186.334 118.019V99.1602L266.051 123.407L215.946 136.095Z" fill="#272729"/>
-<path d="M131.887 144.004L128.326 145.22L129.368 102.636L206.48 122.798L131.887 144.004Z" fill="#272729"/>
+<path d="M215.946 136.095C210.475 121.061 208.738 124.276 204.657 122.712C197.797 120.018 186.334 118.019 186.334 118.019V99.1602L266.051 123.407L215.946 136.095Z" fill="#24252A"/>
+<path d="M131.887 144.004L128.326 145.22L129.368 102.636L206.48 122.798L131.887 144.004Z" fill="#24252A"/>
 <path d="M131.885 144.004C132.232 145.133 147.255 141.31 166.707 135.834C167.662 135.574 168.617 135.313 169.573 134.965C170.528 134.705 171.483 134.444 172.438 134.183C191.89 128.621 206.652 123.928 206.392 122.799C206.131 121.843 191.022 125.493 171.57 130.968C170.615 131.228 169.659 131.489 168.704 131.837C167.749 132.098 166.794 132.358 165.839 132.619C146.387 138.268 131.538 143.048 131.885 144.004Z" fill="#8E9BAE"/>
 <path d="M206.393 144.003C205.872 144.003 205.524 149.392 205.264 158.517C205.177 163.036 205.09 168.511 205.003 174.681C205.003 180.417 204.916 186.848 204.916 193.714C203.18 194.148 201.443 194.67 199.619 195.191C198.056 195.626 196.493 196.06 194.93 196.495C193.367 196.929 191.804 197.364 190.241 197.798C174.523 202.231 160.716 206.141 150.816 209.183C140.917 212.225 135.012 214.31 135.185 214.832C135.359 215.353 141.438 214.05 151.511 211.529C161.584 209.009 175.478 205.359 191.196 201.014C192.759 200.579 194.322 200.145 195.885 199.71C197.448 199.276 199.011 198.841 200.574 198.407C203.18 197.711 205.785 196.929 208.303 196.234C208.303 192.149 208.216 188.152 208.216 184.415C208.129 181.025 208.129 177.81 208.043 174.681C207.956 168.511 207.782 163.123 207.608 158.517C207.261 149.392 206.827 144.003 206.393 144.003Z" fill="#8E9BAE"/>
 <path d="M129.889 216.744C130.062 216.223 123.723 214.05 113.129 210.922C102.535 207.793 87.6853 203.621 70.9256 199.015C69.1888 198.581 67.5389 198.146 65.889 197.625C64.239 197.19 62.5891 196.756 60.8524 196.234C58.0735 195.539 55.4684 194.757 52.8632 194.062C52.6896 187.022 52.5159 180.418 52.4291 174.508C52.2554 168.251 52.0817 162.689 51.8212 157.996C51.387 148.697 50.9528 143.222 50.4318 143.222C49.9976 143.222 49.6502 148.697 49.5634 157.996C49.4766 162.602 49.4766 168.164 49.4766 174.508C49.4766 177.637 49.4766 181.026 49.4766 184.502C49.4766 188.413 49.5634 192.411 49.5634 196.582C52.9501 197.538 56.3368 198.494 59.8971 199.45C61.6339 199.884 63.2838 200.319 64.9337 200.84C66.5837 201.275 68.2336 201.71 69.9704 202.231C86.817 206.75 101.666 210.661 112.434 213.268C123.202 215.875 129.715 217.266 129.889 216.744Z" fill="#8E9BAE"/>
diff --git a/frontend/public/request_placeholder.svg b/frontend/public/request_placeholder.svg
index 0f91ee46..6fb37fe0 100644
--- a/frontend/public/request_placeholder.svg
+++ b/frontend/public/request_placeholder.svg
@@ -17,7 +17,7 @@
 <path d="M58.375 49.1723L58.8496 87.0105C58.8496 87.8724 59.6694 88.4757 60.4892 88.2171L62.6034 87.6569C63.3801 87.4414 63.941 86.7519 63.941 85.9331V47.707" fill="white"/>
 <path d="M63.8968 47.707C63.5948 47.707 63.4222 51.8442 63.2928 58.7396C63.1633 65.5918 63.077 75.1591 63.077 85.9762C63.077 86.2778 62.9476 86.5364 62.6887 86.7088C62.6456 86.7519 62.5593 86.795 62.5161 86.8381C62.473 86.8381 62.4298 86.8812 62.4298 86.8812H62.3867L62.3004 86.9243L61.5237 87.1397L60.7471 87.3552L60.3588 87.4414L60.2725 87.4845H60.2293C60.1862 87.4845 60.1862 87.4845 60.143 87.4845C59.9704 87.4845 59.7547 87.3552 59.7115 87.1828C59.6253 81.8821 59.539 76.8829 59.4527 72.3579C59.3664 67.7466 59.2801 63.6525 59.1506 60.2479C58.9349 53.3957 58.676 49.2585 58.4171 49.2585C58.1582 49.2585 58.0288 53.4388 57.9425 60.291C57.8994 63.7387 57.8994 67.8328 57.9425 72.4441C57.9425 74.7281 57.9857 77.1846 57.9857 79.6842C57.9857 80.9339 57.9857 82.2268 58.0288 83.5628C58.0288 84.2092 58.0288 84.8988 58.0288 85.5452C58.0288 85.89 58.0288 86.1916 58.0288 86.5364V87.0536V87.1828V87.3983C58.0288 87.5276 58.072 87.6569 58.1151 87.7862C58.4171 88.6481 59.2801 89.2514 60.1862 89.2084C60.3156 89.2084 60.4019 89.2083 60.5313 89.1653L60.7039 89.1222L60.7902 89.0791L61.1786 88.9929L61.9552 88.7774L62.7318 88.5619L62.8181 88.5188L62.9476 88.4757C63.0339 88.4326 63.1202 88.3895 63.2065 88.3895C63.3791 88.3033 63.5516 88.2171 63.7242 88.0879C64.3283 87.6138 64.7598 86.8381 64.7598 86.0193C64.7598 75.2022 64.6735 65.6349 64.544 58.7827C64.3714 51.8442 64.1557 47.707 63.8968 47.707Z" fill="#8E9BAE"/>
 <path d="M59.3685 89.079L55.9168 87.8292C55.1833 87.6137 54.6655 86.9673 54.6655 86.1916L54.3203 50.2927L58.3761 49.2153L59.3685 89.079Z" fill="#8E9BAE"/>
-<path d="M27.0527 45.4228V33.5284C27.0527 27.2795 29.8142 21.4615 34.3877 20.2118C41.205 18.3586 49.1872 26.4176 49.1872 39.4756" fill="#272729"/>
+<path d="M27.0527 45.4228V33.5284C27.0527 27.2795 29.8142 21.4615 34.3877 20.2118C41.205 18.3586 49.1872 26.4176 49.1872 39.4756" fill="#24252A"/>
 <path d="M49.233 51.6291C49.5351 51.6291 49.7077 48.2246 49.8371 42.6221C49.8371 41.1999 49.9234 39.6916 49.8803 37.9677C49.8371 36.287 49.6214 34.4339 49.1899 32.5377C48.7584 30.6415 48.0681 28.7021 47.0757 26.8059C46.0402 24.9097 44.7026 23.0566 42.8473 21.5913C42.1138 20.988 41.294 20.4708 40.431 20.083C39.5681 19.6951 38.662 19.3503 37.6696 19.221C36.4615 19.0487 35.2102 19.0918 34.0884 19.4365C32.9234 19.7382 31.8879 20.3846 31.0249 21.1173C29.2991 22.5825 28.2635 24.4787 27.5732 26.3319C26.8828 28.185 26.5808 30.0381 26.4513 31.7188C26.4513 31.9343 26.4082 32.1498 26.4082 32.3653C26.4082 32.5808 26.4082 32.7962 26.4082 33.0117C26.4082 33.4427 26.4082 33.8305 26.4082 34.2184C26.4082 34.9941 26.4513 35.7268 26.4513 36.4163C26.5808 42.0188 26.7965 45.4233 27.0554 45.4233C27.3143 45.4233 27.53 42.0188 27.6595 36.4163C27.7026 35.0372 27.6595 33.4427 27.8321 31.8481C28.0046 30.2536 28.3067 28.5298 28.997 26.8921C29.6442 25.2545 30.6366 23.5737 32.1036 22.367C32.8371 21.7637 33.6569 21.2896 34.563 21.0311C35.4691 20.7725 36.4615 20.7294 37.4539 20.8587C38.2305 20.988 39.0072 21.2466 39.7407 21.5913C40.4742 21.9361 41.1645 22.367 41.8117 22.8842C43.4513 24.1771 44.7026 25.8578 45.6518 27.5816C46.6011 29.3055 47.2483 31.1586 47.7229 32.9255C48.1544 34.6925 48.4133 36.4163 48.4995 38.0539C48.5858 39.6485 48.5858 41.243 48.629 42.6221C48.7584 48.2246 48.9742 51.6291 49.233 51.6291Z" fill="#8E9BAE"/>
 <path d="M27.0557 45.4226C26.8831 45.9828 31.2841 47.4481 37.0658 49.0858C37.3679 49.1719 37.6267 49.2581 37.9288 49.3443C38.2308 49.4305 38.4897 49.5167 38.7917 49.6029C44.5734 51.1974 49.1039 52.2317 49.2333 51.6715C49.3628 51.1544 45.0049 49.6891 39.2232 48.0084C38.9212 47.9222 38.6623 47.836 38.3602 47.7498C38.0582 47.6636 37.7993 47.5774 37.4973 47.4912C31.7156 45.8967 27.1851 44.9055 27.0557 45.4226Z" fill="#8E9BAE"/>
 <path d="M49.23 51.6287C49.3163 51.8873 53.027 51.1116 59.197 49.6032C62.2604 48.8275 65.9711 47.9225 70.0701 46.8451C74.3848 45.7246 79.1741 44.4748 84.2655 43.1388C84.2655 42.4924 84.2655 41.8029 84.2655 41.1133C84.2655 40.079 84.2655 39.0447 84.2655 38.0104C84.2655 36.9761 84.2655 35.9418 84.2655 34.9075C84.2655 33.1406 84.2655 31.4168 84.2224 29.6929C84.1792 27.9691 84.0066 26.2453 83.7046 24.6507C83.0574 21.4185 81.8493 18.488 80.2528 16.1177C78.6132 13.7475 76.5422 11.9805 74.3848 11.0324C73.3061 10.5584 72.2274 10.2998 71.2351 10.2567C70.2427 10.2136 69.2934 10.3429 68.5168 10.6015C65.7554 11.4634 64.2021 12.0236 64.2884 12.196C64.3315 12.3684 65.928 12.0667 68.7757 11.4203C69.466 11.2479 70.2858 11.2048 71.1919 11.291C72.0549 11.3772 73.0041 11.6358 73.9533 12.1098C75.8518 13.0148 77.664 14.6956 79.131 16.8935C80.5548 19.1345 81.6767 21.8926 82.2376 24.9524C82.5396 26.5038 82.6691 28.0984 82.7122 29.736C82.7122 31.4168 82.7122 33.1406 82.7122 34.9075C82.7122 35.9418 82.7122 36.9761 82.7122 38.0104C82.7122 39.0447 82.7122 40.079 82.7122 41.1133C82.7122 41.3288 82.7122 41.5874 82.7122 41.8029V41.846C78.0955 43.0957 73.7376 44.3024 69.8112 45.3798C65.7122 46.5003 62.0447 47.5346 58.9813 48.4396C52.8112 50.2066 49.1437 51.4133 49.23 51.6287Z" fill="#8E9BAE"/>
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 020b33a8..aae9b85a 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -10,6 +10,14 @@ export default {
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
+    screens: {
+      sm: '640px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+      '3xl': '2560px', // Ultra-wide and 4K displays
+    },
     extend: {
       colors: {
         background: 'hsl(var(--background))',