diff --git a/src/main/index.ts b/src/main/index.ts
index 2dc3474ec2..87244710f4 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -76,8 +76,10 @@ app.whenReady().then(() => {
     optimizer.watchWindowShortcuts(window)
   })
 
-  // IPC test
-  ipcMain.on('ping', () => console.log('pong'))
+  // IPC
+  ipcMain.handle('get-app-info', () => ({
+    version: app.getVersion()
+  }))
 
   createWindow()
 
diff --git a/src/preload/index.d.ts b/src/preload/index.d.ts
index d9a3019a6b..69767f0f36 100644
--- a/src/preload/index.d.ts
+++ b/src/preload/index.d.ts
@@ -3,6 +3,10 @@ import { ElectronAPI } from '@electron-toolkit/preload'
 declare global {
   interface Window {
     electron: ElectronAPI
-    api: any
+    api: {
+      getAppInfo: () => Promise<{
+        version: string
+      }>
+    }
   }
 }
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 2d1852475c..8782ff0547 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -1,8 +1,10 @@
-import { contextBridge } from 'electron'
+import { contextBridge, ipcRenderer } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'
 
 // Custom APIs for renderer
-const api = {}
+const api = {
+  getAppInfo: () => ipcRenderer.invoke('get-app-info')
+}
 
 // Use `contextBridge` APIs to expose Electron APIs to
 // renderer only if context isolation is enabled, otherwise
diff --git a/src/renderer/src/pages/home/components/Message.tsx b/src/renderer/src/pages/home/components/Message.tsx
index db1f5e30e7..8f905db501 100644
--- a/src/renderer/src/pages/home/components/Message.tsx
+++ b/src/renderer/src/pages/home/components/Message.tsx
@@ -11,7 +11,7 @@ const MessageItem: FC<{ message: Message }> = ({ message }) => {
       <AvatarWrapper>
         {message.role === 'assistant' ? <Avatar src={Logo} /> : <Avatar alt="Alice Swift">Y</Avatar>}
       </AvatarWrapper>
-      <div className="markdown" dangerouslySetInnerHTML={{ __html: marked(message.content) }}></div>
+      <div className="markdown" dangerouslySetInnerHTML={{ __html: marked(message.content) }} />
     </MessageContainer>
   )
 }
diff --git a/src/renderer/src/pages/settings/AboutSettings.tsx b/src/renderer/src/pages/settings/AboutSettings.tsx
index 5b4058394a..5b893b27d8 100644
--- a/src/renderer/src/pages/settings/AboutSettings.tsx
+++ b/src/renderer/src/pages/settings/AboutSettings.tsx
@@ -1,12 +1,66 @@
-import { FC } from 'react'
+import { Avatar } from 'antd'
+import { FC, useEffect, useState } from 'react'
 import styled from 'styled-components'
+import Logo from '@renderer/assets/images/logo.png'
+import { runAsyncFunction } from '@renderer/utils'
+import { marked } from 'marked'
+
+const changeLog = ``
 
 const AboutSettings: FC = () => {
-  return <Container>About</Container>
+  const [version, setVersion] = useState('')
+
+  useEffect(() => {
+    runAsyncFunction(async () => {
+      const appInfo = await window.api.getAppInfo()
+      setVersion(appInfo.version)
+    })
+  }, [])
+
+  return (
+    <Container>
+      <Avatar src={Logo} size={100} style={{ marginTop: 50 }} />
+      <Title>
+        Cherry Studio <Version>(v{version})</Version>
+      </Title>
+      <Description>A powerful AI assistant for producer.</Description>
+      <div
+        className="markdown"
+        style={{ width: '80%' }}
+        dangerouslySetInnerHTML={{
+          __html: marked(changeLog)
+        }}
+      />
+    </Container>
+  )
 }
 
 const Container = styled.div`
   padding: 20px;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+`
+
+const Title = styled.div`
+  font-size: 20px;
+  font-weight: bold;
+  color: var(--color-text-1);
+  margin: 10px 0;
+`
+
+const Version = styled.span`
+  font-size: 14px;
+  color: var(--color-text-2);
+  margin: 10px 0;
+  text-align: center;
+`
+
+const Description = styled.div`
+  font-size: 14px;
+  color: var(--color-text-2);
+  text-align: center;
 `
 
 export default AboutSettings