diff --git a/package-lock.json b/package-lock.json
index 798c734..8e70eaa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3215,12 +3215,9 @@
       "dev": true
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz",
-      "integrity": "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
+      "version": "7.27.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.4.tgz",
+      "integrity": "sha512-t3yaEOuGu9NlIZ+hIeGbBjFtZT7j2cb2tg0fuaJKeGotchRjjLfrBA9Kwf8quhpP1EUuxModQg04q/mBwyg8uA==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -20963,11 +20960,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
-    },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",
       "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
diff --git a/src/components/dashboard/logistics/DeliveryTableCard/DeliveryTableCard.tsx b/src/components/dashboard/logistics/DeliveryTableCard/DeliveryTableCard.tsx
index 0402dfa..c84f45b 100644
--- a/src/components/dashboard/logistics/DeliveryTableCard/DeliveryTableCard.tsx
+++ b/src/components/dashboard/logistics/DeliveryTableCard/DeliveryTableCard.tsx
@@ -37,16 +37,21 @@ const BASIC_COLUMNS: ColumnsType<NetworkEvent> = [
   //   dataIndex: ['Event', 'RuleName'],
   //   key: 'RuleName',
   // },
+  {
+    title: 'User',
+    dataIndex: ['Event', 'User'],
+    key: 'User',
+  },
   {
     title: 'Time stamp',
     dataIndex: ['Event', 'EventHeader', 'TimeStamp'],
     key: 'TimeStamp',
   },
-  {
-    title: 'Parent user',
-    dataIndex: ['Event', 'ParentUser'],
-    key: 'ParentUser',
-  },
+  // {
+  //   title: 'Parent user',
+  //   dataIndex: ['Event', 'ParentUser'],
+  //   key: 'ParentUser',
+  // },
   {
     title: 'Thread id',
     dataIndex: ['Event', 'EventHeader', 'ThreadId'],
diff --git a/src/layouts/app/App.tsx b/src/layouts/app/App.tsx
index 650cd46..dfe9f95 100644
--- a/src/layouts/app/App.tsx
+++ b/src/layouts/app/App.tsx
@@ -21,6 +21,7 @@ import {
   QuestionOutlined,
   SettingOutlined,
   UserOutlined,
+  GlobalOutlined,
 } from '@ant-design/icons';
 import {
   CSSTransition,
@@ -33,6 +34,7 @@ import HeaderNav from './HeaderNav.tsx';
 import FooterNav from './FooterNav.tsx';
 import { NProgress } from '../../components';
 import { PATH_LANDING } from '../../constants';
+import { useTranslation } from './TranslationContext.tsx';
 
 const { Content } = Layout;
 
@@ -48,25 +50,26 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
   const [collapsed, setCollapsed] = useState(true);
   const [navFill, setNavFill] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const { setLanguage, t, loading } = useTranslation();
   const location = useLocation();
   const navigate = useNavigate();
   const nodeRef = useRef(null);
   const floatBtnRef = useRef(null);
 
-  const items: MenuProps['items'] = [
+  const menuItems: MenuProps['items'] = [
     {
       key: 'user-profile-link',
-      label: 'profile',
+      label: t('Profile'),
       icon: <UserOutlined />,
     },
     {
       key: 'user-settings-link',
-      label: 'settings',
+      label: t('Settings'),
       icon: <SettingOutlined />,
     },
     {
       key: 'user-help-link',
-      label: 'help center',
+      label: t('Help Center'),
       icon: <QuestionOutlined />,
     },
     {
@@ -74,13 +77,13 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
     },
     {
       key: 'user-logout-link',
-      label: 'logout',
+      label: t('Logout'),
       icon: <LogoutOutlined />,
       danger: true,
       onClick: () => {
         message.open({
           type: 'loading',
-          content: 'signing you out',
+          content: t('Signing you out'),
         });
 
         setTimeout(() => {
@@ -106,9 +109,17 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
+  const changeLanguage = (lang: 'en' | 'uz' | 'ru') => {
+    setLanguage(lang);
+  };
+
+  const sidebarTooltip = collapsed
+    ? t('Expand Sidebar')
+    : t('Collapse Sidebar');
+
   return (
     <>
-      <NProgress isAnimating={isLoading} key={location.key} />
+      <NProgress isAnimating={isLoading || loading} key={location.key} />
       <Layout
         style={{
           minHeight: '100vh',
@@ -159,7 +170,7 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
             }}
           >
             <Flex align="center">
-              <Tooltip title={`${collapsed ? 'Expand' : 'Collapse'} Sidebar`}>
+              <Tooltip title={sidebarTooltip}>
                 <Button
                   type="text"
                   icon={
@@ -174,7 +185,7 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
                 />
               </Tooltip>
               <Input.Search
-                placeholder="search"
+                placeholder={t('Search')}
                 style={{
                   width: isMobile ? '100%' : 400,
                   marginLeft: isMobile ? 0 : '.5rem',
@@ -183,17 +194,40 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
               />
             </Flex>
             <Flex align="center" gap="small">
-              <Tooltip title="Apps">
+              <Dropdown
+                menu={{
+                  items: [
+                    {
+                      key: 'en',
+                      label: 'English',
+                      onClick: () => changeLanguage('en'),
+                    },
+                    {
+                      key: 'uz',
+                      label: 'Oʻzbekcha',
+                      onClick: () => changeLanguage('uz'),
+                    },
+                    {
+                      key: 'ru',
+                      label: 'Русский',
+                      onClick: () => changeLanguage('ru'),
+                    },
+                  ],
+                }}
+              >
+                <Button icon={<GlobalOutlined />} type="text" size="large" />
+              </Dropdown>
+              <Tooltip title={t('Apps')}>
                 <Button icon={<AppstoreOutlined />} type="text" size="large" />
               </Tooltip>
-              <Tooltip title="Messages">
+              <Tooltip title={t('Messages')}>
                 <Button icon={<MessageOutlined />} type="text" size="large" />
               </Tooltip>
-              <Dropdown menu={{ items }} trigger={['click']}>
+              <Dropdown menu={{ items: menuItems }} trigger={['click']}>
                 <Flex>
                   <img
                     src="/jujutsu.jpg"
-                    alt="user profile photo"
+                    alt={t('User profile photo')}
                     height={36}
                     width={36}
                     style={{ borderRadius, objectFit: 'cover' }}
@@ -224,11 +258,8 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
                     <div
                       ref={nodeRef}
                       style={{
-                        // backgroundColor: '#fff',
-                        // borderRadius: borderRadius,
                         padding: 24,
                         minHeight: '100%',
-                        // boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
                       }}
                     >
                       {children}
diff --git a/src/layouts/app/TranslationContext.tsx b/src/layouts/app/TranslationContext.tsx
new file mode 100644
index 0000000..49d0a4b
--- /dev/null
+++ b/src/layouts/app/TranslationContext.tsx
@@ -0,0 +1,98 @@
+// contexts/TranslationContext.tsx
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { translateText } from '../../service/translation';
+
+type Language = 'en' | 'uz' | 'ru';
+
+interface TranslationContextType {
+  language: Language;
+  setLanguage: (lang: Language) => void;
+  t: (text: string) => string;
+  loading: boolean;
+}
+
+const TranslationContext = createContext<TranslationContextType>({
+  language: 'en',
+  setLanguage: () => {},
+  t: (text) => text,
+  loading: false,
+});
+
+export const TranslationProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [language, setLanguage] = useState<Language>('en');
+  const [cache, setCache] = useState<Record<string, Record<Language, string>>>(
+    {}
+  );
+  const [loading, setLoading] = useState(false);
+
+  // Pre-load common translations
+  useEffect(() => {
+    const loadCommonTranslations = async () => {
+      setLoading(true);
+      const commonPhrases = [
+        'Profile',
+        'Settings',
+        'Help Center',
+        'Logout',
+        'Signing you out',
+        'Search',
+        'Expand Sidebar',
+        'Collapse Sidebar',
+        'Apps',
+        'Messages',
+      ];
+
+      for (const phrase of commonPhrases) {
+        await t(phrase);
+      }
+      setLoading(false);
+    };
+
+    loadCommonTranslations();
+  }, [language]);
+
+  const t = async (text: string): Promise<string> => {
+    if (!text.trim()) return text;
+
+    // Check cache first
+    if (cache[text]?.[language]) {
+      return cache[text][language];
+    }
+
+    // If not in cache, translate
+    const translatedText = await translateText(text, language);
+
+    // Update cache
+    setCache((prev) => ({
+      ...prev,
+      [text]: {
+        ...prev[text],
+        [language]: translatedText,
+      },
+    }));
+
+    return translatedText;
+  };
+
+  // Synchronous version that uses cached translations
+  const tSync = (text: string): string => {
+    return cache[text]?.[language] || text;
+  };
+
+  return (
+    <TranslationContext.Provider
+      value={{
+        language,
+        setLanguage,
+        t: tSync,
+        loading,
+      }}
+    >
+      {children}
+    </TranslationContext.Provider>
+  );
+};
+
+export const useTranslation = () => useContext(TranslationContext);
diff --git a/src/main.tsx b/src/main.tsx
index 93db379..ffe7ca5 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,9 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
+// import { TranslationProvider } from './layouts/app/TranslationContext.tsx';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
+    {/* <TranslationProvider> */}
     <App />
+    {/* </TranslationProvider> */}
   </React.StrictMode>
 );
diff --git a/src/pages/dashboards/Charts/MitreAttackChart.tsx b/src/pages/dashboards/Charts/MitreAttackChart.tsx
index e46c982..a42d028 100644
--- a/src/pages/dashboards/Charts/MitreAttackChart.tsx
+++ b/src/pages/dashboards/Charts/MitreAttackChart.tsx
@@ -1,25 +1,29 @@
 import React from 'react';
-import { Pie } from '@ant-design/charts';
+import { Pie, PieConfig } from '@ant-design/charts';
 import { BarData } from '../../../types/default';
 
+interface PieDataItem {
+  id: string;
+  technique: string;
+  value: number;
+}
+
 interface MitreAttackPieChartProps {
   data: BarData[];
+  onTechniqueClick: (technique: string) => void;
 }
 
-const MitreAttackPieChart: React.FC<MitreAttackPieChartProps> = ({ data }) => {
-  const processedData = data.map((item) => ({
+const MitreAttackPieChart: React.FC<MitreAttackPieChartProps> = ({
+  data,
+  onTechniqueClick,
+}) => {
+  const processedData: PieDataItem[] = data.map((item) => ({
     id: String(item.id),
     technique: item?.tag?.replace('attack.t', 'T') || 'Unknown',
     value: item.log_count,
   }));
 
-  type GroupedDataItem = {
-    id: string;
-    technique: string;
-    value: number;
-  };
-
-  const groupedData = processedData.reduce((acc: GroupedDataItem[], curr) => {
+  const groupedData = processedData.reduce((acc: PieDataItem[], curr) => {
     if (!curr.technique) return acc;
 
     const existing = acc.find((item) => item.technique === curr.technique);
@@ -31,7 +35,7 @@ const MitreAttackPieChart: React.FC<MitreAttackPieChartProps> = ({ data }) => {
     return acc;
   }, []);
 
-  const config = {
+  const pieConfig: PieConfig = {
     data: groupedData,
     angleField: 'value',
     colorField: 'technique',
@@ -44,10 +48,17 @@ const MitreAttackPieChart: React.FC<MitreAttackPieChartProps> = ({ data }) => {
       position: 'right',
     },
     tooltip: {
-      formatter: (datum: GroupedDataItem) => ({
-        name: datum.technique,
-        value: datum.value,
-      }),
+      fields: ['technique', 'value'],
+      formatter: (datum) => {
+        const technique =
+          typeof datum.technique === 'string' ? datum.technique : 'Unknown';
+        const value = typeof datum.value === 'number' ? datum.value : 0;
+
+        return {
+          name: technique,
+          value,
+        };
+      },
     },
     interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
     statistic: {
@@ -62,11 +73,11 @@ const MitreAttackPieChart: React.FC<MitreAttackPieChartProps> = ({ data }) => {
         content: 'MITRE\nATT&CK',
       },
     },
-    color: (datum: GroupedDataItem) => {
-      const tech = datum.technique || '';
-      const num = parseInt(tech.replace(/\D/g, '')) || 0;
+    color: (datum) => {
+      const technique =
+        typeof datum.technique === 'string' ? datum.technique : '';
+      const num = parseInt(technique.replace(/\D/g, ''), 10) || 0;
 
-      // Ranglar ro'yxati
       const colors = [
         '#FF6B6B',
         '#4ECDC4',
@@ -92,10 +103,18 @@ const MitreAttackPieChart: React.FC<MitreAttackPieChartProps> = ({ data }) => {
 
       return colors[num % colors.length];
     },
+
+    onReady: (plot) => {
+      plot.on('element:click', (event: { data: { data: PieDataItem } }) => {
+        const technique = event.data?.data?.technique;
+        if (technique) {
+          onTechniqueClick(technique);
+        }
+      });
+    },
   };
 
-  /*@ts-ignore*/
-  return <Pie {...config} style={{ height: '400px' }} />;
+  return <Pie {...pieConfig} style={{ height: '400px' }} />;
 };
 
 export default MitreAttackPieChart;
diff --git a/src/pages/dashboards/Charts/MitreAttackTable.tsx b/src/pages/dashboards/Charts/MitreAttackTable.tsx
new file mode 100644
index 0000000..fe9b389
--- /dev/null
+++ b/src/pages/dashboards/Charts/MitreAttackTable.tsx
@@ -0,0 +1,149 @@
+import React from 'react';
+import { Table, Card, Alert } from 'antd';
+import { fetchBarListTable } from '../../../service/default';
+import { BarData } from '../../../types/default';
+import { LogItem } from '../../../types/default_chart';
+
+interface TransformedLogItem {
+  id: string;
+  EventId: number;
+  Event: {
+    ProcessId: string;
+    LogonId: string;
+    FileVersion: string;
+    User: string;
+    UtcTime: string;
+  };
+}
+
+interface MitreAttackTableProps {
+  technique: string;
+  barData: BarData[];
+}
+
+const MitreAttackTable: React.FC<MitreAttackTableProps> = ({
+  technique,
+  barData,
+}) => {
+  const [tableData, setTableData] = React.useState<TransformedLogItem[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const columns = [
+    // {
+    //   title: 'ID',
+    //   dataIndex: 'id',
+    //   key: 'id',
+    // },
+    {
+      title: 'User',
+      dataIndex: ['Event', 'User'],
+      key: 'User',
+    },
+    {
+      title: 'Event ID',
+      dataIndex: 'EventId',
+      key: 'EventId',
+    },
+
+    {
+      title: 'Process ID',
+      dataIndex: ['Event', 'ProcessId'],
+      key: 'ProcessId',
+    },
+    {
+      title: 'File Version',
+      dataIndex: ['Event', 'FileVersion'],
+      key: 'FileVersion',
+    },
+    {
+      title: 'Logon Id',
+      dataIndex: ['Event', 'LogonId'],
+      key: 'LogonId',
+    },
+    {
+      title: 'UTC Time',
+      dataIndex: ['Event', 'UtcTime'],
+      key: 'UtcTime',
+      render: (date: string) => {
+        if (!date || date === 'N/A') return 'N/A';
+        try {
+          const originalDate = new Date(date);
+          const adjustedDate = new Date(
+            originalDate.getTime() + 5 * 60 * 60 * 1000
+          );
+          return adjustedDate.toLocaleString();
+        } catch (e) {
+          console.error('Error parsing date:', date);
+          return 'Invalid Date';
+        }
+      },
+    },
+  ];
+
+  React.useEffect(() => {
+    const loadTableData = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const items = barData.filter(
+          (item) => item?.tag?.replace('attack.t', 'T') === technique
+        );
+
+        const transformLogItem = (log: LogItem): TransformedLogItem => ({
+          id: log.id,
+          EventId: log.EventId,
+          Event: {
+            ProcessId: log.Event?.ProcessId || 'N/A',
+            FileVersion: log.Event?.FileVersion || 'N/A',
+            LogonId: log.Event?.LogonId || 'N/A',
+            UtcTime: log.Event?.UtcTime || 'N/A',
+            User: log.Event?.User || 'N/A',
+          },
+        });
+
+        const detailedData = await Promise.all(
+          items.map(async (item) => {
+            const logData = await fetchBarListTable(item.id);
+            return logData.logs.map(transformLogItem);
+          })
+        );
+
+        setTableData(detailedData.flat());
+      } catch (err) {
+        console.error('Error fetching table data:', err);
+        setError('Failed to load detailed data. Please try again.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (technique) {
+      loadTableData();
+    }
+  }, [technique, barData]);
+
+  return (
+    <Card
+      title={`MITRE ATT&CK Details for ${technique}`}
+      style={{ backgroundColor: '#fff' }}
+    >
+      {error && <Alert message={error} type="error" />}
+      <Table
+        dataSource={tableData}
+        columns={columns}
+        loading={loading}
+        rowKey="id"
+        scroll={{ x: true }}
+        pagination={{
+          pageSize: 10,
+          showSizeChanger: true,
+          pageSizeOptions: ['10', '20', '50', '100'],
+        }}
+      />
+    </Card>
+  );
+};
+
+export default MitreAttackTable;
diff --git a/src/pages/dashboards/Charts/RiskChart.tsx b/src/pages/dashboards/Charts/RiskChart.tsx
new file mode 100644
index 0000000..a56faf4
--- /dev/null
+++ b/src/pages/dashboards/Charts/RiskChart.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import { Pie, PieConfig } from '@ant-design/charts';
+import { DeviceRiskBar } from '../../../service/default';
+
+interface PieDataItem {
+  id: string;
+  technique: string;
+  value: number;
+}
+
+interface RiskPieChartProps {
+  data: DeviceRiskBar[];
+  onTechniqueClick: (technique: string) => void;
+}
+
+const RiskPieChart: React.FC<RiskPieChartProps> = ({
+  data,
+  onTechniqueClick,
+}) => {
+  const processedData: PieDataItem[] = data.map((item) => ({
+    id: String(item.device_id),
+    technique: item.device_name,
+    value: item.total_risk,
+  }));
+
+  const groupedData = processedData.reduce((acc: PieDataItem[], curr) => {
+    if (!curr.technique) return acc;
+
+    const existing = acc.find((item) => item.technique === curr.technique);
+    if (existing) {
+      existing.value += curr.value;
+    } else {
+      acc.push({ ...curr });
+    }
+    return acc;
+  }, []);
+
+  const pieConfig: PieConfig = {
+    data: groupedData,
+    angleField: 'value',
+    colorField: 'technique',
+    radius: 0.8,
+    label: {
+      type: 'outer',
+      content: '{name} ({percentage})',
+    },
+    legend: {
+      position: 'right',
+    },
+    tooltip: {
+      fields: ['technique', 'value'],
+      formatter: (datum) => {
+        const technique =
+          typeof datum.technique === 'string' ? datum.technique : 'Unknown';
+        const value = typeof datum.value === 'number' ? datum.value : 0;
+
+        return {
+          name: technique,
+          value,
+        };
+      },
+    },
+    interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
+    statistic: {
+      title: false,
+      content: {
+        style: {
+          whiteSpace: 'pre-wrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          fontSize: '16px',
+        },
+        content: 'Risk Distribution by Device',
+      },
+    },
+    color: (datum) => {
+      const technique =
+        typeof datum.technique === 'string' ? datum.technique : '';
+      let hash = 0;
+      for (let i = 0; i < technique.length; i++) {
+        hash = technique.charCodeAt(i) + ((hash << 5) - hash);
+      }
+
+      const colors = [
+        '#FFA07A',
+        '#98D8C8',
+        '#45B7D1',
+        '#F06292',
+        '#9575CD',
+        '#64B5F6',
+        '#4DB6AC',
+        '#FF8A65',
+        '#A1887F',
+        '#4FC3F7',
+        '#90A4AE',
+        '#E57373',
+        '#DCE775',
+        '#BA68C8',
+        '#FF6B6B',
+        '#4ECDC4',
+        '#81C784',
+        '#FFD54F',
+        '#AED581',
+        '#7986CB',
+      ];
+
+      return colors[Math.abs(hash) % colors.length];
+    },
+    onReady: (plot) => {
+      plot.on('element:click', (event: { data: { data: PieDataItem } }) => {
+        const technique = event.data?.data?.technique;
+        if (technique) {
+          onTechniqueClick(technique);
+        }
+      });
+    },
+  };
+
+  return <Pie {...pieConfig} style={{ height: '400px' }} />;
+};
+
+export default RiskPieChart;
diff --git a/src/pages/dashboards/Charts/RiskTable.tsx b/src/pages/dashboards/Charts/RiskTable.tsx
new file mode 100644
index 0000000..b667216
--- /dev/null
+++ b/src/pages/dashboards/Charts/RiskTable.tsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import { Table, Card, Alert } from 'antd';
+import {
+  DeviceRiskBar,
+  DeviceRiskList,
+  fetchBarRiskListTable,
+} from '../../../service/default';
+
+interface TransformedRiskItem {
+  id: number;
+  risk_ball: number;
+  threat_indicator: string;
+  example: string;
+  created_at: string;
+}
+
+interface RiskTableProps {
+  technique: string;
+  barRiskData: DeviceRiskBar[];
+}
+
+const RiskTable: React.FC<RiskTableProps> = ({ technique, barRiskData }) => {
+  const [tableData, setTableData] = React.useState<TransformedRiskItem[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const columns = [
+    // {
+    //   title: 'ID',
+    //   dataIndex: 'id',
+    //   key: 'id',
+    // },
+    {
+      title: 'Risk ball',
+      dataIndex: 'risk_ball',
+      key: 'risk_ball',
+      render: (text: number) => (text !== undefined ? text : 'N/A'),
+    },
+    {
+      title: 'Threat Indicator',
+      dataIndex: 'threat_indicator',
+      key: 'threat_indicator',
+      render: (text: string) => text || 'N/A',
+    },
+    {
+      title: 'Example',
+      dataIndex: 'example',
+      key: 'example',
+      render: (text: string) => text || 'N/A',
+    },
+    {
+      title: 'Created at',
+      dataIndex: 'created_at',
+      key: 'created_at',
+      render: (date: string) => {
+        if (!date || date === 'N/A') return 'N/A';
+        try {
+          const originalDate = new Date(date);
+          const adjustedDate = new Date(
+            originalDate.getTime() + 5 * 60 * 60 * 1000
+          );
+          return adjustedDate.toLocaleString();
+        } catch (e) {
+          console.error('Error parsing date:', date);
+          return 'Invalid Date';
+        }
+      },
+    },
+  ];
+
+  React.useEffect(() => {
+    const loadTableData = async () => {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const items = barRiskData.filter(
+          (item) => item?.device_name === technique
+        );
+
+        const transformRiskItem = (
+          log: DeviceRiskList
+        ): TransformedRiskItem => ({
+          id: log.id,
+          risk_ball: log.risk_ball,
+          threat_indicator: log.threat_indicator,
+          example: log.example,
+          created_at: log.created_at || 'N/A',
+        });
+
+        const detailedData = await Promise.all(
+          items.map(async (item) => {
+            const logData = await fetchBarRiskListTable(item.device_id);
+            if (Array.isArray(logData)) {
+              return logData.map(transformRiskItem);
+            } else if (logData) {
+              return [transformRiskItem(logData)];
+            } else {
+              return [];
+            }
+          })
+        );
+
+        setTableData(detailedData.flat());
+      } catch (err) {
+        console.error('Error fetching table data:', err);
+        setError('Failed to load detailed data. Please try again.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (technique) {
+      loadTableData();
+    }
+  }, [technique, barRiskData]);
+
+  return (
+    <Card title={`Risk ${technique}`} style={{ backgroundColor: '#fff' }}>
+      {error && <Alert message={error} type="error" />}
+      <Table
+        dataSource={tableData}
+        columns={columns}
+        loading={loading}
+        rowKey="id"
+        scroll={{ x: true }}
+        pagination={{
+          pageSize: 10,
+          showSizeChanger: true,
+          pageSizeOptions: ['10', '20', '50', '100'],
+        }}
+      />
+    </Card>
+  );
+};
+
+export default RiskTable;
diff --git a/src/pages/dashboards/Default.tsx b/src/pages/dashboards/Default.tsx
index 5f79bf1..5ebc643 100644
--- a/src/pages/dashboards/Default.tsx
+++ b/src/pages/dashboards/Default.tsx
@@ -23,6 +23,8 @@ import {
   fetchBarList,
   fetchMismatchesTable,
   fetchMismatchesChart,
+  DeviceRiskBar,
+  fetchBarRiskList,
 } from '../../service/default';
 import {
   BarData,
@@ -36,6 +38,9 @@ import { fetchDeviceList } from '../../service/device_list';
 import MitreAttackPieChart from './Charts/MitreAttackChart';
 import { MismatchesLevelLineChart } from './Charts/LineChart';
 import { SecurityEventsTable } from '../../components/dashboard/default/TabCard/SecurityEventsTable';
+import MitreAttackTable from './Charts/MitreAttackTable';
+import RiskTable from './Charts/RiskTable';
+import RiskPieChart from './Charts/RiskChart';
 
 const { TabPane } = Tabs;
 
@@ -138,12 +143,27 @@ export const DefaultDashboardPage = () => {
     useState<MismatchesLevelChart | null>(null);
   const [error, setError] = useState<ReactNode | null>(null);
   const [loading, setLoading] = useState(false);
+  const [selectedTechnique, setSelectedTechnique] = useState<string | null>(
+    null
+  );
+  const [barRiskData, setRiskBarData] = useState<DeviceRiskBar[]>([]);
+  const [selectedRiskTechnique, setSelectedRiskTechnique] = useState<
+    string | null
+  >(null);
 
   const [pagination, setPagination] = useState({
     current: 1,
     pageSize: 10,
   });
 
+  const handleTechniqueClick = (technique: string) => {
+    setSelectedTechnique(technique);
+  };
+
+  const handleTechniqueRiskClick = (technique: string) => {
+    setSelectedRiskTechnique(technique);
+  };
+
   // pagination
   useEffect(() => {
     const loadData = async () => {
@@ -207,6 +227,23 @@ export const DefaultDashboardPage = () => {
     loadData();
   }, []);
 
+  // pie 2
+  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      try {
+        const data = await fetchBarRiskList();
+        setRiskBarData(data);
+      } catch (error) {
+        console.error("Ma'lumotlarni yuklashda xato:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
+  }, []);
+
   // table1
   useEffect(() => {
     const loadData = async () => {
@@ -336,11 +373,50 @@ export const DefaultDashboardPage = () => {
             style={cardStyles}
             loading={loading}
           >
-            <MitreAttackPieChart data={barData} />
+            <MitreAttackPieChart
+              data={barData}
+              onTechniqueClick={handleTechniqueClick}
+            />
           </Card>
         </Col>
 
         <Col xs={24} lg={12}>
+          <Card
+            title="Risk Distribution by Device"
+            extra={
+              <Popover
+                content="Risk distribution across devices"
+                title="Techniques"
+              >
+                <Button icon={<QuestionOutlined />} {...POPOVER_BUTTON_PROPS} />
+              </Popover>
+            }
+            style={cardStyles}
+            loading={loading}
+          >
+            <RiskPieChart
+              data={barRiskData}
+              onTechniqueClick={handleTechniqueRiskClick}
+            />
+          </Card>
+        </Col>
+
+        {selectedTechnique && (
+          <Col xs={24} lg={24}>
+            <MitreAttackTable technique={selectedTechnique} barData={barData} />
+          </Col>
+        )}
+
+        {selectedRiskTechnique && (
+          <Col xs={24} lg={24}>
+            <RiskTable
+              technique={selectedRiskTechnique}
+              barRiskData={barRiskData}
+            />
+          </Col>
+        )}
+
+        <Col xs={24} lg={24}>
           <Card
             title="Mismatches Level Trend"
             extra={
diff --git a/src/service/default.ts b/src/service/default.ts
index a99d3bd..b3b9b6d 100644
--- a/src/service/default.ts
+++ b/src/service/default.ts
@@ -6,6 +6,7 @@ import {
   SigmaRule,
 } from '../types/default';
 import { NetworkEvent } from '../types/event_logs';
+import { LogData } from '../types/default_chart';
 
 const api = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
@@ -89,7 +90,7 @@ export const fetchBarList = async (): Promise<BarData[]> => {
   }
 };
 
-export const fetchBarListTable = async (id: number): Promise<NetworkEvent> => {
+export const fetchBarListTable = async (id: number): Promise<LogData> => {
   try {
     const response = await api.get(`/elastic/mitra-tags/${id}/`);
     console.log(response.data);
@@ -99,3 +100,41 @@ export const fetchBarListTable = async (id: number): Promise<NetworkEvent> => {
     throw error;
   }
 };
+
+export const fetchBarRiskList = async (): Promise<DeviceRiskBar[]> => {
+  try {
+    const response = await api.get('/elastic/device-risk-summary/');
+    console.log(response.data);
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching device list:', error);
+    throw error;
+  }
+};
+
+export const fetchBarRiskListTable = async (
+  id: number
+): Promise<DeviceRiskList> => {
+  try {
+    const response = await api.get(`/elastic/device-risk-detail/${id}/`);
+    console.log(response.data);
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching device data:', error);
+    throw error;
+  }
+};
+
+export interface DeviceRiskBar {
+  device_id: number;
+  device_name: string;
+  total_risk: number;
+}
+
+export interface DeviceRiskList {
+  id: number;
+  risk_ball: number;
+  threat_indicator: string;
+  example: string;
+  created_at: string;
+}
diff --git a/src/service/translation.ts b/src/service/translation.ts
new file mode 100644
index 0000000..6582922
--- /dev/null
+++ b/src/service/translation.ts
@@ -0,0 +1,49 @@
+// services/translation.ts
+const API_KEY = 'AIzaSyBWEzqtH7W9dbsrX4-IPl_DT_gFIsvzMv4';
+
+export const translateText = async (text: string, targetLanguage: string) => {
+  try {
+    const response = await fetch(
+      `https://translation.googleapis.com/language/translate/v2?key=${API_KEY}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          q: text,
+          target: targetLanguage,
+        }),
+      }
+    );
+
+    const data = await response.json();
+    return data.data.translations[0].translatedText;
+  } catch (error) {
+    console.error('Translation error:', error);
+    return text;
+  }
+};
+
+export const detectLanguage = async (text: string) => {
+  try {
+    const response = await fetch(
+      `https://translation.googleapis.com/language/translate/v2/detect?key=${API_KEY}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          q: text,
+        }),
+      }
+    );
+
+    const data = await response.json();
+    return data.data.detections[0][0].language;
+  } catch (error) {
+    console.error('Language detection error:', error);
+    return 'en'; // Default to English if detection fails
+  }
+};
diff --git a/src/types/default_chart.ts b/src/types/default_chart.ts
new file mode 100644
index 0000000..a98a6e4
--- /dev/null
+++ b/src/types/default_chart.ts
@@ -0,0 +1,67 @@
+// Chart data types
+
+export type LogData = {
+  tag_id: number;
+  tag: string;
+  log_count: number;
+  logs: LogItem[];
+};
+
+export type LogItem = {
+  id: string;
+  EventId: number;
+  Event: EventDetails;
+};
+
+export type EventDetails = {
+  EventHeader: EventHeader;
+  'Task Name': string;
+  RuleName: string;
+  UtcTime: string;
+  ProcessGuid: string;
+  ProcessId: string;
+  Image: string;
+  FileVersion: string;
+  Description: string;
+  Product: string;
+  Company: string;
+  OriginalFileName: string;
+  CommandLine: string;
+  CurrentDirectory: string;
+  User: string;
+  LogonGuid: string;
+  LogonId: string;
+  TerminalSessionId: number;
+  IntegrityLevel: string;
+  Hashes: string;
+  ParentProcessGuid: string;
+  ParentProcessId: string;
+  ParentImage: string;
+  ParentCommandLine: string;
+  ParentUser: string;
+};
+
+export type EventHeader = {
+  Size: number;
+  HeaderType: number;
+  Flags: number;
+  EventProperty: number;
+  ThreadId: number;
+  ProcessId: number;
+  TimeStamp: number;
+  ProviderId: string;
+  EventDescriptor: EventDescriptor;
+  KernelTime: number;
+  UserTime: number;
+  ActivityId: string;
+};
+
+export type EventDescriptor = {
+  Id: number;
+  Version: number;
+  Channel: number;
+  Level: number;
+  Opcode: number;
+  Task: number;
+  Keyword: string;
+};
diff --git a/yarn.lock b/yarn.lock
index de9f1cf..8cc9d7d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1848,11 +1848,9 @@
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
 "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.1", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.15", "@babel/runtime@^7.22.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
-  version "7.23.1"
-  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz"
-  integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
-  dependencies:
-    regenerator-runtime "^0.14.0"
+  version "7.27.4"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.4.tgz"
+  integrity sha512-t3yaEOuGu9NlIZ+hIeGbBjFtZT7j2cb2tg0fuaJKeGotchRjjLfrBA9Kwf8quhpP1EUuxModQg04q/mBwyg8uA==
 
 "@babel/template@^7.22.15", "@babel/template@^7.22.5":
   version "7.22.15"
@@ -10905,11 +10903,6 @@ regenerator-runtime@^0.13.7:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
-regenerator-runtime@^0.14.0:
-  version "0.14.0"
-  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz"
-  integrity sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==
-
 regenerator-transform@^0.15.2:
   version "0.15.2"
   resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz"