diff --git a/packages/ui/src/ui-component/cards/ItemCard.jsx b/packages/ui/src/ui-component/cards/ItemCard.jsx
index fa113ee22a1..c40746e1e70 100644
--- a/packages/ui/src/ui-component/cards/ItemCard.jsx
+++ b/packages/ui/src/ui-component/cards/ItemCard.jsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 
@@ -29,9 +30,36 @@ const CardWrapper = styled(MainCard)(({ theme }) => ({
     whiteSpace: 'pre-line'
 }))
 
+const IconAvatar = ({ iconSrc, fallbackIconSrc }) => {
+    const [imgSrc, setImgSrc] = useState(iconSrc || fallbackIconSrc)
+
+    useEffect(() => {
+        setImgSrc(iconSrc || fallbackIconSrc)
+    }, [iconSrc, fallbackIconSrc])
+
+    if (!imgSrc) return null
+
+    return (
+        <img
+            src={imgSrc}
+            alt='item-icon'
+            onError={() => setImgSrc(fallbackIconSrc || '')}
+            style={{
+                width: 35,
+                height: 35,
+                display: 'flex',
+                flexShrink: 0,
+                marginRight: 10,
+                borderRadius: '50%',
+                objectFit: 'contain'
+            }}
+        />
+    )
+}
+
 // ===========================|| CONTRACT CARD ||=========================== //
 
-const ItemCard = ({ data, images, icons, scheduleStatus, onClick }) => {
+const ItemCard = ({ data, images, icons, onClick, fallbackIconSrc }) => {
     const theme = useTheme()
     const customization = useSelector((state) => state.customization)
 
@@ -49,23 +77,27 @@ const ItemCard = ({ data, images, icons, scheduleStatus, onClick }) => {
                                 overflow: 'hidden'
                             }}
                         >
-                            {data.iconSrc && (
-                                <div
-                                    style={{
-                                        width: 35,
-                                        height: 35,
-                                        display: 'flex',
-                                        flexShrink: 0,
-                                        marginRight: 10,
-                                        borderRadius: '50%',
-                                        backgroundImage: `url(${data.iconSrc})`,
-                                        backgroundSize: 'contain',
-                                        backgroundRepeat: 'no-repeat',
-                                        backgroundPosition: 'center center'
-                                    }}
-                                ></div>
+                            {fallbackIconSrc ? (
+                                <IconAvatar iconSrc={data.iconSrc} fallbackIconSrc={fallbackIconSrc} />
+                            ) : (
+                                data.iconSrc && (
+                                    <div
+                                        style={{
+                                            width: 35,
+                                            height: 35,
+                                            display: 'flex',
+                                            flexShrink: 0,
+                                            marginRight: 10,
+                                            borderRadius: '50%',
+                                            backgroundImage: `url(${data.iconSrc})`,
+                                            backgroundSize: 'contain',
+                                            backgroundRepeat: 'no-repeat',
+                                            backgroundPosition: 'center center'
+                                        }}
+                                    ></div>
+                                )
                             )}
-                            {!data.iconSrc && data.color && (
+                            {!fallbackIconSrc && !data.iconSrc && data.color && (
                                 <div
                                     style={{
                                         width: 35,
@@ -202,8 +234,13 @@ ItemCard.propTypes = {
     data: PropTypes.object,
     images: PropTypes.array,
     icons: PropTypes.array,
-    scheduleStatus: PropTypes.object,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    fallbackIconSrc: PropTypes.string
+}
+
+IconAvatar.propTypes = {
+    iconSrc: PropTypes.string,
+    fallbackIconSrc: PropTypes.string
 }
 
 export default ItemCard
diff --git a/packages/ui/src/ui-component/table/ToolsListTable.jsx b/packages/ui/src/ui-component/table/ToolsListTable.jsx
index f02e6366d9b..9d581af366b 100644
--- a/packages/ui/src/ui-component/table/ToolsListTable.jsx
+++ b/packages/ui/src/ui-component/table/ToolsListTable.jsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import { styled } from '@mui/material/styles'
@@ -15,6 +16,7 @@ import {
     Typography,
     useTheme
 } from '@mui/material'
+import toolSVG from '@/assets/images/tool.svg'
 
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
     borderColor: theme.palette.grey[900] + 25,
@@ -35,6 +37,31 @@ const StyledTableRow = styled(TableRow)(() => ({
     }
 }))
 
+const ToolIconAvatar = ({ iconSrc }) => {
+    const [imgSrc, setImgSrc] = useState(iconSrc || toolSVG)
+
+    useEffect(() => {
+        setImgSrc(iconSrc || toolSVG)
+    }, [iconSrc])
+
+    return (
+        <img
+            src={imgSrc}
+            alt='tool-icon'
+            onError={() => setImgSrc(toolSVG)}
+            style={{
+                width: 35,
+                height: 35,
+                display: 'flex',
+                flexShrink: 0,
+                marginRight: 10,
+                borderRadius: '50%',
+                objectFit: 'contain'
+            }}
+        />
+    )
+}
+
 export const ToolsTable = ({ data, isLoading, onSelect }) => {
     const theme = useTheme()
     const customization = useSelector((state) => state.customization)
@@ -90,20 +117,7 @@ export const ToolsTable = ({ data, isLoading, onSelect }) => {
                                 {data?.map((row, index) => (
                                     <StyledTableRow key={index}>
                                         <StyledTableCell sx={{ display: 'flex', alignItems: 'center', gap: 1 }} key='0'>
-                                            <div
-                                                style={{
-                                                    width: 35,
-                                                    height: 35,
-                                                    display: 'flex',
-                                                    flexShrink: 0,
-                                                    marginRight: 10,
-                                                    borderRadius: '50%',
-                                                    backgroundImage: `url(${row.iconSrc})`,
-                                                    backgroundSize: 'contain',
-                                                    backgroundRepeat: 'no-repeat',
-                                                    backgroundPosition: 'center center'
-                                                }}
-                                            ></div>
+                                            <ToolIconAvatar iconSrc={row.iconSrc} />
                                             <Typography
                                                 sx={{
                                                     display: '-webkit-box',
@@ -142,3 +156,7 @@ ToolsTable.propTypes = {
     isLoading: PropTypes.bool,
     onSelect: PropTypes.func
 }
+
+ToolIconAvatar.propTypes = {
+    iconSrc: PropTypes.string
+}
diff --git a/packages/ui/src/views/tools/ToolDialog.jsx b/packages/ui/src/views/tools/ToolDialog.jsx
index b73b15ec19a..f48b1a7c442 100644
--- a/packages/ui/src/views/tools/ToolDialog.jsx
+++ b/packages/ui/src/views/tools/ToolDialog.jsx
@@ -79,6 +79,7 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
     const [toolName, setToolName] = useState('')
     const [toolDesc, setToolDesc] = useState('')
     const [toolIcon, setToolIcon] = useState('')
+    const [toolIconError, setToolIconError] = useState('')
     const [toolSchema, setToolSchema] = useState([])
     const [toolFunc, setToolFunc] = useState('')
     const [showHowToDialog, setShowHowToDialog] = useState(false)
@@ -88,6 +89,44 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
 
     const [showPasteJSONDialog, setShowPasteJSONDialog] = useState(false)
 
+    const validateToolIconUrl = (iconSource) => {
+        const trimmedIconSource = iconSource?.trim()
+        if (!trimmedIconSource) return ''
+
+        try {
+            const parsedUrl = new URL(trimmedIconSource)
+            if (parsedUrl.protocol !== 'http:' && parsedUrl.protocol !== 'https:') {
+                return 'Tool Icon Source must be a valid HTTP/HTTPS URL'
+            }
+            return ''
+        } catch {
+            return 'Tool Icon Source must be a valid HTTP/HTTPS URL'
+        }
+    }
+
+    const validateIconAndNotify = () => {
+        const iconError = validateToolIconUrl(toolIcon)
+        setToolIconError(iconError)
+
+        if (iconError) {
+            enqueueSnackbar({
+                message: iconError,
+                options: {
+                    key: new Date().getTime() + Math.random(),
+                    variant: 'error',
+                    action: (key) => (
+                        <Button style={{ color: 'white' }} onClick={() => closeSnackbar(key)}>
+                            <IconX />
+                        </Button>
+                    )
+                }
+            })
+            return false
+        }
+
+        return true
+    }
+
     const deleteItem = useCallback(
         (id) => () => {
             setTimeout(() => {
@@ -177,6 +216,8 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
             setToolId(getSpecificToolApi.data.id)
             setToolName(getSpecificToolApi.data.name)
             setToolDesc(getSpecificToolApi.data.description)
+            setToolIcon(getSpecificToolApi.data.iconSrc || '')
+            setToolIconError('')
             setToolSchema(formatDataGridRows(getSpecificToolApi.data.schema))
             if (getSpecificToolApi.data.func) setToolFunc(getSpecificToolApi.data.func)
             else setToolFunc('')
@@ -196,7 +237,8 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
             setToolId(dialogProps.data.id)
             setToolName(dialogProps.data.name)
             setToolDesc(dialogProps.data.description)
-            setToolIcon(dialogProps.data.iconSrc)
+            setToolIcon(dialogProps.data.iconSrc || '')
+            setToolIconError('')
             setToolSchema(formatDataGridRows(dialogProps.data.schema))
             if (dialogProps.data.func) setToolFunc(dialogProps.data.func)
             else setToolFunc('')
@@ -207,7 +249,8 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
             // When tool dialog is to import existing tool
             setToolName(dialogProps.data.name)
             setToolDesc(dialogProps.data.description)
-            setToolIcon(dialogProps.data.iconSrc)
+            setToolIcon(dialogProps.data.iconSrc || '')
+            setToolIconError('')
             setToolSchema(formatDataGridRows(dialogProps.data.schema))
             if (dialogProps.data.func) setToolFunc(dialogProps.data.func)
             else setToolFunc('')
@@ -215,7 +258,8 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
             // When tool dialog is a template
             setToolName(dialogProps.data.name)
             setToolDesc(dialogProps.data.description)
-            setToolIcon(dialogProps.data.iconSrc)
+            setToolIcon(dialogProps.data.iconSrc || '')
+            setToolIconError('')
             setToolSchema(formatDataGridRows(dialogProps.data.schema))
             if (dialogProps.data.func) setToolFunc(dialogProps.data.func)
             else setToolFunc('')
@@ -225,6 +269,7 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
             setToolName('')
             setToolDesc('')
             setToolIcon('')
+            setToolIconError('')
             setToolSchema([])
             setToolFunc('')
         }
@@ -277,6 +322,8 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
     }
 
     const addNewTool = async () => {
+        if (!validateIconAndNotify()) return
+
         try {
             const obj = {
                 name: toolName,
@@ -323,6 +370,8 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
     }
 
     const saveTool = async () => {
+        if (!validateIconAndNotify()) return
+
         try {
             const saveResp = await toolsApi.updateTool(toolId, {
                 name: toolName,
@@ -513,8 +562,23 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
                             placeholder='https://raw.githubusercontent.com/gilbarbara/logos/main/logos/airtable.svg'
                             value={toolIcon}
                             name='toolIcon'
-                            onChange={(e) => setToolIcon(e.target.value)}
+                            error={!!toolIconError}
+                            onBlur={() => setToolIconError(validateToolIconUrl(toolIcon))}
+                            onChange={(e) => {
+                                const iconSource = e.target.value
+                                setToolIcon(iconSource)
+                                setToolIconError(validateToolIconUrl(iconSource))
+                            }}
                         />
+                        {toolIconError ? (
+                            <Typography sx={{ mt: 0.5 }} variant='caption' color='error'>
+                                {toolIconError}
+                            </Typography>
+                        ) : (
+                            <Typography sx={{ mt: 0.5 }} variant='caption' color='text.secondary'>
+                                Optional. Leave empty to use the default tool icon.
+                            </Typography>
+                        )}
                     </Box>
                     <Box>
                         <Stack sx={{ position: 'relative', justifyContent: 'space-between' }} direction='row'>
@@ -583,7 +647,7 @@ const ToolDialog = ({ show, dialogProps, onUseTemplate, onCancel, onConfirm, set
                 {dialogProps.type !== 'TEMPLATE' && (
                     <StyledPermissionButton
                         permissionId={'tools:update,tools:create'}
-                        disabled={!(toolName && toolDesc)}
+                        disabled={!(toolName && toolDesc) || !!validateToolIconUrl(toolIcon)}
                         variant='contained'
                         onClick={() => (dialogProps.type === 'ADD' || dialogProps.type === 'IMPORT' ? addNewTool() : saveTool())}
                     >
diff --git a/packages/ui/src/views/tools/index.jsx b/packages/ui/src/views/tools/index.jsx
index 0c15ee2b474..bc8427fcf9c 100644
--- a/packages/ui/src/views/tools/index.jsx
+++ b/packages/ui/src/views/tools/index.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef } from 'react'
 
 // material-ui
-import { Box, Stack, ButtonGroup, Skeleton, ToggleButtonGroup, ToggleButton, Tabs, Tab } from '@mui/material'
+import { Box, Stack, ButtonGroup, Skeleton, ToggleButtonGroup, ToggleButton } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 
 // project imports
@@ -29,6 +29,7 @@ import { gridSpacing } from '@/store/constant'
 // icons
 import { IconPlus, IconFileUpload, IconLayoutGrid, IconList } from '@tabler/icons-react'
 import ToolEmptySVG from '@/assets/images/tools_empty.svg'
+import toolSVG from '@/assets/images/tool.svg'
 
 // ==============================|| TOOLS ||============================== //
 
@@ -413,14 +414,108 @@ const Tools = () => {
                                 borderColor: 'divider'
                             }}
                         >
-                            <Tabs value={tabValue} onChange={(e, newValue) => setTabValue(newValue)} aria-label='tools tabs'>
-                                <Tab label='Custom Tools' />
-                                <Tab label='Custom MCP Servers' />
-                            </Tabs>
-                            <Box sx={{ pb: 1 }}>{tabValue === 0 ? renderCustomToolsToolbar() : renderMcpServersToolbar()}</Box>
+                            <ToggleButtonGroup
+                                sx={{ borderRadius: 2, maxHeight: 40 }}
+                                value={view}
+                                color='primary'
+                                disabled={total === 0}
+                                exclusive
+                                onChange={handleChange}
+                            >
+                                <ToggleButton
+                                    sx={{
+                                        borderColor: theme.palette.grey[900] + 25,
+                                        borderRadius: 2,
+                                        color: theme?.customization?.isDarkMode ? 'white' : 'inherit'
+                                    }}
+                                    variant='contained'
+                                    value='card'
+                                    title='Card View'
+                                >
+                                    <IconLayoutGrid />
+                                </ToggleButton>
+                                <ToggleButton
+                                    sx={{
+                                        borderColor: theme.palette.grey[900] + 25,
+                                        borderRadius: 2,
+                                        color: theme?.customization?.isDarkMode ? 'white' : 'inherit'
+                                    }}
+                                    variant='contained'
+                                    value='list'
+                                    title='List View'
+                                >
+                                    <IconList />
+                                </ToggleButton>
+                            </ToggleButtonGroup>
+                            <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                                <PermissionButton
+                                    permissionId={'tools:create'}
+                                    variant='outlined'
+                                    onClick={() => inputRef.current.click()}
+                                    startIcon={<IconFileUpload />}
+                                    sx={{ borderRadius: 2, height: 40 }}
+                                >
+                                    Load
+                                </PermissionButton>
+                                <input
+                                    style={{ display: 'none' }}
+                                    ref={inputRef}
+                                    type='file'
+                                    hidden
+                                    accept='.json'
+                                    onChange={(e) => handleFileUpload(e)}
+                                />
+                            </Box>
+                            <ButtonGroup disableElevation aria-label='outlined primary button group'>
+                                <StyledPermissionButton
+                                    permissionId={'tools:create'}
+                                    variant='contained'
+                                    onClick={addNew}
+                                    startIcon={<IconPlus />}
+                                    sx={{ borderRadius: 2, height: 40 }}
+                                >
+                                    Create
+                                </StyledPermissionButton>
+                            </ButtonGroup>
                         </Box>
-                        {tabValue === 0 && renderCustomToolsTab()}
-                        {tabValue === 1 && renderMcpServersTab()}
+                        {isLoading && (
+                            <Box display='grid' gridTemplateColumns='repeat(3, 1fr)' gap={gridSpacing}>
+                                <Skeleton variant='rounded' height={160} />
+                                <Skeleton variant='rounded' height={160} />
+                                <Skeleton variant='rounded' height={160} />
+                            </Box>
+                        )}
+                        {!isLoading && total > 0 && (
+                            <>
+                                {!view || view === 'card' ? (
+                                    <Box display='grid' gridTemplateColumns='repeat(3, 1fr)' gap={gridSpacing}>
+                                        {getAllToolsApi.data?.data?.filter(filterTools).map((data, index) => (
+                                            <ItemCard data={data} key={index} onClick={() => edit(data)} fallbackIconSrc={toolSVG} />
+                                        ))}
+                                    </Box>
+                                ) : (
+                                    <ToolsTable
+                                        data={getAllToolsApi.data?.data?.filter(filterTools) || []}
+                                        isLoading={isLoading}
+                                        onSelect={edit}
+                                    />
+                                )}
+                                {/* Pagination and Page Size Controls */}
+                                <TablePagination currentPage={currentPage} limit={pageLimit} total={total} onChange={onChange} />
+                            </>
+                        )}
+                        {!isLoading && total === 0 && (
+                            <Stack sx={{ alignItems: 'center', justifyContent: 'center' }} flexDirection='column'>
+                                <Box sx={{ p: 2, height: 'auto' }}>
+                                    <img
+                                        style={{ objectFit: 'cover', height: '20vh', width: 'auto' }}
+                                        src={ToolEmptySVG}
+                                        alt='ToolEmptySVG'
+                                    />
+                                </Box>
+                                <div>No Tools Created Yet</div>
+                            </Stack>
+                        )}
                     </Stack>
                 )}
             </MainCard>