diff --git a/next.config.mjs b/next.config.mjs
index c81fa3b..a58e67a 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,7 +1,20 @@
+const isProd = process.env.NODE_ENV === 'production';
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   transpilePackages: ['@lobehub/ui'],
+  images: {
+    remotePatterns: [
+      {
+        hostname: 'registry.npmmirror.com',
+        pathname: '/@lobehub/**',
+        port: '',
+        protocol: 'https',
+      },
+    ],
+    unoptimized: !isProd,
+  },
   async headers() {
     return [
       {
diff --git a/src/app/App.tsx b/src/app/App.tsx
index e994607..280fca5 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -10,10 +10,10 @@ interface AppProps {
 }
 export const App = memo<AppProps>(({ style }) => {
   return (
-    <Flexbox gap={8} style={style}>
+    <Flexbox gap={12} style={{ maxHeight: '100dvh', overflow: 'hidden', ...style }}>
       <PromptInput />
-      <TaskList />
       <ImagePreview />
+      <TaskList />
     </Flexbox>
   );
 });
diff --git a/src/app/iframe/page.tsx b/src/app/iframe/page.tsx
index 1fcd542..643a84e 100644
--- a/src/app/iframe/page.tsx
+++ b/src/app/iframe/page.tsx
@@ -6,20 +6,20 @@ import { Flexbox } from 'react-layout-kit';
 import PromptInput from '@/features/Input';
 import ImagePreview from '@/features/Preview';
 import TaskList from '@/features/TaskList';
-import { useMidjourneyStore } from '@/store/midjourney';
+import { useStore } from '@/store';
 
 import './global.css';
 
 const InLobeChatPage = memo(() => {
-  const [useInitApp] = useMidjourneyStore((s) => [s.useInitApp]);
+  const [useInitApp] = useStore((s) => [s.useInitApp]);
 
   useInitApp();
 
   return (
-    <Flexbox gap={12} padding={'0 4px 8px'} style={{ height: '100vh' }}>
+    <Flexbox gap={12} style={{ height: '100dvh' }}>
       <PromptInput />
-      <TaskList />
       <ImagePreview />
+      <TaskList />
     </Flexbox>
   );
 });
diff --git a/src/app/page.tsx b/src/app/page.tsx
index efb084c..e8cf9d5 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,35 +1,41 @@
 'use client';
 
+import { Logo } from '@lobehub/ui';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import Settings from '@/features/Settings';
-import { useMidjourneyStore } from '@/store/midjourney';
+import { useStore } from '@/store';
 
 import { App } from './App';
 
 const Page = memo(() => {
-  const [useInitApp] = useMidjourneyStore((s) => [s.useInitApp]);
+  const [useInitApp] = useStore((s) => [s.useInitApp]);
 
   useInitApp();
 
   const theme = useTheme();
 
   return (
-    <Flexbox
-      align={'center'}
-      padding={16}
-      style={{ background: theme.colorBgLayout, height: '100vh' }}
-    >
+    <Flexbox gap={16} padding={16} style={{ background: theme.colorBgLayout, height: '100vh' }}>
+      <Flexbox align={'center'} horizontal justify={'space-between'}>
+        <Logo
+          extra={'Midjourney Webui'}
+          onClick={() => {
+            window.open('https://github.com/lobehub/chat-plugin-midjourney', '_blank');
+          }}
+          style={{ cursor: 'pointer' }}
+          type={'combine'}
+        />
+        <Settings />
+      </Flexbox>
       <App
         style={{
           height: '100%',
-          maxWidth: 1152,
           width: '100%',
         }}
       />
-      <Settings />
     </Flexbox>
   );
 });
diff --git a/src/features/Input.tsx b/src/features/Input.tsx
index 4a8ebfb..e628a2a 100644
--- a/src/features/Input.tsx
+++ b/src/features/Input.tsx
@@ -1,34 +1,46 @@
-import { TextArea } from '@lobehub/ui';
-import { Button, Flex } from 'antd';
+import { ActionIcon, TextArea } from '@lobehub/ui';
+import { Flex } from 'antd';
+import { createStyles } from 'antd-style';
+import { SendHorizontal } from 'lucide-react';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
-import { useMidjourneyStore } from '@/store/midjourney';
+import { useStore } from '@/store';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    padding: 4px;
+    background: ${token.colorFillTertiary};
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+  prompt: css`
+    padding: 6px;
+    font-family: ${token.fontFamilyCode};
+  `,
+}));
 
 const PromptInput = memo(() => {
-  const [prompts, updatePrompts, createImagineTask] = useMidjourneyStore((s) => [
+  const { styles } = useStyles();
+  const [prompts, updatePrompts, createImagineTask] = useStore((s) => [
     s.prompts,
     s.updatePrompts,
     s.createImagineTask,
   ]);
 
   return (
-    <Flex gap={8}>
+    <Flex align={'flex-end'} className={styles.container} gap={8}>
       <TextArea
+        autoSize={{ maxRows: 3, minRows: 1 }}
+        className={styles.prompt}
         onChange={(e) => {
           updatePrompts(e.target.value);
         }}
-        placeholder={'请输入提示词'}
-        size={'large'}
-        style={{ maxHeight: 160, minHeight: 80 }}
-        type={'block'}
+        placeholder={'Midjourney Prompt...'}
+        resize={false}
+        type={'pure'}
         value={prompts}
       />
-      <Flexbox direction={'vertical-reverse'} gap={8}>
-        <Button onClick={() => createImagineTask()} style={{ height: '100%' }} type={'primary'}>
-          生成
-        </Button>
-      </Flexbox>
+      <ActionIcon active icon={SendHorizontal} onClick={() => createImagineTask()} />
     </Flex>
   );
 });
diff --git a/src/features/Preview/Actions.tsx b/src/features/Preview/Actions.tsx
index e2bdf2e..2666b30 100644
--- a/src/features/Preview/Actions.tsx
+++ b/src/features/Preview/Actions.tsx
@@ -2,7 +2,7 @@ import { createStyles } from 'antd-style';
 import { memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { midjourneySelectors, useMidjourneyStore } from '@/store/midjourney';
+import { midjourneySelectors, useStore } from '@/store';
 
 import ImagineAction from './ImagineAction';
 
@@ -24,7 +24,7 @@ const useStyles = createStyles(({ css }) => ({
 }));
 
 const Actions = memo<{ setMask: (mask: boolean) => void }>(({ setMask }) => {
-  const currentTask = useMidjourneyStore(midjourneySelectors.currentActiveTask);
+  const currentTask = useStore(midjourneySelectors.currentActiveTask);
   const { styles } = useStyles();
   const content = useMemo(() => {
     switch (currentTask?.action) {
diff --git a/src/features/Preview/Image.tsx b/src/features/Preview/Image.tsx
index 0f1c992..6808785 100644
--- a/src/features/Preview/Image.tsx
+++ b/src/features/Preview/Image.tsx
@@ -1,63 +1,31 @@
 import { Image } from '@lobehub/ui';
-import { useSize } from 'ahooks';
-import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
-import { memo, useEffect, useRef, useState } from 'react';
-import { Dimensions, getImageSize } from 'react-image-size';
+import { memo, useState } from 'react';
 import { Center } from 'react-layout-kit';
 
-import { midjourneySelectors, useMidjourneyStore } from '@/store/midjourney';
+import { midjourneySelectors, useStore } from '@/store';
 
 import Actions from './Actions';
 
-interface Size extends Dimensions {
-  aspectRadio: number;
-}
-
-const fetchImageSize = async (url: string): Promise<Size | undefined> => {
-  try {
-    const dim = await getImageSize(url);
-    return { ...dim, aspectRadio: dim.width / dim.height };
-  } catch (error) {
-    console.log(error);
-    return;
-  }
-};
-
-const getContainerSize = (content?: Dimensions, container?: Dimensions) => {
-  if (!content || !container) return {};
-  let width = String(content?.width);
-  let height = String(content?.height);
-
-  const maxWidth = container.width;
-  const maxHeight = container.height;
-  let maxValue: number = 0;
-
-  if (content?.height >= content?.width && content?.height >= maxHeight) {
-    maxValue = maxHeight;
-    height = maxHeight + 'px';
-    width = 'auto';
-  } else if (content?.width >= content?.height && content?.width >= maxWidth) {
-    height = 'auto';
-    width = maxWidth + 'px';
-    maxValue = maxWidth;
-  } else {
-    width = width + 'px';
-    height = height + 'px';
-  }
-  maxValue = maxValue - 16;
-
-  return { height, maxValue, width };
-};
-
-const useStyles = createStyles(({ css, prefixCls }, inLobeChat: boolean) => {
+const useStyles = createStyles(({ css, prefixCls, token }) => {
   return {
+    empty: css`
+      width: var(--max);
+      height: var(--max);
+      background: ${token.colorTextTertiary};
+      border-radius: ${token.borderRadiusLG}px;
+    `,
     image: css`
-      border-radius: ${inLobeChat ? 8 : 24}px;
+      border-radius: ${token.borderRadiusLG}px;
     `,
     imageWrapper: css`
       margin-block: 0;
-      border-radius: ${inLobeChat ? 8 : 24}px;
+      border-radius: ${token.borderRadiusLG}px;
+
+      img {
+        width: var(--max);
+        height: var(--max);
+      }
     `,
     imagine: css`
       .${prefixCls}-image-mask:hover {
@@ -68,33 +36,16 @@ const useStyles = createStyles(({ css, prefixCls }, inLobeChat: boolean) => {
 });
 
 const ImagePreview = memo(() => {
-  const inLobeChat = useMidjourneyStore((s) => s.inLobeChat);
-
-  const { styles, cx, theme } = useStyles(inLobeChat);
+  const { styles, cx } = useStyles();
 
   const [modal, setMask] = useState<boolean>(false);
-  const [dim, setDims] = useState<Size>();
-  const containerRef = useRef(null);
-  const size = useSize(containerRef);
-
-  const imageContainerSize = getContainerSize(dim, size);
 
-  const currentTask = useMidjourneyStore(midjourneySelectors.currentActiveTask);
-
-  useEffect(() => {
-    const url = currentTask?.imageUrl;
-    if (!url) return;
-
-    fetchImageSize(url).then((size) => {
-      if (!size) return;
-      setDims(size);
-    });
-  }, [currentTask?.imageUrl]);
+  const currentTask = useStore(midjourneySelectors.currentActiveTask);
 
   return (
-    <Center flex={1} height={'100%'} ref={containerRef} width={'100%'}>
+    <Center flex={1} height={`var(--max)`} width={`var(--max)`}>
       {currentTask?.imageUrl ? (
-        <div style={{ position: 'relative' }}>
+        <div style={{ height: `var(--max)`, maxWidth: `var(--max)`, position: 'relative' }}>
           <Image
             className={styles.image}
             preview={{ onVisibleChange: setMask, visible: modal }}
@@ -103,23 +54,11 @@ const ImagePreview = memo(() => {
               styles.imageWrapper,
               currentTask.action === 'IMAGINE' && styles.imagine,
             )}
-            {...imageContainerSize}
           />
-          <Actions setMask={setMask} />
+          {currentTask.action !== 'UPSCALE' && <Actions setMask={setMask} />}
         </div>
       ) : (
-        <Skeleton.Node
-          active
-          style={{
-            borderRadius: inLobeChat ? 8 : 24,
-            color: theme.colorTextTertiary,
-
-            height: imageContainerSize.maxValue || inLobeChat ? 400 : 600,
-            width: imageContainerSize.maxValue || inLobeChat ? 400 : 600,
-          }}
-        >
-          Task is waiting to start...
-        </Skeleton.Node>
+        <div className={styles.empty} />
       )}
     </Center>
   );
diff --git a/src/features/Preview/ImagineAction.tsx b/src/features/Preview/ImagineAction.tsx
index d8de953..4074822 100644
--- a/src/features/Preview/ImagineAction.tsx
+++ b/src/features/Preview/ImagineAction.tsx
@@ -1,36 +1,24 @@
-import { Icon } from '@lobehub/ui';
-import { Button } from 'antd';
+import { ActionIcon } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { LucideScaling, LucideWand, RefreshCwIcon } from 'lucide-react';
+import { RefreshCwIcon } from 'lucide-react';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { midjourneySelectors, useMidjourneyStore } from '@/store/midjourney';
+import { midjourneySelectors, useStore } from '@/store';
 
-const useStyles = createStyles(({ css, cx }) => {
-  const buttonCtn = css`
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-
-    opacity: 0;
-
-    transition: opacity 0.3s;
-  `;
+import ImagineActionItem from './ImagineActionItem';
 
+const useStyles = createStyles(({ css, token }) => {
   return {
-    buttonCtn,
-    item: css`
-      position: relative;
+    container: css`
+      border-radius: ${token.borderRadiusLG}px;
 
       &:hover {
-        .${cx(buttonCtn)} {
-          opacity: 1;
+        .image-item {
+          background: rgba(0, 0, 0, 50%);
         }
       }
     `,
-
     reroll: css`
       position: absolute;
       top: 16px;
@@ -62,7 +50,7 @@ interface ImageActionProps {
 const ImageAction = memo<ImageActionProps>(({ setMask, id }) => {
   const { styles, cx } = useStyles();
 
-  const [createSimpleChangeTask, isSuccess] = useMidjourneyStore((s) => [
+  const [createSimpleChangeTask, isSuccess] = useStore((s) => [
     s.createChangeTask,
     midjourneySelectors.getTaskById(id)(s)?.status === 'SUCCESS',
   ]);
@@ -71,6 +59,7 @@ const ImageAction = memo<ImageActionProps>(({ setMask, id }) => {
     isSuccess && (
       <>
         <Flexbox
+          className={styles.container}
           height={'100%'}
           horizontal
           onClick={() => {
@@ -79,51 +68,35 @@ const ImageAction = memo<ImageActionProps>(({ setMask, id }) => {
           style={{ cursor: 'pointer', flexWrap: 'wrap' }}
         >
           {array.map((index) => (
-            <Flexbox className={styles.item} height={'50%'} key={index} width={'50%'}>
-              <Flexbox className={styles.buttonCtn} gap={16} horizontal>
-                <Button
-                  icon={<Icon icon={LucideScaling} />}
-                  onClick={(e) => {
-                    e.stopPropagation();
-
-                    if (!id) return;
-                    createSimpleChangeTask({ action: 'UPSCALE', index, taskId: id });
-                  }}
-                  shape={'round'}
-                  type={'primary'}
-                >
-                  高清化
-                </Button>
-                <Button
-                  icon={<Icon icon={LucideWand} />}
-                  onClick={(e) => {
-                    e.stopPropagation();
-
-                    if (!id) return;
-                    createSimpleChangeTask({ action: 'VARIATION', index, taskId: id });
-                  }}
-                  shape={'round'}
-                >
-                  风格化
-                </Button>
-              </Flexbox>
-            </Flexbox>
+            <ImagineActionItem
+              key={index}
+              onUpscale={(e) => {
+                e.stopPropagation();
+
+                if (!id) return;
+                createSimpleChangeTask({ action: 'UPSCALE', index, taskId: id });
+              }}
+              onVary={(e) => {
+                e.stopPropagation();
+
+                if (!id) return;
+                createSimpleChangeTask({ action: 'VARIATION', index, taskId: id });
+              }}
+            />
           ))}
         </Flexbox>
-        <div className={cx('action-reroll', styles.reroll)}>
-          <Button
-            icon={<Icon icon={RefreshCwIcon} />}
-            onClick={(e) => {
-              e.stopPropagation();
-
-              if (!id) return;
-              createSimpleChangeTask({ action: 'REROLL', taskId: id });
-            }}
-            shape={'round'}
-          >
-            重新生成
-          </Button>
-        </div>
+        <ActionIcon
+          active
+          className={cx('action-reroll', styles.reroll)}
+          glass
+          icon={RefreshCwIcon}
+          onClick={(e) => {
+            e.stopPropagation();
+
+            if (!id) return;
+            createSimpleChangeTask({ action: 'REROLL', taskId: id });
+          }}
+        />
       </>
     )
   );
diff --git a/src/features/Preview/ImagineActionItem.tsx b/src/features/Preview/ImagineActionItem.tsx
new file mode 100644
index 0000000..1f8dc22
--- /dev/null
+++ b/src/features/Preview/ImagineActionItem.tsx
@@ -0,0 +1,62 @@
+import { Icon } from '@lobehub/ui';
+import { Button, ButtonProps, Space } from 'antd';
+import { createStyles } from 'antd-style';
+import { Brush, Expand } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, cx }) => {
+  const buttonCtn = css`
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+
+    opacity: 0;
+
+    transition: opacity 0.3s ease-in-out;
+  `;
+
+  return {
+    buttonCtn,
+
+    item: cx(
+      'image-item',
+      css`
+        position: relative;
+        transition: background 0.3s ease-in-out;
+
+        &:hover {
+          background: transparent !important;
+          .${cx(buttonCtn)} {
+            opacity: 1;
+          }
+        }
+      `,
+    ),
+  };
+});
+
+interface ImageActionItemProps {
+  onUpscale: ButtonProps['onClick'];
+  onVary: ButtonProps['onClick'];
+}
+
+const ImagineActionItem = memo<ImageActionItemProps>(({ onUpscale, onVary }) => {
+  const { styles } = useStyles();
+
+  return (
+    <Flexbox className={styles.item} height={'50%'} width={'50%'}>
+      <Space.Compact className={styles.buttonCtn}>
+        <Button icon={<Icon icon={Expand} />} onClick={onUpscale}>
+          Upscale
+        </Button>
+        <Button icon={<Icon icon={Brush} />} onClick={onVary}>
+          Vary
+        </Button>
+      </Space.Compact>
+    </Flexbox>
+  );
+});
+
+export default ImagineActionItem;
diff --git a/src/features/Preview/index.tsx b/src/features/Preview/index.tsx
index fd8f8e4..f850abb 100644
--- a/src/features/Preview/index.tsx
+++ b/src/features/Preview/index.tsx
@@ -1,55 +1,65 @@
+import { useSize } from 'ahooks';
 import { Progress } from 'antd';
 import { createStyles } from 'antd-style';
-import { memo } from 'react';
-import { Center, Flexbox } from 'react-layout-kit';
+import { memo, useEffect, useRef } from 'react';
+import { Center } from 'react-layout-kit';
 
-import { midjourneySelectors, useMidjourneyStore } from '@/store/midjourney';
+import { midjourneySelectors, useStore } from '@/store';
 
 import Guide from './Guide';
 import ImagePreview from './Image';
 
-const useStyles = createStyles(({ css, token }) => ({
+const useStyles = createStyles(({ css, token, cx, stylish, prefixCls }) => ({
   container: css`
     position: relative;
     overflow: hidden;
-    background: ${token.colorFillTertiary};
   `,
-  process: css`
-    position: absolute;
-    right: 0;
-    bottom: -4px;
-    left: 0;
+  process: cx(
+    // @ts-ignore
+    stylish.blur,
+    css`
+      position: absolute;
+      z-index: 100;
 
-    width: 100%;
+      padding: 8px;
 
-    > .ant-progress-line {
-      margin-bottom: 0;
-      margin-inline-end: 0;
-    }
-  `,
+      background: ${token.colorFillTertiary};
+      border-radius: 50%;
+      .${prefixCls}-progress-text {
+        font-family: ${token.fontFamilyCode};
+      }
+    `,
+  ),
 }));
 
 const Preview = memo(() => {
-  const [progress, taskLoading, inLobeChat] = useMidjourneyStore((s) => [
+  const ref = useRef<HTMLDivElement>(null);
+  const size = useSize(ref);
+  const [progress, taskLoading, inLobeChat] = useStore((s) => [
     midjourneySelectors.currentTaskProgress(s),
     midjourneySelectors.isCurrentTaskRunning(s),
     midjourneySelectors.isInLobeChat(s),
   ]);
 
-  const { styles, theme } = useStyles();
-  const currentTask = useMidjourneyStore(midjourneySelectors.currentActiveTask);
+  const { styles } = useStyles();
+  const currentTask = useStore(midjourneySelectors.currentActiveTask);
 
   const showImage = taskLoading || currentTask?.imageUrl;
 
+  useEffect(() => {
+    if (!size) return;
+    const maxSize = size.width > size.height ? size.height : size.width;
+    document.documentElement.style.setProperty('--max', `${maxSize}px`);
+    console.log(maxSize);
+  }, [size]);
+
   return (
-    <Flexbox
-      className={styles.container}
-      flex={1}
-      gap={8}
-      height={'calc(100vh - 80px - 64px - 8*2px - 2*16px )'}
-      padding={16}
-      style={{ borderRadius: inLobeChat ? 8 : 24 }}
-    >
+    <Center className={styles.container} flex={1} gap={8} justify={'center'} ref={ref}>
+      {taskLoading && progress !== 100 && (
+        <div className={styles.process}>
+          <Progress percent={progress} size="small" type="circle" />
+        </div>
+      )}
       {showImage ? (
         <ImagePreview />
       ) : inLobeChat ? null : (
@@ -57,18 +67,7 @@ const Preview = memo(() => {
           <Guide />
         </Center>
       )}
-      {taskLoading && progress !== 100 && (
-        <div className={styles.process}>
-          <Progress
-            percent={progress}
-            showInfo={false}
-            size={['100%', inLobeChat ? 12 : 16]}
-            strokeColor={{ from: theme.blue7, to: theme.green7 }}
-            strokeLinecap={'square'}
-          />
-        </div>
-      )}
-    </Flexbox>
+    </Center>
   );
 });
 
diff --git a/src/features/Settings.tsx b/src/features/Settings.tsx
index 3880f5a..6e70bb3 100644
--- a/src/features/Settings.tsx
+++ b/src/features/Settings.tsx
@@ -1,12 +1,12 @@
-import { Alert, Icon, Input } from '@lobehub/ui';
-import { Button, Drawer, FloatButton, Typography } from 'antd';
+import { ActionIcon, Alert, Icon, Input, Modal } from '@lobehub/ui';
+import { Button, Typography } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { LucideSettings } from 'lucide-react';
+import { LucideSettings, Save } from 'lucide-react';
 import Link from 'next/link';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
-import { useMidjourneyStore } from '@/store/midjourney';
+import { useStore } from '@/store';
 
 const getErrorContent = (errorType: string | { type: string }) => {
   if (typeof errorType === 'string') return errorType;
@@ -20,22 +20,35 @@ const getErrorContent = (errorType: string | { type: string }) => {
   return '网络请求错误';
 };
 const Settings = memo(() => {
-  const [isSettingsModalOpen, MIDJOURNEY_API_URL, updateSettings] = useMidjourneyStore((s) => [
+  const [isSettingsModalOpen, MIDJOURNEY_API_URL, updateSettings] = useStore((s) => [
     s.isSettingsModalOpen,
     s.settings.MIDJOURNEY_PROXY_URL,
     s.updateSettings,
   ]);
-  const requestError = useMidjourneyStore((s) => s.requestError, isEqual);
+  const requestError = useStore((s) => s.requestError, isEqual);
 
   const [url, setUrl] = useState(MIDJOURNEY_API_URL);
   return (
     <>
-      <Drawer
-        onClose={() => {
-          useMidjourneyStore.setState({ isSettingsModalOpen: false });
+      <Modal
+        centered
+        footer={
+          <Button
+            block
+            icon={<Icon icon={Save} />}
+            onClick={() => {
+              updateSettings({ MIDJOURNEY_PROXY_URL: url });
+              useStore.setState({ isSettingsModalOpen: false });
+            }}
+            type={'primary'}
+          />
+        }
+        onCancel={() => {
+          useStore.setState({ isSettingsModalOpen: false });
         }}
         open={isSettingsModalOpen}
-        title={'设置'}
+        title={'Setting'}
+        width={375}
       >
         <Flexbox gap={24}>
           {requestError && (
@@ -47,12 +60,12 @@ const Settings = memo(() => {
             />
           )}
           <Flexbox gap={12}>
-            <div>Midjourney API 代理地址</div>
+            <div>Midjourney API Proxy</div>
             <Input
               onChange={(e) => {
                 setUrl(e.target.value);
               }}
-              placeholder={'http://localhost:8080/'}
+              placeholder={'https://your-midjourney-proxy'}
               value={url}
             />
             <Typography.Text type={'secondary'}>
@@ -61,22 +74,14 @@ const Settings = memo(() => {
               部署好服务端后使用
             </Typography.Text>
           </Flexbox>
-          <Button
-            onClick={() => {
-              updateSettings({ MIDJOURNEY_PROXY_URL: url });
-              useMidjourneyStore.setState({ isSettingsModalOpen: false });
-            }}
-            type={'primary'}
-          >
-            保存
-          </Button>
         </Flexbox>
-      </Drawer>
-      <FloatButton
-        icon={<Icon icon={LucideSettings} />}
+      </Modal>
+      <ActionIcon
+        icon={LucideSettings}
         onClick={() => {
-          useMidjourneyStore.setState({ isSettingsModalOpen: true });
+          useStore.setState({ isSettingsModalOpen: true });
         }}
+        size={'site'}
       />
     </>
   );
diff --git a/src/features/TaskList/TaskItem.tsx b/src/features/TaskList/TaskItem.tsx
index d12fe31..f2daed5 100644
--- a/src/features/TaskList/TaskItem.tsx
+++ b/src/features/TaskList/TaskItem.tsx
@@ -1,15 +1,17 @@
 import { ActionIcon, Image } from '@lobehub/ui';
+import { Popconfirm } from 'antd';
 import { createStyles } from 'antd-style';
 import { Trash } from 'lucide-react';
 import { memo } from 'react';
 
-import { midjourneySelectors, useMidjourneyStore } from '@/store/midjourney';
+import { midjourneySelectors, useStore } from '@/store';
 
 import { MIN_IMAGE_SIZE } from './style';
 
 export const useStyles = createStyles(({ css, token }) => ({
   active: css`
-    box-shadow: 0 0 0 3px ${token.colorPrimary};
+    opacity: 1;
+    box-shadow: 0 0 0 2px ${token.colorPrimary};
   `,
   deleteButton: css`
     color: #fff;
@@ -25,7 +27,18 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
   image: css`
     cursor: pointer;
+
+    overflow: hidden;
+    flex: none;
+
+    width: ${MIN_IMAGE_SIZE}px;
+    height: ${MIN_IMAGE_SIZE}px;
     margin-block: 0 !important;
+
+    opacity: 0.75;
+    border-radius: ${token.borderRadiusLG}px;
+
+    transition: all 0.2s ease-in-out;
   `,
 }));
 
@@ -34,9 +47,8 @@ interface TaskItemProps {
 }
 
 const TaskItem = memo<TaskItemProps>(({ id }) => {
-  const IMAGE_SIZE = MIN_IMAGE_SIZE;
-  const task = useMidjourneyStore(midjourneySelectors.getTaskById(id));
-  const [removeTask, activeTask, isActive] = useMidjourneyStore((s) => [
+  const task = useStore(midjourneySelectors.getTaskById(id));
+  const [removeTask, activeTask, isActive] = useStore((s) => [
     s.removeTask,
     s.activeTask,
     midjourneySelectors.isTaskActive(id)(s),
@@ -45,29 +57,29 @@ const TaskItem = memo<TaskItemProps>(({ id }) => {
   const { styles, cx } = useStyles();
 
   return (
-    <Image
-      actions={
-        <ActionIcon
-          className={styles.deleteButton}
-          glass
-          icon={Trash}
-          onClick={(e) => {
-            e.stopPropagation();
-            removeTask(id);
-          }}
-          size={'small'}
-        />
-      }
-      alt={task?.prompt}
-      isLoading={task?.status === 'IN_PROGRESS'}
-      onClick={() => {
-        activeTask(id);
-      }}
-      preview={false}
-      size={IMAGE_SIZE}
-      src={task?.imageUrl}
-      wrapperClassName={cx(styles.image, isActive && styles.active, styles.editableImage)}
-    />
+    <div className={cx(styles.image, isActive && styles.active, styles.editableImage)}>
+      <Image
+        actions={
+          <Popconfirm
+            arrow={false}
+            onConfirm={(e) => {
+              e?.stopPropagation();
+              removeTask(id);
+            }}
+            title={'Are you sure you want to delete this image?'}
+          >
+            <ActionIcon className={styles.deleteButton} glass icon={Trash} size={'small'} />
+          </Popconfirm>
+        }
+        alt={task?.prompt}
+        isLoading={task?.status === 'IN_PROGRESS'}
+        onClick={() => {
+          activeTask(id);
+        }}
+        preview={false}
+        src={task?.imageUrl}
+      />
+    </div>
   );
 });
 
diff --git a/src/features/TaskList/index.tsx b/src/features/TaskList/index.tsx
index 3faab44..9f91a94 100644
--- a/src/features/TaskList/index.tsx
+++ b/src/features/TaskList/index.tsx
@@ -1,23 +1,42 @@
+import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
+import { Center, Flexbox } from 'react-layout-kit';
 
-import { midjourneySelectors, useMidjourneyStore } from '@/store/midjourney';
+import { midjourneySelectors, useStore } from '@/store';
 
 import TaskItem from './TaskItem';
 
+export const useStyles = createStyles(({ css }) => ({
+  container: css`
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+
+    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
+  `,
+  scroll: css`
+    position: relative;
+    overflow: auto hidden;
+    max-width: 100%;
+  `,
+}));
+
 const TaskList = memo(() => {
-  const tasks = useMidjourneyStore((s) => s.tasks.map((t) => t.id), isEqual);
-  const hasMultiTasks = useMidjourneyStore(midjourneySelectors.hasMultiTasks);
+  const { styles } = useStyles();
+  const tasks = useStore((s) => s.tasks.map((t) => t.id), isEqual);
+  const hasMultiTasks = useStore(midjourneySelectors.hasMultiTasks);
+
+  if (!hasMultiTasks) return null;
 
   return (
-    hasMultiTasks && (
-      <Flexbox gap={6} height={64} horizontal>
+    <Center className={styles.container}>
+      <Flexbox className={styles.scroll} gap={6} horizontal padding={4}>
         {tasks.map((task) => (
           <TaskItem id={task} key={task} />
         ))}
       </Flexbox>
-    )
+    </Center>
   );
 });
 
diff --git a/src/services/Midjourney.ts b/src/services/Midjourney.ts
index d91e8ab..2eb5786 100644
--- a/src/services/Midjourney.ts
+++ b/src/services/Midjourney.ts
@@ -1,4 +1,4 @@
-import { useMidjourneyStore } from '@/store/midjourney';
+import { useStore } from '@/store';
 import { MidjourneyTask } from '@/types/task';
 
 interface DescribeDTO {
@@ -64,8 +64,7 @@ class MidjourneyService {
         body: data ? JSON.stringify(data) : undefined,
         headers: {
           'Content-Type': 'application/json',
-          'X-Midjourney-Proxy-Url':
-            useMidjourneyStore.getState().settings.MIDJOURNEY_PROXY_URL || '',
+          'X-Midjourney-Proxy-Url': useStore.getState().settings.MIDJOURNEY_PROXY_URL || '',
         },
         method,
       });
@@ -86,7 +85,7 @@ class MidjourneyService {
         /* empty */
       }
 
-      useMidjourneyStore.setState({
+      useStore.setState({
         isSettingsModalOpen: true,
         requestError: { ...requestError, body },
       });
diff --git a/src/store/midjourney/_mockdata.ts b/src/store/_mockdata.ts
similarity index 99%
rename from src/store/midjourney/_mockdata.ts
rename to src/store/_mockdata.ts
index fb4906b..4e26bab 100644
--- a/src/store/midjourney/_mockdata.ts
+++ b/src/store/_mockdata.ts
@@ -1,6 +1,6 @@
-import { MidjourneyState } from './initialState';
+import { AppState } from './initialState';
 
-export const mockState: Partial<MidjourneyState> = {
+export const mockState: Partial<AppState> = {
   activeTaskId: '1705298817774894',
   prompts: 'cute little duckling, soft fluffy feathers, bright eyes, standing by a pond',
   runningTaskIds: [],
diff --git a/src/store/midjourney/action.ts b/src/store/action.ts
similarity index 90%
rename from src/store/midjourney/action.ts
rename to src/store/action.ts
index 8878044..2e1c6e4 100644
--- a/src/store/midjourney/action.ts
+++ b/src/store/action.ts
@@ -5,11 +5,11 @@ import { StateCreator } from 'zustand';
 
 import { ChangeTaskDTO, midjourneyService } from '@/services/Midjourney';
 import { storageService } from '@/services/storageService';
-import { TaskDispatch, tasksReducer } from '@/store/midjourney/reducers/task';
+import { TaskDispatch, tasksReducer } from '@/store/reducers/task';
 import { MidjourneyTask } from '@/types/task';
 
-import { MidjourneyStore } from './index';
-import { AppSettings, MidjourneyState, initialState } from './initialState';
+import { MidjourneyStore } from '.';
+import { AppSettings, AppState, initialState } from './initialState';
 
 const useMockData = process.env.NEXT_PUBLIC_USE_MOCK_DATA !== undefined;
 
@@ -25,10 +25,10 @@ export interface StoreAction {
   pollTaskStatus: (id: string) => Promise<void>;
   removeTask: (id: string) => void;
   toggleTaskLoading: (id: string, loading: boolean) => void;
-  updateAppState: (state: Partial<MidjourneyState>, action?: any) => void;
+  updateAppState: (state: Partial<AppState>, action?: any) => void;
   updatePrompts: (input: string) => void;
   updateSettings: (settings: Partial<AppSettings>) => void;
-  useInitApp: () => SWRResponse<MidjourneyState>;
+  useInitApp: () => SWRResponse<AppState>;
 }
 
 export const actions: StateCreator<
@@ -172,7 +172,7 @@ export const actions: StateCreator<
     storageService.setSettings(settings);
   },
   useInitApp: () => {
-    return useSWR<MidjourneyState>(
+    return useSWR<AppState>(
       'init',
       async () => {
         const payload = await lobeChat.getPluginPayload<MJFunction>();
@@ -185,10 +185,7 @@ export const actions: StateCreator<
             return mockState;
           }
 
-          const app = await storageService.getFromLocalStorage();
-          const settings = await storageService.getFromLocalStorage();
-
-          return { ...app, settings };
+          return await storageService.getFromLocalStorage();
         }
 
         if (payload?.name === 'showMJ') {
@@ -203,7 +200,7 @@ export const actions: StateCreator<
         }
       },
       {
-        onSuccess: (data: MidjourneyState) => {
+        onSuccess: (data: AppState) => {
           if (data) get().updateAppState(data, 'initApp');
 
           // 如果第一次在 LobeChat 中触发插件，则创建 imagine 任务
diff --git a/src/store/midjourney/index.ts b/src/store/index.ts
similarity index 100%
rename from src/store/midjourney/index.ts
rename to src/store/index.ts
diff --git a/src/store/midjourney/initialState.ts b/src/store/initialState.ts
similarity index 86%
rename from src/store/midjourney/initialState.ts
rename to src/store/initialState.ts
index 983f235..0579579 100644
--- a/src/store/midjourney/initialState.ts
+++ b/src/store/initialState.ts
@@ -4,7 +4,7 @@ export interface AppSettings {
   MIDJOURNEY_PROXY_URL?: string;
 }
 
-export interface MidjourneyState {
+export interface AppState {
   activeTaskId?: string;
   inLobeChat?: boolean;
   isSettingsModalOpen: boolean;
@@ -15,7 +15,7 @@ export interface MidjourneyState {
   tasks: MidjourneyTask[];
 }
 
-export const initialState: MidjourneyState = {
+export const initialState: AppState = {
   inLobeChat: false,
   isSettingsModalOpen: false,
   prompts: '',
diff --git a/src/store/midjourney/reducers/task.test.ts b/src/store/reducers/task.test.ts
similarity index 100%
rename from src/store/midjourney/reducers/task.test.ts
rename to src/store/reducers/task.test.ts
diff --git a/src/store/midjourney/reducers/task.ts b/src/store/reducers/task.ts
similarity index 100%
rename from src/store/midjourney/reducers/task.ts
rename to src/store/reducers/task.ts
diff --git a/src/store/midjourney/selectors.ts b/src/store/selectors.ts
similarity index 100%
rename from src/store/midjourney/selectors.ts
rename to src/store/selectors.ts
diff --git a/src/store/midjourney/store.ts b/src/store/store.ts
similarity index 60%
rename from src/store/midjourney/store.ts
rename to src/store/store.ts
index 8c88f25..b8ade94 100644
--- a/src/store/midjourney/store.ts
+++ b/src/store/store.ts
@@ -3,11 +3,11 @@ import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
 
 import { StoreAction, actions } from './action';
-import { MidjourneyState, initialState } from './initialState';
+import { AppState, initialState } from './initialState';
 
-export interface MidjourneyStore extends MidjourneyState, StoreAction {}
+export interface MidjourneyStore extends AppState, StoreAction {}
 
-export const useMidjourneyStore = createWithEqualityFn<MidjourneyStore>()(
+export const useStore = createWithEqualityFn<MidjourneyStore>()(
   devtools((...params) => ({ ...initialState, ...actions(...params) }), {
     name: 'MidjourneyStore',
   }),