diff --git a/public/weather_img/img/weather_bg_mdeium.webp b/public/weather_img/img/weather_bg_mdeium.webp
new file mode 100644
index 0000000..dce075c
Binary files /dev/null and b/public/weather_img/img/weather_bg_mdeium.webp differ
diff --git a/src/widgets/weather/Middle.tsx b/src/widgets/weather/Middle.tsx
index 9c16be7..f24e718 100644
--- a/src/widgets/weather/Middle.tsx
+++ b/src/widgets/weather/Middle.tsx
@@ -1,5 +1,35 @@
 import { defineComponent } from 'vue'
+import useWeatherStore from './useWeatherStore'
 
 export default defineComponent(() => {
-  return () => <div class="w-full h-full bg-red-50"></div>
+  const weather = useWeatherStore()
+
+  return () => (
+    <div class="w-full h-full bg-[#ecfbff] ">
+      <div class={'z-10 relative flex  justify-between px-3 py-3 items-center text-white'}>
+        <span class="text-[26px] font-din  font-bold">{weather.weatherData?.base.stemp}°</span>
+        <div class="flex flex-col gap-y-[1px]">
+          <div class="flex items-center gap-x-1">
+            <span class="font-bold text-[14px] leading-[14px]">
+              {weather.weatherData?.city.name}
+            </span>
+          </div>
+          <span class={'tracking-tight flex gap-x-1 items-center'}>
+            <span class="text-[12px]">
+              {weather.weatherData?.base.ltemp}°/{weather.weatherData?.base.htemp}°
+            </span>
+          </span>
+        </div>
+        <span class="text-[12px]">{weather.weatherData?.base.weather}</span>
+      </div>
+      <div
+        class={'w-full h-[73px] absolute left-0 top-0 '}
+        style={{
+          backgroundImage: `url('/weather_img/img/weather_bg_mdeium.webp')`,
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: '100%'
+        }}
+      ></div>
+    </div>
+  )
 })
diff --git a/src/widgets/weather/Small.tsx b/src/widgets/weather/Small.tsx
index dad61a7..ef55e43 100644
--- a/src/widgets/weather/Small.tsx
+++ b/src/widgets/weather/Small.tsx
@@ -5,7 +5,7 @@ export default defineComponent(() => {
   const weather = useWeatherStore()
   return () => (
     <div
-      class="w-full h-full items-center px-3 gap-x-3 flex py-3 text-white"
+      class="w-full h-full items-center pl-3 gap-x-2 flex py-3 text-white"
       style={{
         background: 'linear-gradient(135deg,#5996ff 0%,#4862ff 100%)'
       }}
@@ -16,9 +16,8 @@ export default defineComponent(() => {
         <div class="flex items-center gap-x-1">
           <span class="font-bold text-[14px] leading-[14px]">{weather.weatherData?.city.name}</span>
         </div>
-        <span>
+        <span class={'tracking-tight flex gap-x-1 items-center'}>
           <span class="text-[12px]">{weather.weatherData?.base.weather}</span>
-          &ensp;
           <span class="text-[12px]">
             {weather.weatherData?.base.ltemp}°/{weather.weatherData?.base.htemp}°
           </span>