diff --git a/src/assets/icons/arrow-down-blue.svg b/src/assets/icons/arrow-down-blue.svg
new file mode 100644
index 0000000..b288d3f
--- /dev/null
+++ b/src/assets/icons/arrow-down-blue.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.50008 9.83358C7.36378 9.83384 7.23169 9.78637 7.12675 9.69941L3.62675 6.78274C3.50762 6.68373 3.43271 6.54145 3.41848 6.3872C3.40426 6.23295 3.4519 6.07937 3.55091 5.96024C3.64993 5.84112 3.79221 5.7662 3.94646 5.75198C4.10071 5.73776 4.25429 5.78539 4.37341 5.88441L7.50008 8.49774L10.6267 5.97774C10.6864 5.92929 10.7551 5.8931 10.8288 5.87127C10.9025 5.84943 10.9798 5.84238 11.0562 5.85051C11.1326 5.85864 11.2067 5.8818 11.2741 5.91865C11.3416 5.9555 11.4011 6.00532 11.4492 6.06524C11.5027 6.12522 11.5431 6.19559 11.5681 6.27193C11.5931 6.34827 11.602 6.42895 11.5943 6.5089C11.5866 6.58886 11.5625 6.66636 11.5235 6.73657C11.4845 6.80678 11.4314 6.86817 11.3676 6.91691L7.86758 9.73441C7.75961 9.80763 7.63022 9.84254 7.50008 9.83358Z"/>
+</svg>
diff --git a/src/components/global/Aside.tsx b/src/components/global/Aside.tsx
index 3c744fd..612e71d 100644
--- a/src/components/global/Aside.tsx
+++ b/src/components/global/Aside.tsx
@@ -1,11 +1,15 @@
 // Modules
 import { v4 as uuidv4 } from 'uuid';
+import { motion } from 'framer-motion';
 
 // Components
 import SectionTitle from './SectionTitle';
 import AsideItem from '../aside/AsideItem';
 import Calendar from '../aside/Calendar';
 
+// Icons
+import { ReactComponent as ArrowDownBlue } from '../../assets/icons/arrow-down-blue.svg';
+
 interface AsideDataType {
   title: string;
   category: string;
@@ -42,6 +46,37 @@ const asideData: AsideDataType[] = [
     category: 'Политика',
   },
 ];
+
+const buttonMotion = {
+  rest: {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    color: '#2368ad',
+    duration: 0.4,
+    type: 'tween',
+  },
+  hover: {
+    backgroundColor: '#2368ad',
+    color: '#ffffff',
+    duration: 0.4,
+    type: 'spring',
+  },
+};
+
+const arrowMotion = {
+  rest: {
+    fill: '#2368ad',
+    transform: 'rotateX(0%)',
+    duration: 0.4,
+    type: 'tween',
+  },
+  hover: {
+    fill: '#ffffff',
+    transform: 'rotateX(180%)',
+    duration: 0.4,
+    type: 'spring',
+  },
+};
+
 const Aside = () => {
   return (
     <aside className="aside">
@@ -57,6 +92,16 @@ const Aside = () => {
           );
         })}
       </div>
+      <motion.button
+        className="aside-btn"
+        type="button"
+        initial={buttonMotion.rest}
+        whileHover={buttonMotion.hover}>
+        <span>Открыть полностью</span>
+        <motion.div initial={'rest'} variants={arrowMotion}>
+          <ArrowDownBlue />
+        </motion.div>
+      </motion.button>
       <Calendar />
     </aside>
   );
diff --git a/src/styles/_aside.scss b/src/styles/_aside.scss
index 956e54f..4d2c8f9 100644
--- a/src/styles/_aside.scss
+++ b/src/styles/_aside.scss
@@ -39,3 +39,21 @@
   font-weight: bold;
   font-size: 1rem;
 }
+
+.aside-btn {
+  cursor: pointer;
+  color: $main;
+  border: 0.1rem $main solid;
+  border-radius: 0.5rem;
+  padding: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.8rem;
+  font-size: 1.4rem;
+
+  svg {
+    width: 1.4rem;
+    height: 1.4rem;
+  }
+}