diff --git a/front/index.html b/front/index.html
index 16a1e36..1b9c6ff 100644
--- a/front/index.html
+++ b/front/index.html
@@ -5,8 +5,6 @@
     <link rel="icon" type="image/png" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Porridger</title>
-    <!-- most likely will be loaded from browser cache -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
   </head>
   <body>
     <div id="root"></div>
diff --git a/front/src/components/AnnouncementDetails.tsx b/front/src/components/AnnouncementDetails.tsx
index c4b8da6..352b138 100644
--- a/front/src/components/AnnouncementDetails.tsx
+++ b/front/src/components/AnnouncementDetails.tsx
@@ -6,19 +6,28 @@ import { categoryNames } from '../assets/category'
 import { useBook } from '../hooks/api'
 import { Announcement } from '../api/announcement/types'
 import { iconItem } from '../utils/markerIcons'
+import { CSSProperties } from 'react'
 
 type AnnouncementDetailsProps = {
     close: () => void,
     announcement: Announcement
 }
 
+const styles = {
+    container: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    } as CSSProperties,
+}
+
 function AnnouncementDetails({ close, announcement: { id, name, category, bestBy, description, lat, lng, address, metro } }: AnnouncementDetailsProps) {
     const { handleBook, status: bookStatus } = useBook(id)
 
     return (
         <div
             className='modal'
-            style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+            style={styles.container}
         >
             <Modal.Dialog style={{ minWidth: '50vw' }}>
                 <Modal.Header closeButton onHide={close}>
diff --git a/front/src/components/BottomNavBar.tsx b/front/src/components/BottomNavBar.tsx
index 88a4cab..03c8d7f 100644
--- a/front/src/components/BottomNavBar.tsx
+++ b/front/src/components/BottomNavBar.tsx
@@ -3,27 +3,30 @@ import { Link } from 'react-router-dom'
 import addIcon from '../assets/addIcon.svg'
 import filterIcon from '../assets/filterIcon.svg'
 import userIcon from '../assets/userIcon.svg'
+import { CSSProperties } from 'react'
 
-const navBarStyles: React.CSSProperties = {
-    backgroundColor: 'var(--bs-success)',
-    height: 56,
-    width: '100%',
+const styles = {
+    navBar: {
+        backgroundColor: 'var(--bs-success)',
+        height: 56,
+        width: '100%',
+    } as CSSProperties,
+    navBarGroup: {
+        display: 'flex',
+        flexDirection: 'row',
+        height: '100%',
+        margin: 'auto'
+    } as CSSProperties,
+    navBarElement: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    } as CSSProperties,
 }
 
-const navBarGroupStyles: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'row',
-    height: '100%',
-    margin: 'auto'
-}
 
-const navBarElementStyles: React.CSSProperties = {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-}
 
 type BottomNavBarProps = {
     width: number,
@@ -32,18 +35,18 @@ type BottomNavBarProps = {
 
 function BottomNavBar({ width, toggleFilters }: BottomNavBarProps) {
     return (
-        <div style={navBarStyles}>
-            <div style={{ ...navBarGroupStyles, width: width }}>
+        <div style={styles.navBar}>
+            <div style={{ ...styles.navBarGroup, width: width }}>
 
-                <a style={navBarElementStyles} onClick={() => toggleFilters(true)}>
+                <a style={styles.navBarElement} onClick={() => toggleFilters(true)}>
                     <img src={filterIcon} alt='Фильтровать объявления' title='Фильтровать объявления' />
                 </a>
 
-                <Link style={navBarElementStyles} to='/add' >
+                <Link style={styles.navBarElement} to='/add' >
                     <img src={addIcon} alt='Опубликовать объявление' title='Опубликовать объявление' />
                 </Link>
 
-                <Link style={navBarElementStyles} to={'/user'} >
+                <Link style={styles.navBarElement} to={'/user'} >
                     <img src={userIcon} alt='Личный кабинет' title='Личный кабинет' />
                 </Link>
 
diff --git a/front/src/main.tsx b/front/src/main.tsx
index a3955bf..20632c1 100644
--- a/front/src/main.tsx
+++ b/front/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
 
 import App from './App.tsx'
 import './index.css'
+import 'bootstrap/dist/css/bootstrap.min.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
diff --git a/front/src/pages/AddPage.tsx b/front/src/pages/AddPage.tsx
index 17816b6..425bc42 100644
--- a/front/src/pages/AddPage.tsx
+++ b/front/src/pages/AddPage.tsx
@@ -1,4 +1,4 @@
-import { FormEventHandler, useEffect, useState } from 'react'
+import { CSSProperties, FormEventHandler, useEffect, useState } from 'react'
 import { Form, Button, Card } from 'react-bootstrap'
 import { MapContainer, TileLayer } from 'react-leaflet'
 import { latLng } from 'leaflet'
@@ -11,6 +11,19 @@ import { stations, lines, lineNames } from '../assets/metro'
 import { fallbackError, gotError } from '../hooks/api/useFetch'
 import { useOsmAddresses } from '../hooks/api'
 
+const styles = {
+    modal: {
+        height: 'calc(100vh - 3rem)',
+    } as CSSProperties,
+    body: {
+        overflowY: 'auto',
+    } as CSSProperties,
+    map: {
+        width: '100%',
+        height: 400,
+    } as CSSProperties,
+}
+
 function AddPage() {
     const [addressPosition, setAddressPosition] = useState(latLng(59.972, 30.3227))
 
@@ -54,8 +67,8 @@ function AddPage() {
     }
 
     return (
-        <Card className='m-4' style={{ height: 'calc(100vh - 3rem)' }}>
-            <Card.Body style={{ overflowY: 'auto' }} >
+        <Card className='m-4' style={styles.modal}>
+            <Card.Body style={styles.body} >
                 <Form onSubmit={handleSubmit}>
                     <Form.Group className='mb-3' controlId='name'>
                         <Form.Label>Заголовок объявления</Form.Label>
@@ -84,7 +97,7 @@ function AddPage() {
                         <div className='mb-3'>
                             <MapContainer
                                 scrollWheelZoom={false}
-                                style={{ width: '100%', height: 400 }}
+                                style={styles.map}
                                 center={addressPosition}
                                 zoom={13}
                             >
@@ -143,19 +156,19 @@ function AddPage() {
                         <div className='mb-3'>
                             {trashboxes.loading
                                 ? (
-                                    <div style={{ height: 400 }}>
+                                    <div style={styles.map}>
                                         <p>Загрузка...</p>
                                     </div>
                                 ) : (
                                     gotError(trashboxes) ? (
                                         <p
-                                            style={{ height: 400 }}
+                                            style={styles.map}
                                             className='text-danger'
                                         >{trashboxes.error}</p>
                                     ) : (
                                         <MapContainer
                                             scrollWheelZoom={false}
-                                            style={{ width: '100%', height: 400 }}
+                                            style={styles.map}
                                             center={addressPosition}
                                             zoom={13}
                                             className=''
diff --git a/front/src/pages/HomePage.tsx b/front/src/pages/HomePage.tsx
index ae926da..d497801 100644
--- a/front/src/pages/HomePage.tsx
+++ b/front/src/pages/HomePage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { CSSProperties, useEffect, useState } from 'react'
 import Stories from 'react-insta-stories'
 import { Story } from 'react-insta-stories/dist/interfaces'
 
@@ -44,17 +44,22 @@ const fallbackStory = (text = '', isError = false): Story[] => [{
         useEffect(() => { action('pause') }, [action])
 
         return (
-            <div style={{ margin: 'auto' }} className={isError ? 'text-danger' : ''}>
+            <div style={styles.center} className={isError ? 'text-danger' : ''}>
                 {text || <img src={puffSpinner} />}
             </div>
         )
     },
 }]
 
-const storiesContainerCSS = {
-    display: 'flex',
-    justifyContent: 'center',
-    backgroundColor: 'rgb(17, 17, 17)'
+const styles = {
+    container: {
+        display: 'flex',
+        justifyContent: 'center',
+        backgroundColor: 'rgb(17, 17, 17)',
+    } as CSSProperties,
+    center: {
+        margin: 'auto'
+    } as CSSProperties,
 }
 
 function HomePage() {
@@ -69,7 +74,7 @@ function HomePage() {
 
     return (<>
         <Filters filter={filter} setFilter={setFilter} filterShown={filterShown} setFilterShown={setFilterShown} />
-        <div style={storiesContainerCSS}>
+        <div style={styles.container}>
             <Stories
                 stories={stories}
                 defaultInterval={11000}
