diff --git a/src/components/mainheroslider/slider.js b/src/components/mainheroslider/slider.js
index bf99c36..d59d5af 100644
--- a/src/components/mainheroslider/slider.js
+++ b/src/components/mainheroslider/slider.js
@@ -10,6 +10,29 @@ import slide_1 from "../../files/Qabul22.jpg";
 import slide_6 from "../../files/Toshkent_kimyo_texnologiya_instituti.jpg";
 
 function MainSlider() {
+  const { DataGetter, globalUrl } = useContext(Context);
+  const [banner, setBanner] = useState({
+    isFetched: false,
+    error: false,
+    data: {},
+  });
+
+  useEffect(() => {
+    fetch(`${globalUrl}/elon/all`, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((res) => res.json())
+      .then(
+        (data) =>
+          data.success && setBanner({ data: data.data, isFetched: true })
+      )
+      .catch(() => setBanner({ error: true }));
+  }, []);
+
+  console.log(banner.data);
+
   return (
     <>
       <div className="container-fluid">
@@ -19,63 +42,27 @@ function MainSlider() {
           data-bs-ride="carousel"
         >
           <div className="carousel-inner">
-            <div className="carousel-item">
-              <img
-                className=""
-                src={`${slide_5}`}
-                width="100%"
-                height="100%"
-                alt=""
-              />
-            </div>
-            <div className="carousel-item active">
-              <img
-                className=""
-                src={`${slide_1}`}
-                width="100%"
-                height="100%"
-                alt=""
-              />
-            </div>
-            <div className="carousel-item">
-              <img
-                className=""
-                src={`${slide_2}`}
-                width="100%"
-                height="100%"
-                alt=""
-              />
-            </div>{" "}
-            <div className="carousel-item">
-              <a href="http://www.double-degree.tcti.uz" target="_blank">
-                {" "}
+            {banner.isFetched && banner.data && banner.data.length > 0 ? (
+              banner.data.map((e, index) => (
+                <div key={index} className="carousel-item">
+                  <img
+                    src={`${globalUrl}/${e.banner_img}`}
+                    width="100%"
+                    height="100%"
+                    alt={e.name}
+                  />
+                </div>
+              ))
+            ) : (
+              <div className="carousel-item active">
                 <img
-                  className=""
-                  src={`${slide_6}`}
+                  src={slide_5}
                   width="100%"
                   height="100%"
-                  alt=""
+                  alt="Banner img"
                 />
-              </a>
-            </div>
-            <div className="carousel-item">
-              <img
-                className=""
-                src={`${slide_3}`}
-                width="100%"
-                height="100%"
-                alt=""
-              />
-            </div>
-            <div className="carousel-item">
-              <img
-                className=""
-                src={`${slide_4}`}
-                width="100%"
-                height="100%"
-                alt=""
-              />
-            </div>
+              </div>
+            )}
           </div>
           <button
             className="carousel-control-prev slider__btn"
@@ -105,4 +92,4 @@ function MainSlider() {
   );
 }
 
-export default MainSlider;
\ No newline at end of file
+export default MainSlider;
diff --git a/src/components/news/index.js b/src/components/news/index.js
index d54f37c..692fb20 100644
--- a/src/components/news/index.js
+++ b/src/components/news/index.js
@@ -44,13 +44,8 @@ function YangiliklarComp({ home }) {
                   alt="news img"
                 />
                 <div className="news__body">
-                  <h4>
-                    {e[`title_${lang}`].split(" ").slice(0, 10).join(" ")}
-                    ...&#128279;
-                  </h4>
-                  {e[`body_${lang}`].map((a, ind) => (
-                    <p key={ind}>{a}</p>
-                  ))}
+                  <h4>{e[`title_${lang}`]}</h4>
+
                   <br />
                   <p>
                     <i className="fa-solid fa-calendar-days">
diff --git a/src/components/news/style.css b/src/components/news/style.css
index 2490391..1bce1af 100644
--- a/src/components/news/style.css
+++ b/src/components/news/style.css
@@ -1,95 +1,119 @@
 .news__list {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: flex-start;
-    flex-wrap: wrap;
-  }
-  
-  .news__card {
-    width: 300px;
-    height: 400px;
-    min-height: 300px;
-    margin: 20px;
-  
-  }
-  .news__card:hover{
-    transition: all 1s;
-    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-  }
-  .news__body {
-    padding: 10px;
-  }
-  .news__body h4 {
-    /* height: 40px; */
-    font-weight: 600;
-    font-size: 15px;
-    line-height: 130%;
-    color: #02307d !important;
-  }
-  
-  .news__body p {
-    height: 60px;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 140%;
-    color: rgba(2, 48, 125, 0.75);
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.news__card {
+  width: 300px;
+  height: 400px;
+  min-height: 300px;
+  margin: 20px;
+  margin: 5px;
+  border: 1px solid rgba(0, 0, 255, 0.447);
+}
+.news__card:hover {
+  transition: 0.5s;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}
+
+.news__body {
+  padding: 15px;
+}
+.news__body h4 {
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 130%;
+  color: #02307d !important;
+  width: 100%;
+  height: 60px;
+    /* white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: normal;
-  }
-  
-  .news__body br + p {
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 130%;
-    color: #41649d;
+    text-overflow: ellipsis; */
+
+  white-space: pre-line;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.news__body p {
+  font-weight: 400;
+  margin: 0 !important;
+  font-size: 14px;
+  line-height: 140%;
+  color: rgba(2, 48, 125, 0.75);
+}
+
+.news__body br + p {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 130%;
+  color: #41649d;
+  display: block;
+  margin-top: 10px;
+}
+
+.hj {
+  width: 40px;
+  margin: 20px auto !important;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  border: 3px solid rgba(2, 48, 125, 0.75);
+}
+
+.news__item__card {
+  width: 70%;
+  height: auto;
+}
+.news__item__card img {
+  padding: 10px;
+  width: 50%;
+  height: auto;
+}
+
+.news_photo {
+  width: 300px;
+  height: 200px;
+}
+
+.news__nav {
+  width: calc(100% - 70%);
+  display: flex;
+  justify-content: right;
+  flex-wrap: wrap;
+}
+
+.news__nav__card {
+  width: 300px;
+  margin: 10px auto;
+  border: 1px solid rgba(2, 48, 125, 0.75);
+  padding: 10px;
+  text-decoration: none;
+  height: auto;
+}
+.elonDesc {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.card__html__content img,
+.card__html__content iframe,
+.card__html__content video {
+  max-width: 100%;
+}
+@media (max-width: 768px) {
+  .elonDesc {
     display: block;
-    margin-top: 10px;
-  }
-  
-  .hj {
-    width: 40px;
-    margin: 20px auto !important;
-    display: flex;
-    justify-content: center;
-    border-radius: 50%;
-    border: 3px solid rgba(2, 48, 125, 0.75);
   }
-  
-  .news__item__card{
-    
+  .news__item__card {
     width: 100%;
-    height: auto;
-  }
-  .news__item__card img{
-    padding: 10px;
-    width: 50%;
-    height: auto;
   }
-  
-  
-  .news_photo{
-    width: 300px;
-    height: 200px;
-  }
-  
   .news__nav {
     width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex-wrap: wrap;
-  }
-  
-  .news__nav__card {
-    width: 300px;
-    margin: 10px auto;
-    border: 1px solid rgba(2, 48, 125, 0.75);
-    padding: 10px;
-    border-radius: 10px;
-    text-decoration: none;
   }
-  
\ No newline at end of file
+}
diff --git a/src/context/index.js b/src/context/index.js
index e3056ab..07d148a 100644
--- a/src/context/index.js
+++ b/src/context/index.js
@@ -21,8 +21,10 @@ function Provider({ children }) {
     const date = new Date(arg);
     const kun = String(date.getDate()).padStart(2, 0);
     const oy = String(date.getMonth() + 1).padStart(2, 0);
+    const soat = String(date.getHours()).padStart(2,0);
+    const minut = String(date.getMinutes()).padStart(2.0)
     const yil = date.getFullYear();
-    return `${kun}.${oy}.${yil}`;
+    return `${soat}:${minut} | ${kun}.${oy}.${yil}`;
   };
 
   const textSytles = (size, weight) => {