diff --git a/src/components/Editor.js b/src/components/Editor.js
index 4e735f7..8079844 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -25,7 +25,7 @@ const defaultSettings = {
 	platform: 'hashnode'
 };
 
-const devIconsUrl = "https://mirror.20200511.xyz/https://raw.githubusercontent.com/devicons/devicon/master/devicon.json"
+const devIconsUrl = "https://raw.githubusercontent.com/devicons/devicon/master/devicon.json"
 
 class Editor extends React.Component {
 
diff --git a/src/components/Themes/BasicTheme.js b/src/components/Themes/BasicTheme.js
index b5e6041..39d6a32 100644
--- a/src/components/Themes/BasicTheme.js
+++ b/src/components/Themes/BasicTheme.js
@@ -1,43 +1,71 @@
-import React from 'react';
-
+import React, { useContext } from 'react';
+import { ImgContext } from '../../utils/ImgContext';
+import UnsplashSearch from '../UnsplashSearch';
 
 const BasicTheme = ({ config }) => {
     const { title, bgColor, pattern, author, icon, font, customIcon } = config;
+    const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
 
     return (
-        <div className=" bg-white w-full h-full ">
-            <div className={`overflow-y-hidden flex  text-gray-800 items-center h-full ${pattern} `}
+        <div className="bg-white w-full h-full">
+            <div className={`overflow-y-hidden flex flex-col h-full`}
                 style={{ backgroundColor: bgColor }}
             >
-
-                <div className={`${font} bg-white md:w-10/12  m-auto flex flex-col pt-12 rounded-xl`}>
-                    <div className="px-12">
-                        <div>
-                            <h1 className="text-3xl md:text-5xl text-gray-800 font-bold text-center">{title}</h1>
-                        </div>
-                    </div>
-
-                    <div className=" flex mx-4  p-4 rounded-xl items-center bg-white">
-                        {
-                            customIcon ?
-                                <div className="w-12 h-12  ">
-                                    <img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
+                <div className="flex flex-row items-center bg-white justify-center h-full">
+                    <div className="w-full h-full">
+                        {unsplashImage ?
+                            <div className='relative flex group h-full'>
+                                <div className="h-full w-full">
+                                    <img src={unsplashImage.url && unsplashImage.url} className="object-cover h-full w-full" alt="preview" />
                                 </div>
-                                :
-                                <div className="mr-auto ml-2 items-center justify-center flex">
-                                    <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-5xl`}></i>
+
+                                <div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 flex items-center justify-center">
+                                    <button
+                                        onClick={() => setUnsplashImage('')}
+                                        className="absolute top-2 right-2 cursor-pointer">
+                                        <svg className="group-hover:inline-block hidden w-8 h-8 text-gray-800 bg-white p-2 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                                    </button>
+
+                                    <div className={`${font} bg-white/90 md:w-10/12 mx-auto flex flex-col py-12 px-12 rounded-xl ${pattern}`}>
+                                        <div>
+                                            <h1 className="text-3xl md:text-5xl text-gray-800 font-bold text-center">{title}</h1>
+                                        </div>
+
+                                        <div className="flex mx-4 mt-8 p-4 rounded-xl items-center bg-white/80">
+                                            {
+                                                customIcon ?
+                                                    <div className="w-12 h-12">
+                                                        <img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
+                                                    </div>
+                                                    :
+                                                    <div className="mr-auto ml-2 items-center justify-center flex">
+                                                        <i className={`devicon-${icon.value}-plain p-4 dev-icon text-5xl`}></i>
+                                                    </div>
+                                            }
+                                            <h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
+                                        </div>
+                                    </div>
                                 </div>
+
+                                <div className="absolute bottom-4 right-4 opacity-80">
+                                    <div className="group-hover:flex hidden items-center">
+                                        <span className="text-sm text-white mx-2">Photo by</span>
+                                        <a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
+                                            <img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
+                                            <span className="pr-2">{unsplashImage.name}</span>
+                                        </a>
+                                        <a href="https://unsplash.com/?utm_source=https://coverview.czl.net&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
+                                    </div>
+                                </div>
+                            </div>
+                            :
+                            <div className="flex flex-col p-2 bg-white items-center justify-center h-full">
+                                <UnsplashSearch largeImgPreview />
+                            </div>
                         }
-
-
-                        <h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>
-
                     </div>
-
                 </div>
-
             </div>
-
         </div>
     );
 }
diff --git a/src/components/Themes/MobileMockupTheme.js b/src/components/Themes/MobileMockupTheme.js
index 826510d..eb8e72c 100644
--- a/src/components/Themes/MobileMockupTheme.js
+++ b/src/components/Themes/MobileMockupTheme.js
@@ -1,65 +1,80 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
+import { ImgContext } from '../../utils/ImgContext';
+import UnsplashSearch from '../UnsplashSearch';
 
 const MobileMockupTheme = ({ config }) => {
     const { bgColor, title, font } = config;
-
-    const [image, setImage] = useState()
+    const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
+    const [image, setImage] = useState();
 
     return (
         <div className={`bg-white w-full h-full`}>
-
-
-            <div className={`overflow-y-hidden flex flex-row px-10 items-center w-full h-full justify-center pt-4`}
+            <div className={`overflow-y-hidden flex flex-row w-full h-full justify-center`}
                 style={{ backgroundColor: bgColor }}
             >
+                <div className="w-full h-full">
+                    {unsplashImage ?
+                        <div className='relative flex group h-full'>
+                            <div className="h-full w-full">
+                                <img src={unsplashImage.url && unsplashImage.url} className="object-cover h-full w-full" alt="preview" />
+                            </div>
 
+                            <div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 flex items-center px-10">
+                                <button
+                                    onClick={() => setUnsplashImage('')}
+                                    className="absolute top-2 right-2 cursor-pointer">
+                                    <svg className="group-hover:inline-block hidden w-8 h-8 text-gray-800 bg-white p-2 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                                </button>
 
-                <h1 className={`${font} text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left`}>{title}</h1>
+                                <h1 className={`${font} text-2xl w-1/2 md:text-4xl px-4 text-white font-bold text-left`}>{title}</h1>
 
-                <div className="w-5/12 mx-auto m-4 mt-10 group h-full  shadow-lg  flex flex-col  bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white">
-                    <div className="bg-gray-800 h-8 w-full p-2 pb-3 flex items-center rounded-t">
+                                <div className="w-5/12 mx-auto m-4 group h-4/5 shadow-lg flex flex-col bg-white border-t-8 border-x-8 border-gray-800 rounded-t-3xl border-white">
+                                    <div className="bg-gray-800 h-8 w-full p-2 pb-3 flex items-center rounded-t">
+                                        <div className="flex mx-auto items-center">
+                                            <div className="bg-white h-3 w-3 rounded-full mx-1"></div>
+                                            <div className="bg-white h-2 w-20 rounded-full mx-1"></div>
+                                        </div>
+                                    </div>
 
-                        <div className="flex mx-auto items-center">
+                                    {image ?
+                                        <div className="group relative h-full">
+                                            <img src={image && image} className="object-cover rounded -translate-y-1 h-full w-full" alt="preview" />
+                                            <button
+                                                onClick={() => setImage('')}
+                                                className="absolute top-4 right-2 cursor-pointer">
+                                                <svg className="group-hover:inline-block hidden w-6 h-6 bg-gray-500 p-1 text-white rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                                            </button>
+                                        </div>
+                                        :
+                                        <div className="flex flex-col px-4 rounded-xl py-20 bg-white items-center justify-center h-full">
+                                            <input type="file"
+                                                className="text-sm flex flex-col cursor-pointer mb-2 bg-white rounded border"
+                                                onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
+                                            />
+                                            <span className="text-center italic">点击上传截图</span>
+                                        </div>
+                                    }
+                                </div>
+                            </div>
 
-                            <div className="bg-white h-3 w-3 rounded-full mx-1"></div>
-                            <div className="bg-white h-2 w-20 rounded-full mx-1"></div>
-
-                        </div>
-
-
-                    </div>
-
-
-
-                    {image ?
-                        <div className="group relative">
-                            <img src={image && image} className="object-cover rounded -translate-y-1 h-full" alt="preview" />
-                            <button
-                                onClick={() => setImage('')}
-                                className="ml-auto mr-4 cursor-pointer">
-                                <svg className="group-hover:inline-block absolute top-4 right-2  bg-gray-500 hidden w-8 h-8 p-2 text-white rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-
-                            </button>
+                            <div className="absolute bottom-4 right-4 opacity-80">
+                                <div className="group-hover:flex hidden items-center">
+                                    <span className="text-sm text-white mx-2">Photo by</span>
+                                    <a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
+                                        <img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
+                                        <span className="pr-2">{unsplashImage.name}</span>
+                                    </a>
+                                    <a href="https://unsplash.com/?utm_source=https://coverview.czl.net&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
+                                </div>
+                            </div>
                         </div>
                         :
-                        <div className="flex flex-col px-4 rounded-xl py-20 bg-white items-center justify-center">
-                            <input type="file"
-                                className="text-sm  flex flex-col cursor-pointer mb-2 bg-white rounded border"
-                                onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
-                            />
-                            <span className=" text-center italic">点击上传截图</span>
+                        <div className="flex flex-col p-2 bg-white items-center justify-center h-full">
+                            <UnsplashSearch largeImgPreview />
                         </div>
-
                     }
                 </div>
-
-
-
-
-
             </div>
-
-
         </div>
     );
 }
diff --git a/src/components/Themes/ModernTheme.js b/src/components/Themes/ModernTheme.js
index 35205f1..51f43a5 100644
--- a/src/components/Themes/ModernTheme.js
+++ b/src/components/Themes/ModernTheme.js
@@ -1,39 +1,71 @@
-import React from 'react';
-
+import React, { useContext } from 'react';
+import { ImgContext } from '../../utils/ImgContext';
+import UnsplashSearch from '../UnsplashSearch';
 
 const ModernTheme = ({ config }) => {
-
     const { title, bgColor, pattern, author, icon, font, customIcon } = config;
+    const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
 
     return (
-        <div className="w-full h-full bg-white ">
-            <div className=" overflow-y-hidden w-full h-full flex  items-center">
-                <div className={`  h-full w-full p-4 text-gray-800 flex  items-center ${pattern} `}
+        <div className="w-full h-full bg-white">
+            <div className="overflow-y-hidden w-full h-full flex items-center">
+                <div className="h-full w-full flex items-center"
                     style={{ backgroundColor: bgColor }}
                 >
+                    <div className="w-full h-full">
+                        {unsplashImage ?
+                            <div className='relative flex group h-full'>
+                                <div className="h-full w-full">
+                                    <img src={unsplashImage.url && unsplashImage.url} className="object-cover h-full w-full" alt="preview" />
+                                </div>
 
-                    {
-                        customIcon ?
-                            <div className="  mx-auto items-center justify-center flex">
-                                <img src={customIcon} alt="img" className="w-28 h-28 rounded-full bg-white border-4 border-white" />
+                                <div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 flex items-center">
+                                    <button
+                                        onClick={() => setUnsplashImage('')}
+                                        className="absolute top-2 right-2 cursor-pointer">
+                                        <svg className="group-hover:inline-block hidden w-8 h-8 text-gray-800 bg-white p-2 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                                    </button>
+
+                                    <div className="w-full flex items-center px-8">
+                                        {
+                                            customIcon ?
+                                                <div className="mx-auto items-center justify-center flex">
+                                                    <img src={customIcon} alt="img" className="w-28 h-28 rounded-full bg-white border-4 border-white" />
+                                                </div>
+                                                :
+                                                <div className="rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
+                                                    <i className={`devicon-${icon.value}-plain p-4 dev-icon text-7xl`}></i>
+                                                </div>
+                                        }
+
+                                        <div className="w-2/3">
+                                            <div className={`${font} bg-white/90 px-12 justify-center text-left rounded-xl py-8 flex flex-col ${pattern}`}>
+                                                <h1 className="text-3xl md:text-5xl font-bold text-gray-800">{title}</h1>
+                                                <h2 className="text-xl mt-10 font-semibold text-left">{author}</h2>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="absolute bottom-4 right-4 opacity-80">
+                                    <div className="group-hover:flex hidden items-center">
+                                        <span className="text-sm text-white mx-2">Photo by</span>
+                                        <a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
+                                            <img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
+                                            <span className="pr-2">{unsplashImage.name}</span>
+                                        </a>
+                                        <a href="https://unsplash.com/?utm_source=https://coverview.czl.net&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
+                                    </div>
+                                </div>
                             </div>
                             :
-                            <div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
-                                <i className={`devicon-${icon.value}-plain  p-4 dev-icon text-7xl`}></i>
+                            <div className="flex flex-col p-2 bg-white items-center justify-center h-full">
+                                <UnsplashSearch largeImgPreview />
                             </div>
-                    }
-
-
-                    <div className="h-full w-2/3">
-                        <div className={`${font} bg-white px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
-                            <h1 className="text-3xl md:text-5xl font-bold text-gray-800">{title}</h1>
-                            <h2 className="text-xl mt-10 font-semibold text-left ">{author}</h2>
-                        </div>
+                        }
                     </div>
                 </div>
-
             </div>
-
         </div>
     );
 }
diff --git a/src/components/Themes/OutlineTheme.js b/src/components/Themes/OutlineTheme.js
index c1f6866..b3b4b9a 100644
--- a/src/components/Themes/OutlineTheme.js
+++ b/src/components/Themes/OutlineTheme.js
@@ -1,41 +1,69 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { ImgContext } from '../../utils/ImgContext';
+import UnsplashSearch from '../UnsplashSearch';
+
 const OutlineTheme = ({ config }) => {
     const { title, bgColor, author, icon, font, customIcon } = config;
+    const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
 
     return (
-        <div className="w-full h-full bg-white ">
-
-
-            <div className={`overflow-y-hidden flex flex-col text-gray-800 px-10 h-full`}
+        <div className="w-full h-full bg-white">
+            <div className={`overflow-y-hidden flex flex-col text-gray-800 h-full`}
                 style={{ backgroundColor: bgColor }}
             >
+                <div className="flex flex-row items-center bg-white justify-center h-full">
+                    <div className="w-full h-full">
+                        {unsplashImage ?
+                            <div className='relative flex group h-full'>
+                                <div className="h-full w-full">
+                                    <img src={unsplashImage.url && unsplashImage.url} className="object-cover h-full w-full" alt="preview" />
+                                </div>
 
+                                <div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 flex items-center justify-center">
+                                    <button
+                                        onClick={() => setUnsplashImage('')}
+                                        className="absolute top-2 right-2 cursor-pointer">
+                                        <svg className="group-hover:inline-block hidden w-8 h-8 text-gray-800 bg-white p-2 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                                    </button>
 
-                <div className={`${font} rounded-2xl py-6 flex flex-col  `}>
-                    {
-                        customIcon ?
-                            <div className=" m-6">
-                                <img src={customIcon} alt="img" className="rounded-full object-cover w-24 h-24 bg-white p-1 border-white" />
+                                    <div className={`${font} rounded-2xl py-6 px-10 flex flex-col mx-10`}>
+                                        {
+                                            customIcon ?
+                                                <div className="m-6">
+                                                    <img src={customIcon} alt="img" className="rounded-full object-cover w-24 h-24 bg-white p-1 border-white" />
+                                                </div>
+                                                :
+                                                <div className="mr-auto ml-2 items-center justify-center flex">
+                                                    <i className={`devicon-${icon.value}-plain text-white p-4 dev-icon text-8xl`}></i>
+                                                </div>
+                                        }
+                                        <h1 className="text-3xl p-4 text-white md:text-5xl font-bold">{title}</h1>
+
+                                        <div className={`${font} w-full h-16 flex mt-auto mb-0 p-2 px-6 items-center`}>
+                                            <h2 className="text-2xl text-white font-semibold">{author}</h2>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="absolute bottom-4 right-4 opacity-80">
+                                    <div className="group-hover:flex hidden items-center">
+                                        <span className="text-sm text-white mx-2">Photo by</span>
+                                        <a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
+                                            <img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
+                                            <span className="pr-2">{unsplashImage.name}</span>
+                                        </a>
+                                        <a href="https://unsplash.com/?utm_source=https://coverview.czl.net&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
+                                    </div>
+                                </div>
                             </div>
                             :
-                            <div className="  mr-auto ml-2 items-center justify-center flex">
-                                <i className={`devicon-${icon.value}-plain text-white p-4 dev-icon text-8xl`}></i>
+                            <div className="flex flex-col p-2 bg-white items-center justify-center h-full">
+                                <UnsplashSearch largeImgPreview />
                             </div>
-                    }
-                    <h1 className="text-3xl p-4 text-white md:text-5xl  font-bold ">{title}</h1>
-
-                    <div className={`${font} w-full h-16  flex  mt-auto mb-0 p-2 px-6  items-center `}>
-
-                        <h2 className="text-2xl text-white font-semibold">{author}</h2>
-
+                        }
                     </div>
                 </div>
-
-
-
             </div>
-
-
         </div>
     );
 }
diff --git a/src/components/Themes/PreviewTheme.js b/src/components/Themes/PreviewTheme.js
index 8999d4a..287f018 100644
--- a/src/components/Themes/PreviewTheme.js
+++ b/src/components/Themes/PreviewTheme.js
@@ -1,53 +1,79 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
+import { ImgContext } from '../../utils/ImgContext';
+import UnsplashSearch from '../UnsplashSearch';
 
 const PreviewTheme = ({ config }) => {
     const { bgColor, title, font } = config;
-
-    const [image, setImage] = useState()
+    const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
+    const [image, setImage] = useState();
 
     return (
         <div className="w-full h-full bg-white">
-
-
-            <div className={`overflow-y-hidden flex flex-col px-4 pt-4 w-full h-full`}
+            <div className={`overflow-y-hidden flex flex-col w-full h-full`}
                 style={{ backgroundColor: bgColor }}
             >
+                <div className="w-full h-full">
+                    {unsplashImage ?
+                        <div className='relative flex group h-full'>
+                            <div className="h-full w-full">
+                                <img src={unsplashImage.url && unsplashImage.url} className="object-cover h-full w-full" alt="preview" />
+                            </div>
 
-                <h1 className={`${font} text-2xl md:text-3xl p-10 text-white font-bold text-center`}>{title}</h1>
+                            <div className="h-full bg-gray-800/60 absolute top-0 right-0 left-0 flex flex-col items-center justify-center px-4">
+                                <button
+                                    onClick={() => setUnsplashImage('')}
+                                    className="absolute top-2 right-2 cursor-pointer">
+                                    <svg className="group-hover:inline-block hidden w-8 h-8 text-gray-800 bg-white p-2 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                                </button>
 
-                <div className="w-10/12 group mx-auto mt-auto mb-0 shadow-lg  flex flex-col bg-white rounded-t-xl border-white">
-                    <div className="bg-gray-800 h-8 w-full p-2 flex items-center rounded-t-xl">
-                        <div className="bg-red-400 h-3 w-3 rounded-full mx-1"></div>
-                        <div className="bg-yellow-400 h-3 w-3 rounded-full mx-1"></div>
-                        <div className="bg-green-400 h-3 w-3 rounded-full mx-1"></div>
-                        <button
-                            onClick={() => setImage('')}
-                            className="ml-auto mr-4 cursor-pointer">
-                            <svg className="group-hover:inline-block hidden w-4 h-4 text-white rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                                <h1 className={`${font} text-2xl md:text-3xl p-10 text-white font-bold text-center`}>{title}</h1>
 
-                        </button>
-                    </div>
+                                <div className="w-10/12 group shadow-lg flex flex-col bg-white rounded-xl border-white">
+                                    <div className="bg-gray-800 h-8 w-full p-2 flex items-center rounded-t-xl">
+                                        <div className="bg-red-400 h-3 w-3 rounded-full mx-1"></div>
+                                        <div className="bg-yellow-400 h-3 w-3 rounded-full mx-1"></div>
+                                        <div className="bg-green-400 h-3 w-3 rounded-full mx-1"></div>
+                                        <button
+                                            onClick={() => setImage('')}
+                                            className="ml-auto mr-4 cursor-pointer">
+                                            <svg className="group-hover:inline-block hidden w-4 h-4 text-white rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                                        </button>
+                                    </div>
 
+                                    {image ?
+                                        <div className="h-full">
+                                            <img src={image && image} className="object-cover rounded-b-xl h-full w-full" alt="preview" />
+                                        </div>
+                                        :
+                                        <div className="flex flex-col p-20 py-28 bg-white rounded-b-xl items-center justify-center">
+                                            <input type="file"
+                                                className="text-xl cursor-pointer mb-2 bg-white rounded border"
+                                                onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
+                                            />
+                                            <span className="text-center italic">点击上传截图</span>
+                                        </div>
+                                    }
+                                </div>
+                            </div>
 
-                    {image ?
-                        <div className="">
-                            <img src={image && image} className="object-cover " alt="preview" />
-
+                            <div className="absolute bottom-4 right-4 opacity-80">
+                                <div className="group-hover:flex hidden items-center">
+                                    <span className="text-sm text-white mx-2">Photo by</span>
+                                    <a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
+                                        <img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
+                                        <span className="pr-2">{unsplashImage.name}</span>
+                                    </a>
+                                    <a href="https://unsplash.com/?utm_source=https://coverview.czl.net&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
+                                </div>
+                            </div>
                         </div>
                         :
-                        <div className="flex flex-col p-20 py-28 bg-white items-center justify-center">
-                            <input type="file"
-                                className="text-xl cursor-pointer mb-2 bg-white rounded border"
-                                onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
-                            />
-                            <span className=" text-center italic">点击上传截图</span>
+                        <div className="flex flex-col p-2 bg-white items-center justify-center h-full">
+                            <UnsplashSearch largeImgPreview />
                         </div>
-
                     }
                 </div>
-
             </div>
-
         </div>
     );
 }
diff --git a/src/components/Themes/StylishTheme.js b/src/components/Themes/StylishTheme.js
index 50d41d6..33e953f 100644
--- a/src/components/Themes/StylishTheme.js
+++ b/src/components/Themes/StylishTheme.js
@@ -6,81 +6,60 @@ const StylishTheme = ({ config }) => {
     const { title, author, font, icon, customIcon, bgColor } = config;
     const { unsplashImage, setUnsplashImage } = useContext(ImgContext);
 
-
     return (
-        <div className=" bg-white w-full h-full">
-
-
-            <div className={` overflow-y-hidden flex flex-col`}
+        <div className="bg-white w-full h-full">
+            <div className={`overflow-y-hidden flex flex-col h-full`}
                 style={{ backgroundColor: bgColor }}
             >
-
-                <div className="flex flex-row  items-center bg-white  justify-center">
-
-                    <div className="h-full w-1/2  bg-white rounded-l-xl">
-                        <div className={`${font} px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
-                            <h1 className=" text-4xl font-bold text-gray-800">{title}</h1>
+                <div className="flex flex-row items-center bg-white justify-center h-full">
+                    <div className="h-full w-1/2 bg-white rounded-l-xl flex items-center">
+                        <div className={`${font} px-12 justify-center text-left rounded-xl w-full p-4 flex flex-col`}>
+                            <h1 className="text-4xl font-bold text-gray-800">{title}</h1>
                             <div className="flex items-center mt-10 text-left">
                                 {
                                     customIcon ?
-                                        <div className=" ">
+                                        <div className="">
                                             <img src={customIcon} alt="img" className="w-12 h-12 mr-2 rounded-full bg-white border border-white" />
                                         </div>
                                         :
                                         <div className="mr-2 items-center justify-center flex">
-                                            <i className={`devicon-${icon.value}-plain  dev-icon text-3xl`}></i>
+                                            <i className={`devicon-${icon.value}-plain dev-icon text-3xl`}></i>
                                         </div>
                                 }
-                                <h2 className="text-xl  font-semibold text-left ">{author}</h2>
-
-
+                                <h2 className="text-xl font-semibold text-left">{author}</h2>
                             </div>
                         </div>
                     </div>
                     <div className="w-1/2 h-full">
-
-
                         {unsplashImage ?
-                            <div className='relative w-full h-max flex group'>
-
-                                <img src={unsplashImage.url && unsplashImage.url} className=" object-cover w-full h-full  " alt="preview" />
-
+                            <div className='relative w-full h-full flex group'>
+                                <img src={unsplashImage.url && unsplashImage.url} className="object-cover w-full h-full rounded-r-xl" alt="preview" />
 
                                 <button
                                     onClick={() => setUnsplashImage('')}
-                                    className="absolute  top-4 right-2 cursor-pointer">
+                                    className="absolute top-4 right-2 cursor-pointer">
                                     <svg className="group-hover:inline-block hidden w-6 h-6 text-gray-800 bg-white p-1 rounded-full z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
-
                                 </button>
 
-                                <div className="absolute  bottom-4 right-4 opacity-80">
-                                    <div className=" group-hover:flex hidden items-center">
+                                <div className="absolute bottom-4 right-4 opacity-80">
+                                    <div className="group-hover:flex hidden items-center">
                                         <span className="text-sm text-white mx-2">Photo by</span>
                                         <a href={unsplashImage.profile} target="_blank" rel="noreferrer" className="cursor-pointer flex items-center bg-gray-300 rounded-full text-sm">
                                             <img src={unsplashImage.avatar && unsplashImage.avatar} alt={unsplashImage.name} className="h-6 w-6 rounded-full mr-2" />
-
                                             <span className="pr-2">{unsplashImage.name}</span>
                                         </a>
-
                                         <a href="https://unsplash.com/?utm_source=https://coverview.czl.net&utm_medium=referral" className="text-sm text-white mx-2">Unsplash</a>
                                     </div>
-
                                 </div>
                             </div>
                             :
-                            <div className="flex h-max w-full flex-col bg-white items-center justify-center">
-
+                            <div className="flex h-full w-full flex-col bg-white items-center justify-center rounded-r-xl">
                                 <UnsplashSearch />
                             </div>
-
                         }
-
                     </div>
                 </div>
-
-
             </div>
-
         </div>
     );
 }