diff --git a/src/components/layout/DashboardGrid.jsx b/src/components/layout/DashboardGrid.tsx
similarity index 81%
rename from src/components/layout/DashboardGrid.jsx
rename to src/components/layout/DashboardGrid.tsx
index 57294bec..8288a4a4 100644
--- a/src/components/layout/DashboardGrid.jsx
+++ b/src/components/layout/DashboardGrid.tsx
@@ -4,6 +4,33 @@ import { useResponsive } from '../../hooks/useResponsive';
 import { useErrorHandler } from '../../hooks/useErrorHandler';
 import { addBreadcrumb } from '../../lib/errorReporting';
 
+export interface Widget {
+  id: string;
+  type?: string;
+  component: React.ReactNode;
+  width?: number;
+  height?: number;
+  span?: number;
+}
+
+export interface GridColumns {
+  mobile: number;
+  tablet: number;
+  desktop: number;
+}
+
+export interface DashboardGridProps {
+  widgets?: Widget[];
+  onLayoutChange?: (layout: Widget[]) => void;
+  onWidgetResize?: (widget: Widget, size: { height: number; span: number }) => void;
+  onWidgetRemove?: (widget: Widget) => void;
+  editable?: boolean;
+  columns?: GridColumns;
+  gap?: number;
+  minWidgetHeight?: number;
+  rowHeight?: number;
+}
+
 /**
  * Customizable responsive dashboard grid with drag-and-drop and resizable widgets.
  * Width resizing persists as a grid column span so layouts stay fluid at every breakpoint.
@@ -18,18 +45,25 @@ export default function DashboardGrid({
   gap = 16,
   minWidgetHeight = 200,
   rowHeight = 80,
-}) {
-  const [layout, setLayout] = useState(widgets);
-  const [draggedWidget, setDraggedWidget] = useState(null);
-  const [dragOverIndex, setDragOverIndex] = useState(null);
-  const [resizingWidget, setResizingWidget] = useState(null);
+}: DashboardGridProps) {
+  const [layout, setLayout] = useState<Widget[]>(widgets);
+  const [draggedWidget, setDraggedWidget] = useState<{ widget: Widget; index: number } | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
+  const [resizingWidget, setResizingWidget] = useState<{ widget: Widget; index: number, initialSpan: number } | null>(null);
   const [resizeStartPos, setResizeStartPos] = useState({ x: 0, y: 0 });
   const [resizeStartSize, setResizeStartSize] = useState({ width: 0, height: 0 });
 
-  const gridRef = useRef(null);
-  const { isMobile, isTablet } = useResponsive();
+  const gridRef = useRef<HTMLDivElement>(null);
+  const { isMobile, isTablet } = useResponsive() as { isMobile: boolean; isTablet: boolean };
   const { handleError } = useErrorHandler('DashboardGrid');
 
+  // Get responsive column count
+  const getColumnCount = (): number => {
+    if (isMobile) return columns.mobile;
+    if (isTablet) return columns.tablet;
+    return columns.desktop;
+  };
+
   useEffect(() => {
     setLayout(widgets);
   }, [widgets]);
@@ -48,7 +82,8 @@ export default function DashboardGrid({
     return (gridWidth - gap * (columnCount - 1)) / columnCount;
   }, [columnCount, gap]);
 
-  const updateLayout = useCallback((newLayout) => {
+  // Handle layout changes
+  const updateLayout = useCallback((newLayout: Widget[]) => {
     setLayout(newLayout);
     onLayoutChange?.(newLayout);
     addBreadcrumb('Dashboard layout updated', 'user_action', {
@@ -57,13 +92,13 @@ export default function DashboardGrid({
     });
   }, [onLayoutChange, editable]);
 
-  const handleDragStart = (event, widget, index) => {
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>, widget: Widget, index: number) => {
     if (!editable) return;
 
     setDraggedWidget({ widget, index });
     event.dataTransfer.effectAllowed = 'move';
-    event.dataTransfer.setData('text/plain', widget.id);
-    event.currentTarget.style.opacity = '0.5';
+    event.dataTransfer.setData('text/html', (event.target as HTMLElement).outerHTML);
+    (event.currentTarget as HTMLElement).style.opacity = '0.5';
 
     addBreadcrumb('Widget drag started', 'user_action', {
       widgetId: widget.id,
@@ -71,13 +106,13 @@ export default function DashboardGrid({
     });
   };
 
-  const handleDragEnd = (event) => {
-    event.currentTarget.style.opacity = '1';
+  const handleDragEnd = (e: React.DragEvent<HTMLDivElement>) => {
+    (event.currentTarget as HTMLElement).style.opacity = '1';
     setDraggedWidget(null);
     setDragOverIndex(null);
   };
 
-  const handleDragOver = (event, index) => {
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>, index: number) => {
     if (!editable || !draggedWidget) return;
 
     event.preventDefault();
@@ -85,7 +120,7 @@ export default function DashboardGrid({
     setDragOverIndex(index);
   };
 
-  const handleDrop = (event, dropIndex) => {
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>, dropIndex: number) => {
     if (!editable || !draggedWidget) return;
 
     event.preventDefault();
@@ -107,13 +142,13 @@ export default function DashboardGrid({
     });
   };
 
-  const handleResizeStart = (event, widget, index) => {
+  const handleResizeStart = (event: React.MouseEvent<HTMLButtonElement>, widget: Widget, index: number) => {
     if (!editable) return;
 
     event.preventDefault();
     event.stopPropagation();
 
-    const rect = event.currentTarget.closest('.widget-container').getBoundingClientRect();
+    const rect = ((event.currentTarget as HTMLElement).closest('.widget-container') as HTMLElement).getBoundingClientRect();
     setResizingWidget({
       widget,
       index,
@@ -127,7 +162,7 @@ export default function DashboardGrid({
     });
   };
 
-  const handleResizeMove = useCallback((event) => {
+  const handleResizeMove = useCallback((event: MouseEvent) => {
     if (!resizingWidget) return;
 
     const deltaX = event.clientX - resizeStartPos.x;
@@ -140,7 +175,7 @@ export default function DashboardGrid({
     const nextSpan = clampSpan(spanFromWidth);
     const nextHeight = Math.max(minWidgetHeight, Math.round(resizeStartSize.height + deltaY));
 
-    const widgetElement = document.querySelector(`[data-widget-id="${resizingWidget.widget.id}"]`);
+    const widgetElement = document.querySelector(`[data-widget-id="${resizingWidget.widget.id}"]`) as HTMLElement;
     if (widgetElement) {
       widgetElement.style.gridColumn = `span ${nextSpan}`;
       widgetElement.style.height = `${nextHeight}px`;
@@ -161,7 +196,7 @@ export default function DashboardGrid({
     if (!resizingWidget) return;
 
     try {
-      const widgetElement = document.querySelector(`[data-widget-id="${resizingWidget.widget.id}"]`);
+      const widgetElement = document.querySelector(`[data-widget-id="${resizingWidget.widget.id}"]`) as HTMLElement;
       if (!widgetElement) return;
 
       const rect = widgetElement.getBoundingClientRect();
@@ -170,7 +205,7 @@ export default function DashboardGrid({
         ? clampSpan(Math.round((rect.width + gap) / (columnWidth + gap)))
         : resizingWidget.initialSpan;
       const nextHeight = Math.max(minWidgetHeight, Math.round(rect.height));
-      const updatedWidget = {
+      const updatedWidget: Widget = {
         ...resizingWidget.widget,
         span: nextSpan,
         height: nextHeight,
@@ -216,7 +251,8 @@ export default function DashboardGrid({
     };
   }, [resizingWidget, handleResizeMove, handleResizeEnd]);
 
-  const handleRemoveWidget = (widget, index) => {
+  // Remove widget
+  const handleRemoveWidget = (widget: Widget, index: number) => {
     if (!editable) return;
 
     const newLayout = layout.filter((_, i) => i !== index);
@@ -225,11 +261,11 @@ export default function DashboardGrid({
 
     addBreadcrumb('Widget removed', 'user_action', {
       widgetId: widget.id,
-      widgetType: widget.type,
+      widgetType: widget.type
     });
   };
 
-  const gridStyles = {
+  const gridStyles: React.CSSProperties = {
     display: 'grid',
     gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
     gridAutoRows: `${rowHeight}px`,
@@ -242,11 +278,11 @@ export default function DashboardGrid({
     transition: 'grid-template-columns 180ms ease, gap 180ms ease',
   };
 
-  const getWidgetStyles = (widget, index) => {
+  const getWidgetStyles = (widget: Widget, index: number): React.CSSProperties => {
     const height = Math.max(Number(widget.height) || minWidgetHeight, minWidgetHeight);
     const rowSpan = Math.max(1, Math.ceil((height + gap) / (rowHeight + gap)));
     const isResizing = resizingWidget?.index === index;
-    const baseStyles = {
+    const baseStyles: React.CSSProperties = {
       position: 'relative',
       minHeight: `${minWidgetHeight}px`,
       background: 'var(--bg-card)',
@@ -316,7 +352,7 @@ export default function DashboardGrid({
                 gap: '4px',
                 zIndex: 10,
                 opacity: 0,
-                transition: 'opacity var(--transition)',
+                transition: 'opacity var(--transition)'
               }}
               className="widget-controls"
             >
@@ -368,11 +404,6 @@ export default function DashboardGrid({
             {widget.component}
           </div>
 
-          <style jsx>{`
-            .widget-container:hover .widget-controls {
-              opacity: 1;
-            }
-          `}</style>
         </div>
       ))}
 
diff --git a/src/components/layout/MobileHeader.jsx b/src/components/layout/MobileHeader.tsx
similarity index 73%
rename from src/components/layout/MobileHeader.jsx
rename to src/components/layout/MobileHeader.tsx
index d136c3a2..d33e358a 100644
--- a/src/components/layout/MobileHeader.jsx
+++ b/src/components/layout/MobileHeader.tsx
@@ -6,7 +6,7 @@ export default function MobileHeader() {
   const { isMobileMenuOpen, setMobileMenuOpen, theme, toggleTheme } = useStore()
 
   return (
-    <header 
+    <header
       className="mobile-only"
       style={{
         position: 'fixed',
@@ -42,19 +42,19 @@ export default function MobileHeader() {
           justifyContent: 'center',
           transition: 'var(--transition)',
         }}
-        onMouseEnter={e => {
-          e.currentTarget.style.color = 'var(--text-primary)'
-          e.currentTarget.style.background = 'var(--bg-hover)'
+        onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {
+          e.currentTarget.style.color = 'var(--text-primary)';
+          e.currentTarget.style.background = 'var(--bg-hover)';
         }}
-        onMouseLeave={e => {
-          e.currentTarget.style.color = 'var(--text-secondary)'
-          e.currentTarget.style.background = 'transparent'
+        onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {
+          e.currentTarget.style.color = 'var(--text-secondary)';
+          e.currentTarget.style.background = 'transparent';
         }}
       >
         <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-          <line x1="3" y1="6" x2="21" y2="6"/>
-          <line x1="3" y1="12" x2="21" y2="12"/>
-          <line x1="3" y1="18" x2="21" y2="18"/>
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
         </svg>
       </button>
 
@@ -75,7 +75,7 @@ export default function MobileHeader() {
 
       <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
         <NetworkIndicator compact />
-
+      </div>
       {/* Theme toggle */}
       <button
         onClick={toggleTheme}
@@ -92,17 +92,17 @@ export default function MobileHeader() {
           transition: 'var(--transition)',
         }}
         title={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
-        onMouseEnter={e => {
-          e.currentTarget.style.color = 'var(--text-primary)'
-          e.currentTarget.style.background = 'var(--bg-hover)'
+        onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {
+          e.currentTarget.style.color = 'var(--text-primary)';
+          e.currentTarget.style.background = 'var(--bg-hover)';
         }}
-        onMouseLeave={e => {
-          e.currentTarget.style.color = 'var(--text-secondary)'
-          e.currentTarget.style.background = 'transparent'
+        onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {
+          e.currentTarget.style.color = 'var(--text-secondary)';
+          e.currentTarget.style.background = 'transparent';
         }}
       >
         {theme === 'light' ? '☾' : '☀'}
       </button>
     </header>
-  )
+  );
 }
\ No newline at end of file
diff --git a/src/components/layout/MobileNavigation.jsx b/src/components/layout/MobileNavigation.tsx
similarity index 80%
rename from src/components/layout/MobileNavigation.jsx
rename to src/components/layout/MobileNavigation.tsx
index 023e2f42..2d74bf96 100644
--- a/src/components/layout/MobileNavigation.jsx
+++ b/src/components/layout/MobileNavigation.tsx
@@ -1,15 +1,21 @@
-import React from 'react'
+import React from 'react';
+import { useStore } from '../../lib/store';
 import { useNavigate } from 'react-router-dom'
-import { useStore } from '../../lib/store'
+
+interface NavItem {
+  id: string;
+  label: string;
+  icon: string;
+}
 
 // Mirrors the most-used tabs; full nav is in the sidebar (hamburger menu).
-const QUICK_NAV = [
-  { id: 'overview',      label: 'Home',    icon: '◈' },
-  { id: 'transactions',  label: 'Txns',    icon: '⇄' },
-  { id: 'dex',           label: 'DEX',     icon: '⇌' },
-  { id: 'wallet',        label: 'Wallet',  icon: '⊡' },
-  { id: 'settings',      label: 'More',    icon: '⚙' },
-]
+const QUICK_NAV: NavItem[] = [
+  { id: 'overview',      label: 'Home',     icon: '◈' },
+  { id: 'transactions',  label: 'Txns',     icon: '⇄' },
+  { id: 'dex',           label: 'DEX',      icon: '⇌' },
+  { id: 'wallet',        label: 'Wallet',   icon: '⊡' },
+  { id: 'settings',      label: 'More', icon: '⚙' },
+];
 
 export default function MobileNavigation() {
   const { activeTab, setActiveTab } = useStore()
@@ -27,7 +33,7 @@ export default function MobileNavigation() {
       aria-label="Quick navigation"
     >
       {QUICK_NAV.map((item) => {
-        const isActive = activeTab === item.id
+        const isActive = activeTab === item.id;
         return (
           <button
             key={item.id}
@@ -50,7 +56,6 @@ export default function MobileNavigation() {
               cursor: 'pointer',
               transition: 'color 180ms ease, transform 100ms ease',
               padding: '4px 0',
-              position: 'relative',
             }}
             onTouchStart={e => { e.currentTarget.style.transform = 'scale(0.92)' }}
             onTouchEnd={e => { e.currentTarget.style.transform = '' }}
@@ -72,8 +77,8 @@ export default function MobileNavigation() {
               }} />
             )}
           </button>
-        )
+        );
       })}
     </nav>
-  )
-}
+  );
+}
\ No newline at end of file
diff --git a/src/components/layout/MobileSidebar.jsx b/src/components/layout/MobileSidebar.tsx
similarity index 96%
rename from src/components/layout/MobileSidebar.jsx
rename to src/components/layout/MobileSidebar.tsx
index cfec292f..83313c6b 100644
--- a/src/components/layout/MobileSidebar.jsx
+++ b/src/components/layout/MobileSidebar.tsx
@@ -11,7 +11,13 @@ import { useNavigate } from "react-router-dom";
 import { useStore } from "../../lib/store";
 import { useSwipeGesture } from "../../hooks/useSwipeGesture";
 
-const NAV_ITEMS = [
+interface NavItem {
+  id: string;
+  label: string;
+  icon: string;
+}
+
+const NAV_ITEMS: NavItem[] = [
   { id: "overview", label: "Overview", icon: "◈" },
   { id: "account", label: "Account", icon: "◉" },
   { id: "compare", label: "Compare", icon: "◫" },
@@ -79,7 +85,7 @@ export default function MobileSidebar() {
   const navigate = useNavigate();
   const { activeTab, isMobileMenuOpen, setMobileMenuOpen, theme, toggleTheme, network } =
     useStore();
-  const drawerRef = useRef(null);
+  const drawerRef = useRef<HTMLElement>(null);
 
   const close = useCallback(() => setMobileMenuOpen(false), [setMobileMenuOpen]);
 
@@ -104,7 +110,7 @@ export default function MobileSidebar() {
   // Close on Escape
   useEffect(() => {
     if (!isMobileMenuOpen) return;
-    const handler = (e) => { if (e.key === "Escape") close(); };
+    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") close(); };
     document.addEventListener("keydown", handler);
     return () => document.removeEventListener("keydown", handler);
   }, [isMobileMenuOpen, close]);
@@ -112,7 +118,7 @@ export default function MobileSidebar() {
   // Focus first nav item when opening
   useEffect(() => {
     if (!isMobileMenuOpen) return;
-    const first = drawerRef.current?.querySelector("button, a");
+    const first = drawerRef.current?.querySelector("button, a") as HTMLElement | null;
     first?.focus();
   }, [isMobileMenuOpen]);
 
@@ -276,4 +282,4 @@ export default function MobileSidebar() {
       </nav>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/layout/ResponsiveContainer.jsx b/src/components/layout/ResponsiveContainer.jsx
deleted file mode 100644
index 65d33e63..00000000
--- a/src/components/layout/ResponsiveContainer.jsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React from 'react'
-import { useResponsive } from '../../hooks/useResponsive'
-
-export default function ResponsiveContainer({ 
-  children, 
-  className = '',
-  mobileLayout = false,
-  tabletLayout = false,
-  style = {},
-  ...props 
-}) {
-  const { isMobile, isTablet } = useResponsive()
-
-  const getResponsiveStyles = () => {
-    const baseStyles = {
-      width: '100%',
-      ...style,
-    }
-
-    if (isMobile && mobileLayout) {
-      return {
-        ...baseStyles,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '12px',
-      }
-    }
-
-    if (isTablet && tabletLayout) {
-      return {
-        ...baseStyles,
-        display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
-        gap: '16px',
-      }
-    }
-
-    return baseStyles
-  }
-
-  const getResponsiveClassName = () => {
-    let classes = className
-    
-    if (isMobile) {
-      classes += ' mobile-layout'
-    }
-    
-    if (isTablet) {
-      classes += ' tablet-layout'
-    }
-    
-    return classes.trim()
-  }
-
-  return (
-    <div 
-      className={getResponsiveClassName()}
-      style={getResponsiveStyles()}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-// Responsive grid component
-export function ResponsiveGrid({ 
-  children, 
-  columns = { mobile: 1, tablet: 2, desktop: 3 },
-  gap = { mobile: '12px', tablet: '16px', desktop: '20px' },
-  className = '',
-  style = {},
-  ...props 
-}) {
-  const { isMobile, isTablet } = useResponsive()
-
-  const getGridStyles = () => {
-    let gridColumns = columns.desktop
-    let gridGap = gap.desktop
-
-    if (isMobile) {
-      gridColumns = columns.mobile
-      gridGap = gap.mobile
-    } else if (isTablet) {
-      gridColumns = columns.tablet
-      gridGap = gap.tablet
-    }
-
-    return {
-      display: 'grid',
-      gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
-      gap: gridGap,
-      width: '100%',
-      ...style,
-    }
-  }
-
-  return (
-    <div 
-      className={`responsive-grid ${className}`}
-      style={getGridStyles()}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-// Responsive flex component
-export function ResponsiveFlex({ 
-  children, 
-  direction = { mobile: 'column', tablet: 'row', desktop: 'row' },
-  gap = { mobile: '12px', tablet: '16px', desktop: '20px' },
-  align = 'stretch',
-  justify = 'flex-start',
-  className = '',
-  style = {},
-  ...props 
-}) {
-  const { isMobile, isTablet } = useResponsive()
-
-  const getFlexStyles = () => {
-    let flexDirection = direction.desktop
-    let flexGap = gap.desktop
-
-    if (isMobile) {
-      flexDirection = direction.mobile
-      flexGap = gap.mobile
-    } else if (isTablet) {
-      flexDirection = direction.tablet
-      flexGap = gap.tablet
-    }
-
-    return {
-      display: 'flex',
-      flexDirection,
-      gap: flexGap,
-      alignItems: align,
-      justifyContent: justify,
-      width: '100%',
-      ...style,
-    }
-  }
-
-  return (
-    <div 
-      className={`responsive-flex ${className}`}
-      style={getFlexStyles()}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/src/components/layout/ResponsiveContainer.tsx b/src/components/layout/ResponsiveContainer.tsx
new file mode 100644
index 00000000..46ea796d
--- /dev/null
+++ b/src/components/layout/ResponsiveContainer.tsx
@@ -0,0 +1,186 @@
+import React, { ReactNode } from 'react';
+import { useResponsive } from '../../hooks/useResponsive';
+
+type ResponsiveSpacing = { mobile: string | number; tablet: string | number; desktop: string | number };
+type ResponsiveColumns = { mobile: number; tablet: number; desktop: number };
+type ResponsiveDirection = { mobile: React.CSSProperties['flexDirection']; tablet: React.CSSProperties['flexDirection']; desktop: React.CSSProperties['flexDirection'] };
+
+export interface ResponsiveContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  className?: string;
+  mobileLayout?: boolean;
+  tabletLayout?: boolean;
+  style?: React.CSSProperties;
+}
+
+export function ResponsiveContainer({ 
+  children, 
+  className = '',
+  mobileLayout = false,
+  tabletLayout = false,
+  style = {},
+  ...props 
+}: ResponsiveContainerProps) {
+  const { isMobile, isTablet } = useResponsive() as { isMobile: boolean; isTablet: boolean };
+
+  const getResponsiveStyles = (): React.CSSProperties => {
+    const baseStyles: React.CSSProperties = {
+      width: '100%',
+      ...style,
+    };
+
+    if (isMobile && mobileLayout) {
+      return {
+        ...baseStyles,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+      };
+    }
+
+    if (isTablet && tabletLayout) {
+      return {
+        ...baseStyles,
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
+        gap: '16px',
+      };
+    }
+
+    return baseStyles;
+  };
+
+  const getResponsiveClassName = () => {
+    let classes = className;
+    
+    if (isMobile) {
+      classes += ' mobile-layout';
+    }
+    
+    if (isTablet) {
+      classes += ' tablet-layout';
+    }
+    
+    return classes.trim();
+  };
+
+  return (
+    <div 
+      className={getResponsiveClassName()}
+      style={getResponsiveStyles()}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface ResponsiveGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  columns?: ResponsiveColumns;
+  gap?: ResponsiveSpacing;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+// Responsive grid component
+export function ResponsiveGrid({ 
+  children, 
+  columns = { mobile: 1, tablet: 2, desktop: 3 },
+  gap = { mobile: '12px', tablet: '16px', desktop: '20px' },
+  className = '',
+  style = {},
+  ...props 
+}: ResponsiveGridProps) {
+  const { isMobile, isTablet } = useResponsive() as { isMobile: boolean; isTablet: boolean };
+
+  const getGridStyles = (): React.CSSProperties => {
+    let gridColumns = columns.desktop;
+    let gridGap = gap.desktop;
+
+    if (isMobile) {
+      gridColumns = columns.mobile;
+      gridGap = gap.mobile;
+    } else if (isTablet) {
+      gridColumns = columns.tablet;
+      gridGap = gap.tablet;
+    }
+
+    return {
+      display: 'grid',
+      gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+      gap: gridGap,
+      width: '100%',
+      ...style,
+    };
+  };
+
+  return (
+    <div 
+      className={`responsive-grid ${className}`}
+      style={getGridStyles()}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export interface ResponsiveFlexProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  direction?: ResponsiveDirection;
+  gap?: ResponsiveSpacing;
+  align?: React.CSSProperties['alignItems'];
+  justify?: React.CSSProperties['justifyContent'];
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+// Responsive flex component
+export function ResponsiveFlex({ 
+  children, 
+  direction = { mobile: 'column', tablet: 'row', desktop: 'row' },
+  gap = { mobile: '12px', tablet: '16px', desktop: '20px' },
+  align = 'stretch',
+  justify = 'flex-start',
+  className = '',
+  style = {},
+  ...props 
+}: ResponsiveFlexProps) {
+  const { isMobile, isTablet } = useResponsive() as { isMobile: boolean; isTablet: boolean };
+
+  const getFlexStyles = (): React.CSSProperties => {
+    let flexDirection = direction.desktop;
+    let flexGap = gap.desktop;
+
+    if (isMobile) {
+      flexDirection = direction.mobile;
+      flexGap = gap.mobile;
+    } else if (isTablet) {
+      flexDirection = direction.tablet;
+      flexGap = gap.tablet;
+    }
+
+    return {
+      display: 'flex',
+      flexDirection,
+      gap: flexGap,
+      alignItems: align,
+      justifyContent: justify,
+      width: '100%',
+      ...style,
+    };
+  };
+
+  return (
+    <div 
+      className={`responsive-flex ${className}`}
+      style={getFlexStyles()}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default ResponsiveContainer;
\ No newline at end of file
diff --git a/src/components/layout/ResponsiveSidebar.jsx b/src/components/layout/ResponsiveSidebar.tsx
similarity index 65%
rename from src/components/layout/ResponsiveSidebar.jsx
rename to src/components/layout/ResponsiveSidebar.tsx
index dcd8ef88..cf4cab67 100644
--- a/src/components/layout/ResponsiveSidebar.jsx
+++ b/src/components/layout/ResponsiveSidebar.tsx
@@ -3,14 +3,14 @@
  * On mobile: renders as a slide-in drawer controlled by isMobileMenuOpen.
  * On desktop: renders as a fixed sidebar.
  */
-import React from 'react'
-import { useStore } from '../../lib/store'
-import { useResponsive } from '../../hooks/useResponsive'
-import Sidebar from './Sidebar'
+import React from 'react';
+import { useStore } from '../../lib/store';
+import { useResponsive } from '../../hooks/useResponsive';
+import Sidebar from './Sidebar';
 
 export default function ResponsiveSidebar() {
-  const { isMobileMenuOpen, setMobileMenuOpen } = useStore()
-  const { isMobile } = useResponsive()
+  const { isMobileMenuOpen, setMobileMenuOpen } = useStore();
+  const { isMobile } = useResponsive() as { isMobile: boolean };
 
   return (
     <>
@@ -24,5 +24,5 @@ export default function ResponsiveSidebar() {
       )}
       <Sidebar isMobile={isMobile} />
     </>
-  )
-}
+  );
+}
\ No newline at end of file
diff --git a/src/components/layout/SearchBar.jsx b/src/components/layout/SearchBar.tsx
similarity index 84%
rename from src/components/layout/SearchBar.jsx
rename to src/components/layout/SearchBar.tsx
index d1fa69eb..313af64f 100644
--- a/src/components/layout/SearchBar.jsx
+++ b/src/components/layout/SearchBar.tsx
@@ -2,7 +2,19 @@ import React, { useMemo, useState } from "react";
 import { Search, Save, X } from "lucide-react";
 import { useSearch } from "../../hooks/useSearch";
 
-export default function SearchBar({ onSelectResult }) {
+export interface SearchResult {
+  id: string;
+  label: string;
+  type: string;
+  meta?: string;
+  [key: string]: any;
+}
+
+export interface SearchBarProps {
+  onSelectResult?: (result: SearchResult) => void;
+}
+
+export default function SearchBar({ onSelectResult }: SearchBarProps) {
   const {
     query,
     setQuery,
@@ -12,8 +24,9 @@ export default function SearchBar({ onSelectResult }) {
     removeSavedSearch,
     applySavedSearch,
   } = useSearch();
-  const [nameInput, setNameInput] = useState("");
-  const [open, setOpen] = useState(false);
+  
+  const [nameInput, setNameInput] = useState<string>("");
+  const [open, setOpen] = useState<boolean>(false);
 
   const showResults = open && query.trim().length > 0;
   const hasResults = results.length > 0;
@@ -44,7 +57,7 @@ export default function SearchBar({ onSelectResult }) {
           value={query}
           onFocus={() => setOpen(true)}
           onBlur={() => setTimeout(() => setOpen(false), 120)}
-          onChange={(event) => setQuery(event.target.value)}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => setQuery(event.target.value)}
           placeholder="Search transactions, operations, and account data"
           style={{
             width: "100%",
@@ -67,6 +80,7 @@ export default function SearchBar({ onSelectResult }) {
             padding: "5px",
             display: "flex",
             alignItems: "center",
+            cursor: 'pointer'
           }}
         >
           <Save size={14} />
@@ -76,7 +90,7 @@ export default function SearchBar({ onSelectResult }) {
       <div style={{ display: "flex", gap: "8px", marginTop: "6px", alignItems: "center" }}>
         <input
           value={nameInput}
-          onChange={(event) => setNameInput(event.target.value)}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => setNameInput(event.target.value)}
           placeholder="Saved search name"
           style={{
             border: "1px solid var(--border)",
@@ -91,7 +105,7 @@ export default function SearchBar({ onSelectResult }) {
         />
 
         <div style={{ display: "flex", gap: "6px", flexWrap: "wrap" }}>
-          {topSaved.map((entry) => (
+          {topSaved.map((entry: any) => (
             <span
               key={entry.name}
               style={{
@@ -114,6 +128,7 @@ export default function SearchBar({ onSelectResult }) {
                   color: "inherit",
                   fontSize: "11px",
                   fontFamily: "var(--font-mono)",
+                  cursor: 'pointer'
                 }}
               >
                 {entry.name}
@@ -126,6 +141,7 @@ export default function SearchBar({ onSelectResult }) {
                   color: "var(--text-muted)",
                   display: "flex",
                   alignItems: "center",
+                  cursor: 'pointer'
                 }}
               >
                 <X size={11} />
@@ -156,7 +172,7 @@ export default function SearchBar({ onSelectResult }) {
               No results for this query.
             </div>
           )}
-          {results.map((result) => (
+          {results.map((result: SearchResult) => (
             <button
               key={result.id}
               onClick={() => onSelectResult?.(result)}
@@ -170,7 +186,10 @@ export default function SearchBar({ onSelectResult }) {
                 display: "flex",
                 flexDirection: "column",
                 gap: "4px",
+                cursor: 'pointer'
               }}
+              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
             >
               <span style={{ color: "var(--text-primary)", fontSize: "12px", fontFamily: "var(--font-mono)" }}>
                 {result.label}
@@ -184,4 +203,4 @@ export default function SearchBar({ onSelectResult }) {
       )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/layout/Sidebar.jsx b/src/components/layout/Sidebar.tsx
similarity index 83%
rename from src/components/layout/Sidebar.jsx
rename to src/components/layout/Sidebar.tsx
index 0c00f203..1a892bb3 100644
--- a/src/components/layout/Sidebar.jsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,13 +1,20 @@
-import React, { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { useStore } from '../../lib/store'
-import CopyableValue from '../dashboard/CopyableValue'
-import { NETWORKS, updateCustomNetworkConfig, switchToCustomProfile, loadCustomNetworkProfiles } from '../../lib/stellar'
-import { getActiveProfile } from '../../lib/userPreferences'
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useStore } from '../../lib/store';
+import CopyableValue from '../dashboard/CopyableValue';
+import { NETWORKS, updateCustomNetworkConfig, switchToCustomProfile, loadCustomNetworkProfiles } from '../../lib/stellar';
+import { getActiveProfile } from '../../lib/userPreferences';
 
-const SESSION_API_KEY = 'stellar_custom_api_key'
+const SESSION_API_KEY = 'stellar_custom_api_key';
 
-const NAV_ITEMS = [
+interface NavItem {
+  id?: string;
+  type?: 'header' | 'link';
+  label: string;
+  icon?: string;
+}
+
+const NAV_ITEMS: NavItem[] = [
   { type: 'header', label: 'ANALYTICS' },
   { id: 'overview', label: 'Overview', icon: '◈' },
   { id: 'account', label: 'Account', icon: '◉' },
@@ -50,10 +57,22 @@ const NAV_ITEMS = [
   { id: 'dataExport', label: 'Export', icon: '⬇' },
   { id: 'settings', label: 'Settings', icon: '⚙' },
   { id: 'audit', label: 'Audit', icon: '⊟' },
-]
+];
+
+export interface SidebarProps {
+  isMobile?: boolean;
+}
 
-export default function Sidebar({ isMobile = false }) {
-  const navigate = useNavigate()
+export interface CustomProfile {
+  id: string;
+  name: string;
+  horizonUrl: string;
+  sorobanUrl?: string;
+  passphrase: string;
+}
+
+export default function Sidebar({ isMobile = false }: SidebarProps) {
+  const navigate = useNavigate();
   const {
     activeTab,
     network,
@@ -63,42 +82,51 @@ export default function Sidebar({ isMobile = false }) {
     toggleTheme,
     isMobileMenuOpen,
     setMobileMenuOpen,
-  } = useStore()
+  } = useStore();
 
-  const [customProfiles, setCustomProfiles] = useState([])
-  const [activeProfileId, setActiveProfileId] = useState(null)
+  const [customProfiles, setCustomProfiles] = useState<CustomProfile[]>([]);
+  const [activeProfileId, setActiveProfileId] = useState<string | null>(null);
+  const [customHeaderName, setCustomHeaderName] = useState<string>('');
+  const [customHeaderValue, setCustomHeaderValue] = useState<string>('');
 
   useEffect(() => {
     if (network === 'custom') {
-      loadCustomNetworkProfiles().then(profiles => {
+      loadCustomNetworkProfiles().then((profiles: CustomProfile[]) => {
         setCustomProfiles(profiles)
-        getActiveProfile().then(profile => {
+        getActiveProfile().then((profile: CustomProfile | null) => {
           if (profile) {
             setActiveProfileId(profile.id)
             updateCustomNetworkConfig({
               horizonUrl: profile.horizonUrl,
               sorobanUrl: profile.sorobanUrl,
               passphrase: profile.passphrase,
-            })
+            });
           }
-        })
-      })
+        });
+      });
     }
-  }, [network])
+  }, [network]);
 
-  const handleNavClick = (tabId) => {
+  const handleNavClick = (tabId: string) => {
     navigate(`/${tabId}`)
     setMobileMenuOpen(false)
   }
 
+  const handleSwitchProfile = (id: string) => {
+    setActiveProfileId(id);
+    if (id && typeof switchToCustomProfile === 'function') {
+      switchToCustomProfile(id);
+    }
+  };
+
   useEffect(() => {
-    const saved = sessionStorage.getItem(SESSION_API_KEY)
+    const saved = sessionStorage.getItem(SESSION_API_KEY);
     if (saved) {
-      updateCustomNetworkConfig({ customHeaders: { Authorization: `Bearer ${saved}` } })
+      updateCustomNetworkConfig({ customHeaders: { Authorization: `Bearer ${saved}` } });
     }
-  }, [])
+  }, []);
 
-  const sidebarStyles = {
+  const sidebarStyles: React.CSSProperties = {
     width: isMobile ? 'var(--sidebar-width-mobile)' : 'var(--sidebar-width)',
     maxWidth: isMobile ? 'calc(100vw - 24px)' : 'none',
     minHeight: '100vh',
@@ -114,9 +142,9 @@ export default function Sidebar({ isMobile = false }) {
     transform: isMobile ? (isMobileMenuOpen ? 'translateX(0)' : 'translateX(-100%)') : 'translateX(0)',
     transition: 'transform var(--transition)',
     boxShadow: isMobile && isMobileMenuOpen ? '4px 0 20px rgba(0, 0, 0, 0.3)' : 'none',
-  }
+  };
 
-  const customInputStyle = {
+  const customInputStyle: React.CSSProperties = {
     width: '100%',
     padding: '6px 10px',
     fontSize: '10px',
@@ -126,7 +154,18 @@ export default function Sidebar({ isMobile = false }) {
     borderRadius: 'var(--radius-sm)',
     color: 'var(--text-primary)',
     outline: 'none',
-  }
+  };
+
+  const updateCustomHeader = (name: string, value: string) => {
+    setCustomHeaderName(name);
+    setCustomHeaderValue(value);
+    
+    const updatedHeaders: Record<string, string> = name.trim() && value.trim() ? { [name.trim()]: value.trim() } : {};
+    
+    updateCustomNetworkConfig({
+      headers: updatedHeaders,
+    });
+  };
 
   return (
     <>
@@ -158,6 +197,14 @@ export default function Sidebar({ isMobile = false }) {
                 cursor: 'pointer',
                 transition: 'var(--transition)',
               }}
+              onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {
+                e.currentTarget.style.color = 'var(--text-primary)';
+                e.currentTarget.style.background = 'var(--bg-elevated)';
+              }}
+              onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {
+                e.currentTarget.style.color = 'var(--text-secondary)';
+                e.currentTarget.style.background = 'var(--bg-hover)';
+              }}
             >
               ✕
             </button>
@@ -197,7 +244,7 @@ export default function Sidebar({ isMobile = false }) {
           <select
             id="network-select"
             value={network}
-            onChange={(e) => setNetwork(e.target.value)}
+            onChange={(e) => setNetwork(e.target.value as any)}
             aria-label="Select Stellar network"
             style={{
               width: '100%',
@@ -215,7 +262,7 @@ export default function Sidebar({ isMobile = false }) {
               appearance: 'none',
             }}
           >
-            {Object.entries(NETWORKS).map(([id, config]) => (
+            {Object.entries(NETWORKS).map(([id, config]: [string, any]) => (
               <option key={id} value={id} style={{ background: 'var(--bg-surface)' }}>
                 {config.name}
               </option>
@@ -251,7 +298,7 @@ export default function Sidebar({ isMobile = false }) {
                 id="horizon-url"
                 placeholder="Horizon URL"
                 key={`horizon-${activeProfileId}`}
-                defaultValue={NETWORKS.custom.horizonUrl}
+                defaultValue={(NETWORKS as any).custom?.horizonUrl}
                 style={customInputStyle}
                 aria-label="Custom Horizon URL"
                 onChange={(e) => updateCustomNetworkConfig({ horizonUrl: e.target.value.trim() })}
@@ -261,7 +308,7 @@ export default function Sidebar({ isMobile = false }) {
                 id="soroban-url"
                 placeholder="Soroban RPC URL"
                 key={`soroban-${activeProfileId}`}
-                defaultValue={NETWORKS.custom.sorobanUrl}
+                defaultValue={(NETWORKS as any).custom?.sorobanUrl}
                 style={customInputStyle}
                 aria-label="Custom Soroban RPC URL"
                 onChange={(e) => updateCustomNetworkConfig({ sorobanUrl: e.target.value.trim() })}
@@ -271,7 +318,7 @@ export default function Sidebar({ isMobile = false }) {
                 id="network-passphrase"
                 placeholder="Network Passphrase"
                 key={`passphrase-${activeProfileId}`}
-                defaultValue={NETWORKS.custom.passphrase}
+                defaultValue={(NETWORKS as any).custom?.passphrase}
                 style={customInputStyle}
                 aria-label="Custom network passphrase"
                 onChange={(e) => updateCustomNetworkConfig({ passphrase: e.target.value.trim() })}
@@ -285,13 +332,13 @@ export default function Sidebar({ isMobile = false }) {
                 style={customInputStyle}
                 aria-label="Custom network API key (optional)"
                 onChange={(e) => {
-                  const val = e.target.value.trim()
+                  const val = e.target.value.trim();
                   if (val) {
-                    sessionStorage.setItem(SESSION_API_KEY, val)
-                    updateCustomNetworkConfig({ customHeaders: { Authorization: `Bearer ${val}` } })
+                    sessionStorage.setItem(SESSION_API_KEY, val);
+                    updateCustomNetworkConfig({ customHeaders: { Authorization: `Bearer ${val}` } });
                   } else {
-                    sessionStorage.removeItem(SESSION_API_KEY)
-                    updateCustomNetworkConfig({ customHeaders: {} })
+                    sessionStorage.removeItem(SESSION_API_KEY);
+                    updateCustomNetworkConfig({ customHeaders: {} });
                   }
                 }}
               />
@@ -449,13 +496,14 @@ export default function Sidebar({ isMobile = false }) {
               justifyContent: 'center',
               transition: 'var(--transition)',
             }}
-            onMouseEnter={e => {
-              e.currentTarget.style.color = 'var(--text-primary)'
-              e.currentTarget.style.background = 'var(--bg-hover)'
+            title={`Switch to ${theme === 'light' ? 'dark' : 'light'} theme`}
+            onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {
+              e.currentTarget.style.color = 'var(--text-primary)';
+              e.currentTarget.style.background = 'var(--bg-hover)';
             }}
-            onMouseLeave={e => {
-              e.currentTarget.style.color = 'var(--text-secondary)'
-              e.currentTarget.style.background = 'transparent'
+            onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {
+              e.currentTarget.style.color = 'var(--text-secondary)';
+              e.currentTarget.style.background = 'transparent';
             }}
           >
             <span aria-hidden="true">{theme === 'light' ? '☾' : '☀'}</span>
@@ -463,5 +511,5 @@ export default function Sidebar({ isMobile = false }) {
         </div>
       </aside>
     </>
-  )
-}
+  );
+}
\ No newline at end of file
diff --git a/src/components/layout/ThemeToggle.jsx b/src/components/layout/ThemeToggle.tsx
similarity index 95%
rename from src/components/layout/ThemeToggle.jsx
rename to src/components/layout/ThemeToggle.tsx
index 63b5a7aa..52e79bda 100644
--- a/src/components/layout/ThemeToggle.jsx
+++ b/src/components/layout/ThemeToggle.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Sun, Moon } from 'lucide-react';
 import { useStore } from '../../lib/store';
 
-export default function ThemeToggle() {
+export default function ThemeToggle(): JSX.Element {
   const { theme, toggleTheme } = useStore();
   const isDark = theme === 'dark';
 
diff --git a/src/components/layout/WidgetSelector.jsx b/src/components/layout/WidgetSelector.tsx
similarity index 87%
rename from src/components/layout/WidgetSelector.jsx
rename to src/components/layout/WidgetSelector.tsx
index 6d65dc51..e8b67f27 100644
--- a/src/components/layout/WidgetSelector.jsx
+++ b/src/components/layout/WidgetSelector.tsx
@@ -11,8 +11,34 @@ import AccountStatsWidget from './widgets/AccountStatsWidget';
 import QuickActionsWidget from './widgets/QuickActionsWidget';
 import PriceTickerWidget from './widgets/PriceTickerWidget';
 
+export interface WidgetDefinition {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  component: React.ComponentType<any>;
+  defaultSize: { width: number; height: number };
+  category: string;
+}
+
+export interface WidgetInstance {
+  id: string;
+  type: string;
+  component: React.ReactNode;
+  width: number;
+  height: number;
+  span: number;
+}
+
+export interface WidgetSelectorProps {
+  onAddWidget: (widget: WidgetInstance) => void;
+  existingWidgets?: WidgetInstance[];
+  isOpen: boolean;
+  onClose: () => void;
+}
+
 // Widget definitions
-export const AVAILABLE_WIDGETS = {
+export const AVAILABLE_WIDGETS: Record<string, WidgetDefinition> = {
   balance: {
     id: 'balance',
     name: 'XLM Balance',
@@ -78,7 +104,7 @@ export const AVAILABLE_WIDGETS = {
   }
 };
 
-export const WIDGET_CATEGORIES = {
+export const WIDGET_CATEGORIES: Record<string, { name: string; icon: string; color: string }> = {
   account: { name: 'Account', icon: '👤', color: 'var(--cyan)' },
   activity: { name: 'Activity', icon: '⚡', color: 'var(--green)' },
   network: { name: 'Network', icon: '🌐', color: 'var(--amber)' },
@@ -86,24 +112,25 @@ export const WIDGET_CATEGORIES = {
   tools: { name: 'Tools', icon: '🔧', color: 'var(--text-secondary)' }
 };
 
-export default function WidgetSelector({ onAddWidget, existingWidgets = [], isOpen, onClose }) {
-  const [selectedCategory, setSelectedCategory] = useState('account');
-  const { isMobile } = useResponsive();
+export default function WidgetSelector({ onAddWidget, existingWidgets = [], isOpen, onClose }: WidgetSelectorProps) {
+  const [selectedCategory, setSelectedCategory] = useState<string>('account');
+  const { isMobile } = useResponsive() as { isMobile: boolean };
 
   if (!isOpen) return null;
 
-  const handleAddWidget = (widgetType) => {
+  const handleAddWidget = (widgetType: string) => {
     const widget = AVAILABLE_WIDGETS[widgetType];
     if (!widget) return;
 
-    const newWidget = {
+    const newWidget: WidgetInstance = {
       id: `${widgetType}-${Date.now()}`,
       type: widgetType,
       component: React.createElement(widget.component, { 
         key: `${widgetType}-${Date.now()}`,
         onRefresh: () => {} 
       }),
-      ...widget.defaultSize,
+      width: widget.defaultSize.width,
+      height: widget.defaultSize.height,
       span: 1
     };
 
@@ -116,15 +143,15 @@ export default function WidgetSelector({ onAddWidget, existingWidgets = [], isOp
     });
   };
 
-  const isWidgetAdded = (widgetType) => {
+  const isWidgetAdded = (widgetType: string) => {
     return existingWidgets.some(w => w.type === widgetType);
   };
 
-  const getWidgetsByCategory = (category) => {
+  const getWidgetsByCategory = (category: string) => {
     return Object.values(AVAILABLE_WIDGETS).filter(w => w.category === category);
   };
 
-  const overlayStyles = {
+  const overlayStyles: React.CSSProperties = {
     position: 'fixed',
     inset: 0,
     background: 'rgba(0, 0, 0, 0.5)',
@@ -136,7 +163,7 @@ export default function WidgetSelector({ onAddWidget, existingWidgets = [], isOp
     padding: isMobile ? '20px' : '40px'
   };
 
-  const modalStyles = {
+  const modalStyles: React.CSSProperties = {
     background: 'var(--bg-surface)',
     border: '1px solid var(--border)',
     borderRadius: 'var(--radius-lg)',
@@ -148,7 +175,7 @@ export default function WidgetSelector({ onAddWidget, existingWidgets = [], isOp
     flexDirection: 'column'
   };
 
-  const headerStyles = {
+  const headerStyles: React.CSSProperties = {
     padding: isMobile ? '16px 20px' : '20px 24px',
     borderBottom: '1px solid var(--border)',
     display: 'flex',
@@ -156,7 +183,7 @@ export default function WidgetSelector({ onAddWidget, existingWidgets = [], isOp
     justifyContent: 'space-between'
   };
 
-  const contentStyles = {
+  const contentStyles: React.CSSProperties = {
     flex: 1,
     overflow: 'auto',
     padding: isMobile ? '16px 20px' : '20px 24px'
@@ -269,13 +296,13 @@ export default function WidgetSelector({ onAddWidget, existingWidgets = [], isOp
                     transition: 'var(--transition)'
                   }}
                   onClick={() => !isAdded && handleAddWidget(widget.id)}
-                  onMouseEnter={e => {
+                  onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
                     if (!isAdded) {
                       e.currentTarget.style.borderColor = 'var(--cyan)';
                       e.currentTarget.style.boxShadow = '0 4px 12px var(--cyan-glow-sm)';
                     }
                   }}
-                  onMouseLeave={e => {
+                  onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
                     if (!isAdded) {
                       e.currentTarget.style.borderColor = 'var(--border)';
                       e.currentTarget.style.boxShadow = 'none';
diff --git a/src/components/layout/widgets/AccountStatsWidget.jsx b/src/components/layout/widgets/AccountStatsWidget.tsx
similarity index 92%
rename from src/components/layout/widgets/AccountStatsWidget.jsx
rename to src/components/layout/widgets/AccountStatsWidget.tsx
index f7de54f3..31bda67a 100644
--- a/src/components/layout/widgets/AccountStatsWidget.jsx
+++ b/src/components/layout/widgets/AccountStatsWidget.tsx
@@ -1,9 +1,14 @@
+import React from 'react';
 import { useStore } from '../../../lib/store';
 import { shortAddress } from '../../../lib/stellar';
 import CopyableValue from '../../dashboard/CopyableValue';
 import WidgetBase from './WidgetBase';
 
-export default function AccountStatsWidget({ onRefresh }) {
+export interface BaseWidgetProps {
+  onRefresh?: () => void;
+}
+
+export default function AccountStatsWidget({ onRefresh }: BaseWidgetProps) {
   const { accountData, transactions, operations, connectedAddress, txLoading, opsLoading } = useStore();
 
   const stats = [
@@ -23,7 +28,7 @@ export default function AccountStatsWidget({ onRefresh }) {
     },
     {
       label: 'Transactions',
-      value: txLoading ? '...' : transactions.length.toString(),
+      value: txLoading ? '...' : (transactions?.length || 0).toString(),
       subtitle: 'recent',
       icon: '⇄',
       color: 'var(--green)',
@@ -31,7 +36,7 @@ export default function AccountStatsWidget({ onRefresh }) {
     },
     {
       label: 'Operations',
-      value: opsLoading ? '...' : operations.length.toString(),
+      value: opsLoading ? '...' : (operations?.length || 0).toString(),
       subtitle: 'recent',
       icon: '⚙️',
       color: 'var(--text-secondary)',
@@ -73,17 +78,17 @@ export default function AccountStatsWidget({ onRefresh }) {
                 textAlign: 'center',
                 transition: 'var(--transition)'
               }}
-              onMouseEnter={e => {
+              onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
                 e.currentTarget.style.borderColor = stat.color;
               }}
-              onMouseLeave={e => {
+              onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
                 e.currentTarget.style.borderColor = 'var(--border)';
               }}
             >
               <div style={{ fontSize: '16px', marginBottom: '4px' }}>
                 {stat.icon}
               </div>
-              
+
               <div style={{
                 fontSize: '14px',
                 fontWeight: 700,
@@ -105,7 +110,7 @@ export default function AccountStatsWidget({ onRefresh }) {
                   stat.value
                 )}
               </div>
-              
+
               <div style={{
                 fontSize: '10px',
                 color: 'var(--text-muted)',
@@ -138,7 +143,7 @@ export default function AccountStatsWidget({ onRefresh }) {
             }}>
               🔐 Security Thresholds
             </div>
-            
+
             <div style={{
               display: 'grid',
               gridTemplateColumns: 'repeat(3, 1fr)',
@@ -186,13 +191,13 @@ export default function AccountStatsWidget({ onRefresh }) {
             }}>
               ✍️ Signers ({signers.length})
             </div>
-            
+
             <div style={{
               display: 'flex',
               flexDirection: 'column',
               gap: '4px'
             }}>
-              {signers.slice(0, 3).map((signer) => (
+              {signers.slice(0, 3).map((signer: any) => (
                 <div key={signer.key} style={{
                   display: 'flex',
                   justifyContent: 'space-between',
@@ -202,7 +207,7 @@ export default function AccountStatsWidget({ onRefresh }) {
                   <CopyableValue
                     value={signer.key}
                     title="Copy signer key"
-                    textStyle={{ 
+                    textStyle={{
                       color: signer.key === connectedAddress ? 'var(--cyan)' : 'var(--text-secondary)',
                       fontFamily: 'var(--font-mono)'
                     }}
@@ -210,7 +215,7 @@ export default function AccountStatsWidget({ onRefresh }) {
                     {shortAddress(signer.key, 4)}
                     {signer.key === connectedAddress && ' (you)'}
                   </CopyableValue>
-                  <span style={{ 
+                  <span style={{
                     color: 'var(--text-muted)',
                     fontFamily: 'var(--font-mono)'
                   }}>
diff --git a/src/components/layout/widgets/AssetsWidget.jsx b/src/components/layout/widgets/AssetsWidget.tsx
similarity index 87%
rename from src/components/layout/widgets/AssetsWidget.jsx
rename to src/components/layout/widgets/AssetsWidget.tsx
index 8ac599ff..9720bf0e 100644
--- a/src/components/layout/widgets/AssetsWidget.jsx
+++ b/src/components/layout/widgets/AssetsWidget.tsx
@@ -5,7 +5,19 @@ import useAssetUsdEstimates, { formatEstimatedUsd } from '../../../hooks/useAsse
 import CopyableValue from '../../dashboard/CopyableValue';
 import WidgetBase from './WidgetBase';
 
-export default function AssetsWidget({ onRefresh, maxAssets = 5 }) {
+export interface AssetsWidgetProps {
+  onRefresh?: () => void;
+  maxAssets?: number;
+}
+
+export interface AssetBalance {
+  asset_type: string;
+  asset_code?: string;
+  asset_issuer?: string;
+  balance: string;
+}
+
+export default function AssetsWidget({ onRefresh, maxAssets = 5 }: AssetsWidgetProps) {
   const { accountData, connectedAddress, network } = useStore();
   
   const { getEstimate } = useAssetUsdEstimates({
@@ -15,7 +27,7 @@ export default function AssetsWidget({ onRefresh, maxAssets = 5 }) {
     refreshKey: accountData,
   });
 
-  const otherAssets = accountData?.balances?.filter(b => b.asset_type !== 'native') || [];
+  const otherAssets: AssetBalance[] = accountData?.balances?.filter((b: AssetBalance) => b.asset_type !== 'native') || [];
   const displayAssets = otherAssets.slice(0, maxAssets);
   const hasMore = otherAssets.length > maxAssets;
 
@@ -68,8 +80,8 @@ export default function AssetsWidget({ onRefresh, maxAssets = 5 }) {
                 borderBottom: i < displayAssets.length - 1 ? '1px solid var(--border)' : 'none',
                 transition: 'var(--transition)',
               }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+              onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => e.currentTarget.style.background = 'var(--bg-hover)'}
+              onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => e.currentTarget.style.background = 'transparent'}
             >
               <div style={{ flex: 1, minWidth: 0 }}>
                 <div style={{
@@ -140,7 +152,7 @@ export default function AssetsWidget({ onRefresh, maxAssets = 5 }) {
                     fontFamily: 'var(--font-mono)', 
                     fontSize: '11px' 
                   }}>
-                    {formatEstimatedUsd(getEstimate(asset).usd)}
+                    {formatEstimatedUsd(getEstimate(asset)!.usd)}
                   </span>
                 )}
               </div>
@@ -158,7 +170,7 @@ export default function AssetsWidget({ onRefresh, maxAssets = 5 }) {
                 fontSize: '12px',
                 color: 'var(--text-muted)'
               }}>
-                +{otherAssets.length - maxAssets} more asset{otherAssets.length - maxAssets !== 1 ? 's' : ''}
+                +{(otherAssets.length) - maxAssets} more asset{(otherAssets.length) - maxAssets !== 1 ? 's' : ''}
               </div>
             </div>
           )}
diff --git a/src/components/layout/widgets/BalanceWidget.jsx b/src/components/layout/widgets/BalanceWidget.tsx
similarity index 89%
rename from src/components/layout/widgets/BalanceWidget.jsx
rename to src/components/layout/widgets/BalanceWidget.tsx
index d55d5bcd..b2144060 100644
--- a/src/components/layout/widgets/BalanceWidget.jsx
+++ b/src/components/layout/widgets/BalanceWidget.tsx
@@ -4,9 +4,13 @@ import { formatXLM } from '../../../lib/stellar';
 import useAssetUsdEstimates, { formatEstimatedUsd } from '../../../hooks/useAssetUsdEstimates';
 import WidgetBase from './WidgetBase';
 
-export default function BalanceWidget({ onRefresh }) {
+export interface BaseWidgetProps {
+  onRefresh?: () => void;
+}
+
+export default function BalanceWidget({ onRefresh }: BaseWidgetProps) {
   const { accountData, connectedAddress, network } = useStore();
-  
+
   const { getEstimate } = useAssetUsdEstimates({
     balances: accountData?.balances || [],
     connectedAddress,
@@ -14,10 +18,10 @@ export default function BalanceWidget({ onRefresh }) {
     refreshKey: accountData,
   });
 
-  const xlmBalance = accountData?.balances?.find(b => b.asset_type === 'native');
+  const xlmBalance = accountData?.balances?.find((b: any) => b.asset_type === 'native');
   const xlmEstimate = xlmBalance ? getEstimate(xlmBalance) : null;
 
-  const totalUsdValue = accountData?.balances?.reduce((total, balance) => {
+  const totalUsdValue = accountData?.balances?.reduce((total: number, balance: any) => {
     const estimate = getEstimate(balance);
     return total + (estimate?.usd || 0);
   }, 0) || 0;
@@ -100,8 +104,8 @@ export default function BalanceWidget({ onRefresh }) {
             <span style={{ color: 'var(--text-secondary)' }}>
               Total Portfolio:
             </span>
-            <span style={{ 
-              color: 'var(--text-primary)', 
+            <span style={{
+              color: 'var(--text-primary)',
               fontWeight: 600,
               fontFamily: 'var(--font-mono)'
             }}>
diff --git a/src/components/layout/widgets/NetworkStatsWidget.jsx b/src/components/layout/widgets/NetworkStatsWidget.tsx
similarity index 91%
rename from src/components/layout/widgets/NetworkStatsWidget.jsx
rename to src/components/layout/widgets/NetworkStatsWidget.tsx
index 5eebe9c6..70ae47ba 100644
--- a/src/components/layout/widgets/NetworkStatsWidget.jsx
+++ b/src/components/layout/widgets/NetworkStatsWidget.tsx
@@ -5,15 +5,19 @@ import { useErrorHandler } from '../../../hooks/useErrorHandler';
 import WidgetBase from './WidgetBase';
 import { format } from 'date-fns';
 
-export default function NetworkStatsWidget({ onRefresh }) {
-  const { 
-    network, 
-    networkStats, 
-    setNetworkStats, 
-    statsLoading, 
-    setStatsLoading 
+export interface BaseWidgetProps {
+  onRefresh?: () => void;
+}
+
+export default function NetworkStatsWidget({ onRefresh }: BaseWidgetProps) {
+  const {
+    network,
+    networkStats,
+    setNetworkStats,
+    statsLoading,
+    setStatsLoading
   } = useStore();
-  
+
   const { handleError } = useErrorHandler('NetworkStatsWidget');
 
   const loadNetworkStats = async () => {
@@ -76,7 +80,7 @@ export default function NetworkStatsWidget({ onRefresh }) {
         gap: '16px',
         height: '100%'
       }}>
-        {stats.map((stat, index) => (
+        {stats.map((stat) => (
           <div
             key={stat.label}
             style={{
@@ -89,11 +93,11 @@ export default function NetworkStatsWidget({ onRefresh }) {
               borderRadius: 'var(--radius-md)',
               transition: 'var(--transition)'
             }}
-            onMouseEnter={e => {
+            onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => {
               e.currentTarget.style.borderColor = stat.color;
               e.currentTarget.style.boxShadow = `0 0 0 1px ${stat.color}20`;
             }}
-            onMouseLeave={e => {
+            onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => {
               e.currentTarget.style.borderColor = 'var(--border)';
               e.currentTarget.style.boxShadow = 'none';
             }}
@@ -104,7 +108,7 @@ export default function NetworkStatsWidget({ onRefresh }) {
             }}>
               {stat.icon}
             </div>
-            
+
             <div style={{ flex: 1, minWidth: 0 }}>
               <div style={{
                 fontSize: '11px',
@@ -115,7 +119,7 @@ export default function NetworkStatsWidget({ onRefresh }) {
               }}>
                 {stat.label}
               </div>
-              
+
               <div style={{
                 fontSize: '16px',
                 fontWeight: 700,
@@ -127,7 +131,7 @@ export default function NetworkStatsWidget({ onRefresh }) {
               }}>
                 {stat.value}
               </div>
-              
+
               {stat.subtitle && (
                 <div style={{
                   fontSize: '11px',
diff --git a/src/components/layout/widgets/PriceTickerWidget.jsx b/src/components/layout/widgets/PriceTickerWidget.tsx
similarity index 90%
rename from src/components/layout/widgets/PriceTickerWidget.jsx
rename to src/components/layout/widgets/PriceTickerWidget.tsx
index 613fb87a..96387a35 100644
--- a/src/components/layout/widgets/PriceTickerWidget.jsx
+++ b/src/components/layout/widgets/PriceTickerWidget.tsx
@@ -1,21 +1,33 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useStore } from '../../../lib/store';
 import WidgetBase from './WidgetBase';
 import { useErrorHandler } from '../../../hooks/useErrorHandler';
 
-export default function PriceTickerWidget({ onRefresh }) {
+export interface BaseWidgetProps {
+  onRefresh?: () => void;
+}
+
+export interface PriceData {
+  xlm: {
+    price: number;
+    change24h: number;
+    volume24h: number;
+  };
+}
+
+export default function PriceTickerWidget({ onRefresh }: BaseWidgetProps) {
   const { network } = useStore();
-  const [priceData, setPriceData] = useState(null);
-  const [loading, setLoading] = useState(false);
+  const [priceData, setPriceData] = useState<PriceData | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
   const { handleError } = useErrorHandler('PriceTickerWidget');
 
   const fetchPriceData = async () => {
     if (network !== 'mainnet') return; // Only show prices for mainnet
-    
+
     try {
       setLoading(true);
       // Mock price data - in a real app, you'd fetch from a price API
-      const mockData = {
+      const mockData: PriceData = {
         xlm: {
           price: 0.1234,
           change24h: 2.45,
@@ -158,8 +170,8 @@ export default function PriceTickerWidget({ onRefresh }) {
             <span style={{ color: 'var(--text-secondary)' }}>
               24h Volume:
             </span>
-            <span style={{ 
-              color: 'var(--text-primary)', 
+            <span style={{
+              color: 'var(--text-primary)',
               fontWeight: 600,
               fontFamily: 'var(--font-mono)'
             }}>
diff --git a/src/components/layout/widgets/QuickActionsWidget.jsx b/src/components/layout/widgets/QuickActionsWidget.tsx
similarity index 88%
rename from src/components/layout/widgets/QuickActionsWidget.jsx
rename to src/components/layout/widgets/QuickActionsWidget.tsx
index 684be42f..74a76137 100644
--- a/src/components/layout/widgets/QuickActionsWidget.jsx
+++ b/src/components/layout/widgets/QuickActionsWidget.tsx
@@ -1,10 +1,15 @@
+import React from 'react';
 import { useStore } from '../../../lib/store';
 import WidgetBase from './WidgetBase';
 import { useResponsive } from '../../../hooks/useResponsive';
 
-export default function QuickActionsWidget({ onRefresh }) {
+export interface BaseWidgetProps {
+  onRefresh?: () => void;
+}
+
+export default function QuickActionsWidget({ onRefresh }: BaseWidgetProps) {
   const { setActiveTab } = useStore();
-  const { isMobile } = useResponsive();
+  const { isMobile } = useResponsive() as { isMobile: boolean };
 
   const actions = [
     {
@@ -67,12 +72,12 @@ export default function QuickActionsWidget({ onRefresh }) {
               alignItems: 'center',
               gap: '8px'
             }}
-            onMouseEnter={e => {
+            onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {
               e.currentTarget.style.borderColor = action.color;
               e.currentTarget.style.background = `${action.color}10`;
               e.currentTarget.style.transform = 'translateY(-2px)';
             }}
-            onMouseLeave={e => {
+            onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {
               e.currentTarget.style.borderColor = 'var(--border)';
               e.currentTarget.style.background = 'var(--bg-elevated)';
               e.currentTarget.style.transform = 'translateY(0)';
@@ -81,7 +86,7 @@ export default function QuickActionsWidget({ onRefresh }) {
             <div style={{ fontSize: '24px' }}>
               {action.icon}
             </div>
-            
+
             <div style={{
               fontSize: '13px',
               fontWeight: 600,
@@ -90,7 +95,7 @@ export default function QuickActionsWidget({ onRefresh }) {
             }}>
               {action.label}
             </div>
-            
+
             <div style={{
               fontSize: '11px',
               color: 'var(--text-muted)',
diff --git a/src/components/layout/widgets/TransactionsWidget.jsx b/src/components/layout/widgets/TransactionsWidget.tsx
similarity index 71%
rename from src/components/layout/widgets/TransactionsWidget.jsx
rename to src/components/layout/widgets/TransactionsWidget.tsx
index 687f181d..22b13fa8 100644
--- a/src/components/layout/widgets/TransactionsWidget.jsx
+++ b/src/components/layout/widgets/TransactionsWidget.tsx
@@ -4,22 +4,27 @@ import CopyableValue from '../../dashboard/CopyableValue';
 import WidgetBase from './WidgetBase';
 import { format } from 'date-fns';
 
-export default function TransactionsWidget({ onRefresh, maxTransactions = 5 }) {
+export interface TransactionsWidgetProps {
+  onRefresh?: () => void;
+  maxTransactions?: number;
+}
+
+export default function TransactionsWidget({ onRefresh, maxTransactions = 5 }: TransactionsWidgetProps) {
   const { transactions, txLoading, network } = useStore();
-  
-  const displayTransactions = transactions.slice(0, maxTransactions);
-  const hasMore = transactions.length > maxTransactions;
+
+  const displayTransactions = transactions?.slice(0, maxTransactions) || [];
+  const hasMore = (transactions?.length || 0) > maxTransactions;
 
   return (
     <WidgetBase
       title="Recent Transactions"
-      subtitle={`Latest ${Math.min(transactions.length, maxTransactions)} transaction${Math.min(transactions.length, maxTransactions) !== 1 ? 's' : ''}`}
+      subtitle={`Latest ${Math.min(transactions?.length || 0, maxTransactions)} transaction${Math.min(transactions?.length || 0, maxTransactions) !== 1 ? 's' : ''}`}
       icon="⇄"
       onRefresh={onRefresh}
       loading={txLoading}
       contentPadding={false}
     >
-      {transactions.length === 0 ? (
+      {!transactions || transactions.length === 0 ? (
         <div style={{
           display: 'flex',
           flexDirection: 'column',
@@ -48,8 +53,8 @@ export default function TransactionsWidget({ onRefresh, maxTransactions = 5 }) {
         </div>
       ) : (
         <div style={{ padding: '4px 0' }}>
-          {displayTransactions.map((tx, i) => (
-            <div 
+          {displayTransactions.map((tx: any, i: number) => (
+            <div
               key={tx.id}
               style={{
                 display: 'flex',
@@ -59,41 +64,41 @@ export default function TransactionsWidget({ onRefresh, maxTransactions = 5 }) {
                 borderBottom: i < displayTransactions.length - 1 ? '1px solid var(--border)' : 'none',
                 transition: 'var(--transition)',
               }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+              onMouseEnter={(e: React.MouseEvent<HTMLDivElement>) => e.currentTarget.style.background = 'var(--bg-hover)'}
+              onMouseLeave={(e: React.MouseEvent<HTMLDivElement>) => e.currentTarget.style.background = 'transparent'}
             >
               {/* Status Indicator */}
               <div style={{
-                width: '8px', 
-                height: '8px', 
+                width: '8px',
+                height: '8px',
                 borderRadius: '50%',
                 background: tx.successful ? 'var(--green)' : 'var(--red)',
                 flexShrink: 0,
               }} />
-              
+
               {/* Transaction Info */}
               <div style={{ flex: 1, minWidth: 0 }}>
                 <CopyableValue
                   value={tx.hash}
                   title="Copy transaction hash"
-                  containerStyle={{ 
-                    fontSize: '12px', 
-                    color: 'var(--text-primary)', 
+                  containerStyle={{
+                    fontSize: '12px',
+                    color: 'var(--text-primary)',
                     fontFamily: 'var(--font-mono)',
                     marginBottom: '4px'
                   }}
-                  textStyle={{ 
-                    overflow: 'hidden', 
-                    textOverflow: 'ellipsis', 
+                  textStyle={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
                     whiteSpace: 'nowrap',
                     maxWidth: '200px'
                   }}
                 >
                   {tx.hash}
                 </CopyableValue>
-                
-                <div style={{ 
-                  fontSize: '11px', 
+
+                <div style={{
+                  fontSize: '11px',
                   color: 'var(--text-muted)',
                   display: 'flex',
                   alignItems: 'center',
@@ -108,25 +113,25 @@ export default function TransactionsWidget({ onRefresh, maxTransactions = 5 }) {
                   </span>
                 </div>
               </div>
-              
+
               {/* External Link */}
               <a
                 href={`https://stellar.expert/explorer/${network}/tx/${tx.hash}`}
                 target="_blank"
                 rel="noopener noreferrer"
-                style={{ 
-                  fontSize: '14px', 
-                  color: 'var(--cyan)', 
+                style={{
+                  fontSize: '14px',
+                  color: 'var(--cyan)',
                   flexShrink: 0,
                   padding: '4px',
                   borderRadius: 'var(--radius-sm)',
                   transition: 'var(--transition)'
                 }}
                 title="View on Stellar Expert"
-                onMouseEnter={e => {
+                onMouseEnter={(e: React.MouseEvent<HTMLAnchorElement>) => {
                   e.currentTarget.style.background = 'var(--cyan-glow)';
                 }}
-                onMouseLeave={e => {
+                onMouseLeave={(e: React.MouseEvent<HTMLAnchorElement>) => {
                   e.currentTarget.style.background = 'transparent';
                 }}
               >
@@ -134,7 +139,7 @@ export default function TransactionsWidget({ onRefresh, maxTransactions = 5 }) {
               </a>
             </div>
           ))}
-          
+
           {hasMore && (
             <div style={{
               padding: '12px 18px',
@@ -146,7 +151,7 @@ export default function TransactionsWidget({ onRefresh, maxTransactions = 5 }) {
                 fontSize: '12px',
                 color: 'var(--text-muted)'
               }}>
-                +{transactions.length - maxTransactions} more transaction{transactions.length - maxTransactions !== 1 ? 's' : ''}
+                +{(transactions?.length || 0) - maxTransactions} more transaction{(transactions?.length || 0) - maxTransactions !== 1 ? 's' : ''}
               </div>
             </div>
           )}
diff --git a/src/components/layout/widgets/WidgetBase.jsx b/src/components/layout/widgets/WidgetBase.tsx
similarity index 86%
rename from src/components/layout/widgets/WidgetBase.jsx
rename to src/components/layout/widgets/WidgetBase.tsx
index d44254de..1c5af6ad 100644
--- a/src/components/layout/widgets/WidgetBase.jsx
+++ b/src/components/layout/widgets/WidgetBase.tsx
@@ -1,14 +1,28 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { useResponsive } from '../../../hooks/useResponsive';
 
+export interface WidgetBaseProps {
+  title?: string;
+  subtitle?: string;
+  icon?: ReactNode;
+  children?: ReactNode;
+  loading?: boolean;
+  error?: { message?: string } | Error | null;
+  onRefresh?: () => void;
+  headerActions?: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  contentPadding?: boolean;
+}
+
 /**
  * Base widget component with common styling and functionality
  */
-export default function WidgetBase({ 
-  title, 
+export default function WidgetBase({
+  title,
   subtitle,
   icon,
-  children, 
+  children,
   loading = false,
   error = null,
   onRefresh,
@@ -16,10 +30,10 @@ export default function WidgetBase({
   className = '',
   style = {},
   contentPadding = true
-}) {
-  const { isMobile } = useResponsive();
+}: WidgetBaseProps) {
+  const { isMobile } = useResponsive() as { isMobile: boolean };
 
-  const containerStyles = {
+  const containerStyles: React.CSSProperties = {
     display: 'flex',
     flexDirection: 'column',
     height: '100%',
@@ -30,7 +44,7 @@ export default function WidgetBase({
     ...style
   };
 
-  const headerStyles = {
+  const headerStyles: React.CSSProperties = {
     padding: isMobile ? '12px 16px' : '14px 18px',
     borderBottom: '1px solid var(--border)',
     background: 'var(--bg-surface)',
@@ -40,7 +54,7 @@ export default function WidgetBase({
     minHeight: '48px'
   };
 
-  const titleStyles = {
+  const titleStyles: React.CSSProperties = {
     display: 'flex',
     alignItems: 'center',
     gap: '8px',
@@ -48,7 +62,7 @@ export default function WidgetBase({
     minWidth: 0
   };
 
-  const contentStyles = {
+  const contentStyles: React.CSSProperties = {
     flex: 1,
     padding: contentPadding ? (isMobile ? '16px' : '18px') : '0',
     overflow: 'auto',
@@ -94,7 +108,7 @@ export default function WidgetBase({
               )}
             </div>
           </div>
-          
+
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
             {onRefresh && (
               <button
@@ -111,13 +125,13 @@ export default function WidgetBase({
                   fontSize: '14px'
                 }}
                 title="Refresh widget"
-                onMouseEnter={e => {
+                onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {
                   if (!loading) {
                     e.currentTarget.style.color = 'var(--text-primary)';
                     e.currentTarget.style.background = 'var(--bg-hover)';
                   }
                 }}
-                onMouseLeave={e => {
+                onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {
                   if (!loading) {
                     e.currentTarget.style.color = 'var(--text-secondary)';
                     e.currentTarget.style.background = 'none';
@@ -180,7 +194,7 @@ export default function WidgetBase({
               color: 'var(--text-muted)',
               lineHeight: 1.4
             }}>
-              {error.message || 'Something went wrong'}
+              {(error as Error).message || 'Something went wrong'}
             </div>
             {onRefresh && (
               <button
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 7543b528..40f3ff52 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -722,10 +722,6 @@ table {
   overflow: hidden;
 }
 
-.widget-container:hover .widget-controls {
-  opacity: 1 !important;
-}
-
 .widget-controls {
   position: absolute;
   top: 8px;
@@ -737,6 +733,10 @@ table {
   transition: opacity var(--transition);
 }
 
+.widget-container:hover .widget-controls {
+  opacity: 1 !important;
+}
+
 .widget-controls button {
   width: 20px;
   height: 20px;