diff --git a/client-app/src/App.tsx b/client-app/src/App.tsx
index 8346ae3..bfdff1e 100644
--- a/client-app/src/App.tsx
+++ b/client-app/src/App.tsx
@@ -11,6 +11,7 @@ import UserEditPage from "./pages/UserEditPage/UserEditPage";
 import ScriptListPage from "./pages/ScriptListPage/ScriptListPage";
 import ScriptEditPage from "./pages/ScriptEditPage/ScriptEditPage";
 import ObjectEditPage from "./pages/ObjectEditPage/ObjectEditPage";
+import ExtensionListPage from "./pages/ExtensionListPage/ExtensionListPage";
 
 const App: React.FC = () => {
 
@@ -35,6 +36,7 @@ const App: React.FC = () => {
           <Route path="objects/:id" element={<ObjectEditPage />} />
           <Route path="scripts" element={<ScriptListPage />} />
           <Route path="scripts/:id" element={<ScriptEditPage />} />
+          <Route path="extensions" element={<ExtensionListPage />} />
           <Route path="users" element={<UserListPage />} />
           <Route path="users/:username" element={<UserEditPage />} />
         </Route>
diff --git a/client-app/src/components/AdminLayout/.module.css b/client-app/src/components/AdminLayout/.module.css
index bcdd280..455ffa1 100644
--- a/client-app/src/components/AdminLayout/.module.css
+++ b/client-app/src/components/AdminLayout/.module.css
@@ -6,7 +6,6 @@
     bottom: 0;
     display: grid;
     grid-template-columns: 73px 1fr;
-    transition: 0.5s;
 }
 
 .log_out_panel {
@@ -168,10 +167,14 @@
     height: 70px;
 }
 
-.page:hover {
+.page:not(.current_page):hover {
     background-color: rgb(0, 51, 255);
 }
 
+.current_page {
+    background-color: rgb(162, 32, 255);
+}
+
 .page_img {
     position: absolute;
     left: 16px;
diff --git a/client-app/src/components/AdminLayout/AdminLayout.tsx b/client-app/src/components/AdminLayout/AdminLayout.tsx
index 322b6e3..b4c6f41 100644
--- a/client-app/src/components/AdminLayout/AdminLayout.tsx
+++ b/client-app/src/components/AdminLayout/AdminLayout.tsx
@@ -1,24 +1,13 @@
 import React from "react";
 import { Outlet, useNavigate } from "react-router-dom";
-import { ApiExtensions } from "../../services/api/extensions";
 import { ApiAuth } from "../../services/api/auth";
 import cl from './.module.css';
 import Space from "../Space/Space";
 import ModalWindow from "../ModalWindow/ModalWindow";
 
-type ShortExtensionInfo = {
-    id: string,
-    name: string,
-    url: string
-}
-
 const AdminLayout = () => {
-
-    const [chosenMenu, openMenu] = React.useState<string | undefined>(undefined);
-    const [isInstalledExtMenuOpened, installedExtMenuState] = React.useState<boolean>(false);
     const [isNavMenuOpened, setNavMenuState] = React.useState<boolean>(false);
     const [isModWinVisible, setModWinVisibility] = React.useState<boolean>(false);
-    const [extensionList, setExtensionList] = React.useState<Array<ShortExtensionInfo>>([]);
 
     const navigate = useNavigate();
 
@@ -28,11 +17,6 @@ const AdminLayout = () => {
         });
     }
 
-    function MoveTo(path: string) {
-        openMenu(undefined);
-        navigate(path);
-    }
-
     function GetTitle() {
         var path = window.location.pathname;
 
@@ -64,6 +48,10 @@ const AdminLayout = () => {
             }
         }
 
+        if (path === "/admin/extensions") {
+            return "Extensions";
+        }
+
         if (path === "/admin/users") {
             return "Users";
         }
@@ -79,26 +67,6 @@ const AdminLayout = () => {
         return "UNDEFINED LOCATION";
     }
 
-    function RenderInstalledExtensions() {
-        var result: Array<React.ReactNode> = [];
-
-        extensionList.map((el) => {
-            result.push(
-                <div className={cl.comp} key={el.id}>
-                    <p onClick={() => { if (el.url) { window.location.href = el.url } }}>{el.name}</p>
-                </div>
-            );
-        });
-
-        return result;
-    }
-
-    React.useEffect(() => {
-        ApiExtensions.getExtensions().then((res) => {
-            setExtensionList([...res]);
-        });
-    });
-
     return (
         <div className={cl.admin_space}>
             <div className={cl.nav_space}>
@@ -115,7 +83,8 @@ const AdminLayout = () => {
                             <span className={cl.sep_theme_text + " " + cl.system_sep_theme_line}>System</span>
                         </div>
                         <div className={cl.pages + " " + cl.system_pages}>
-                            <div className={cl.page + " " + cl.sys_info_page} onClick={() => MoveTo('/admin')} title="System info">
+                            <div className={`${cl.page} ${cl.sys_info_page} ${window.location.pathname === "/admin" ? cl.current_page : ''}`}
+                                onClick={() => navigate('/admin')} title="System info">
                                 <img className={cl.page_img + " " + cl.sys_info_img} alt="system info" />
                                 <span className={`${cl.page_name} ${cl.sys_info_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>System info</span>
                             </div>
@@ -125,15 +94,15 @@ const AdminLayout = () => {
                             <span className={cl.sep_theme_text + " " + cl.object_sep_theme_line}>Object</span>
                         </div>
                         <div className={cl.pages + " " + cl.object_pages}>
-                            <div className={cl.page + " " + cl.objects_page} onClick={() => MoveTo('/admin/objects')} title="Objects">
+                            <div className={`${cl.page} ${cl.objects_page} ${window.location.pathname.includes("/admin/objects") ? cl.current_page : ''}`} onClick={() => navigate('/admin/objects')} title="Objects">
                                 <img className={cl.page_img + " " + cl.objects_img} alt="objects" />
                                 <span className={`${cl.page_name} ${cl.objects_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Objects</span>
                             </div>
-                            <div className={cl.page + " " + cl.devices_page} title="Devices">
+                            <div className={`${cl.page} ${cl.devices_page} ${window.location.pathname.includes("/admin/devices") ? cl.current_page : ''}`} title="Devices">
                                 <img className={cl.page_img + " " + cl.devices_img} alt="devices" />
                                 <span className={`${cl.page_name} ${cl.devices_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Devices</span>
                             </div>
-                            <div className={cl.page + " " + cl.rooms_page} title="Rooms">
+                            <div className={`${cl.page} ${cl.rooms_page} ${window.location.pathname.includes("/admin/rooms") ? cl.current_page : ''}`} title="Rooms">
                                 <img className={cl.page_img + " " + cl.rooms_img} alt="rooms" />
                                 <span className={`${cl.page_name} ${cl.rooms_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Rooms</span>
                             </div>
@@ -143,15 +112,15 @@ const AdminLayout = () => {
                             <span className={cl.sep_theme_text + " " + cl.automation_sep_theme_line}>Automation</span>
                         </div>
                         <div className={cl.pages + " " + cl.automation_pages}>
-                            <div className={cl.page + " " + cl.schedules_page} title="Schedules">
+                            <div className={`${cl.page} ${cl.schedules_page} ${window.location.pathname.includes("/admin/schedules") ? cl.current_page : ''}`} title="Schedules">
                                 <img className={cl.page_img + " " + cl.schedules_img} alt="schedules" />
                                 <span className={`${cl.page_name} ${cl.schedules_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Schedules</span>
                             </div>
-                            <div className={cl.page + " " + cl.scripts_page} onClick={() => MoveTo('/admin/scripts')} title="Scripts">
+                            <div className={`${cl.page} ${cl.scripts_page} ${window.location.pathname.includes("/admin/scripts") ? cl.current_page : ''}`} onClick={() => navigate('/admin/scripts')} title="Scripts">
                                 <img className={cl.page_img + " " + cl.scripts_img} alt="scripts" />
                                 <span className={`${cl.page_name} ${cl.scripts_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Scripts</span>
                             </div>
-                            <div className={cl.page + " " + cl.triggers_page} title="Triggers">
+                            <div className={`${cl.page} ${cl.triggers_page} ${window.location.pathname.includes("/admin/triggers") ? cl.current_page : ''}`} title="Triggers">
                                 <img className={cl.page_img + " " + cl.triggers_img} alt="triggers" />
                                 <span className={`${cl.page_name} ${cl.triggers_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Triggers</span>
                             </div>
@@ -161,7 +130,7 @@ const AdminLayout = () => {
                             <span className={cl.sep_theme_text + " " + cl.extension_sep_theme_line}>Extensions</span>
                         </div>
                         <div className={cl.pages + " " + cl.extension_pages}>
-                            <div className={cl.page + " " + cl.extensions_page} title="Extensions">
+                            <div className={`${cl.page} ${cl.extensions_page} ${window.location.pathname.includes("/admin/extensions") ? cl.current_page : ''}`} onClick={() => navigate('/admin/extensions')} title="Extensions">
                                 <img className={cl.page_img + " " + cl.extensions_img} alt="extensions" />
                                 <span className={`${cl.page_name} ${cl.extensions_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Extensions</span>
                             </div>
@@ -171,7 +140,7 @@ const AdminLayout = () => {
                             <span className={cl.sep_theme_text + " " + cl.users_sep_theme_line}>Users</span>
                         </div>
                         <div className={cl.pages + " " + cl.user_pages}>
-                            <div className={cl.page + " " + cl.users_page} onClick={() => MoveTo('/admin/users')} title="Users">
+                            <div className={`${cl.page} ${cl.users_page} ${window.location.pathname.includes("/admin/users") ? cl.current_page : ''}`} onClick={() => navigate('/admin/users')} title="Users">
                                 <img className={cl.page_img + " " + cl.users_img} alt="users" />
                                 <span className={`${cl.page_name} ${cl.users_name} ${isNavMenuOpened ? cl.page_name_visible : ''}`}>Users</span>
                             </div>
diff --git a/client-app/src/pages/ExtensionListPage/.module.css b/client-app/src/pages/ExtensionListPage/.module.css
new file mode 100644
index 0000000..0014799
--- /dev/null
+++ b/client-app/src/pages/ExtensionListPage/.module.css
@@ -0,0 +1,246 @@
+.list_control_panel {
+    position: relative;
+    display: flex;
+    padding-left: 10px;
+}
+
+.search_type_panel {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    background-color: rgb(228, 255, 250);
+    border: 2px solid blue;
+    border-radius: 5px;
+}
+
+.search_type_option_cont {
+    padding: 5px;
+}
+
+.search_type_option {
+    cursor: pointer;
+    width: 100px;
+    background-color: #2828ff;
+    color: white;
+    padding-block: 5px;
+    border-radius: 5px;
+}
+
+.search_type_option:not(.search_type_option_current):hover {
+    background-color: rgb(48, 145, 255);
+}
+
+.search_type_option_current {
+    background-color: rgb(136, 0, 255);
+}
+
+.search_type_option_text {
+    text-align: center;
+    font-size: 20px;
+}
+
+.search_type_option_browse {
+    left: 1vw;
+}
+
+.search_type_option_installed {
+    left: calc(100px + 2vw);
+}
+
+.search_type_option_updates {
+    left: calc(200px + 3vw);
+}
+
+.extension_record {
+    position: relative;
+    display: grid;
+    grid-template-columns: 80% 20%;
+    border: 3px solid rgb(0, 0, 178);
+    background-color: white;
+    width: calc(100% - 20px);
+    border-radius: 15px;
+    height: fit-content;
+    padding: 7px;
+}
+
+@media (max-width: 385px) {
+    .extension_record {
+        display: block;
+    }
+}
+
+@media (max-device-width: 385px) {
+    .extension_record {
+        display: block;
+    }
+}
+
+.extension_info_part {
+    position: relative;
+}
+
+.extension_main_info_cont {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+.extension_img {
+    background-color: grey;
+    border: 1px solid black;
+    width: 60px;
+    height: 60px;
+}
+
+.extension_name_and_author_cont {
+    display: grid;
+    grid-template-rows: 1.3fr 1fr;
+    padding-left: 7px;
+    width: fit-content;
+}
+
+.extension_author {
+    font-size: 19px;
+}
+
+.active_text_link:hover {
+    cursor: pointer;
+    color: blue;
+}
+
+.extension_description_cont {
+    padding-top: 10px;
+    width: 100%;
+}
+
+.extension_description {
+    text-align: justify;
+    white-space: normal;
+}
+
+.tag_cont {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.tag {
+    padding-top: 13px;
+}
+
+.tag:not(:last-child) {
+    padding-right: 7px;
+}
+
+.tag>span {
+    cursor: pointer;
+    border-radius: 8px;
+    background-color: #517fff;
+    color: white;
+    padding: 5px;
+}
+
+.tag>span:hover {
+    background-color: rgb(54, 228, 255);
+}
+
+.stat_cont {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+.installed_count_cont {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    margin-right: 30px;
+    margin-top: 10px;
+}
+
+.installed_count_text {
+    font-weight: bold;
+}
+
+.installed_count_img {
+    content: url(./img/installed.png);
+    width: 20px;
+    margin-left: 5px;
+}
+
+.last_update_cont {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    margin-top: 10px;
+}
+
+.last_update_text {
+    font-weight: bold;
+}
+
+.extension_version_control_part {
+    position: relative;
+}
+
+@media (max-width: 385px) {
+    .extension_version_control_part {
+        padding-top: 10px;
+    }
+}
+
+@media (max-device-width: 385px) {
+    .extension_version_control_part {
+        padding-top: 10px;
+    }
+}
+
+.extension_version_cont {
+    width: 100%;
+}
+
+.extension_current_version {
+    text-align: right;
+    font-weight: bold;
+}
+
+.extension_new_version {
+    text-align: right;
+    font-weight: bold;
+    color: goldenrod;
+    margin-top: 10px;
+}
+
+.extension_actions {
+    position: relative;
+    width: 100%;
+    margin-top: 10px;
+}
+
+.extension_install_button_cont {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+.extension_install_button {
+    cursor: pointer;
+    background-color: rgb(61, 74, 255);
+    width: fit-content;
+    padding: 5px;
+    border-radius: 5px;
+}
+
+.extension_install_button:hover {
+    background-color: rgb(0, 208, 255);
+}
+
+.extension_install_button_text {
+    color: white;
+    font-size: 20px;
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/client-app/src/pages/ExtensionListPage/ExtensionListPage.tsx b/client-app/src/pages/ExtensionListPage/ExtensionListPage.tsx
new file mode 100644
index 0000000..5bafff7
--- /dev/null
+++ b/client-app/src/pages/ExtensionListPage/ExtensionListPage.tsx
@@ -0,0 +1,179 @@
+import React from "react";
+import cl from "./.module.css";
+import { ApiExtensions } from "../../services/api/extensions";
+import Space from "../../components/Space/Space";
+import LoadingAnimation from "../../components/LoadingAnimation/LoadingAnimation";
+import CustomTextarea from "../../components/CustomTextarea/CustomTextarea";
+
+type ExtensionData = {
+    id: string,
+    name: string,
+    author: string,
+    version: string,
+    description?: string,
+    url?: string,
+    authorUrl?: string
+}
+
+enum ExtensionFilter {
+    Browse = 0,
+    Installed = 1,
+    Updates = 2
+}
+
+const ExtensionListPage = () => {
+
+    const [isLoading, setLoadingState] = React.useState<boolean>(false);
+    const [extensions, setExtensions] = React.useState<Array<ExtensionData>>([]);
+    const [extensionFilter, setExtensionFilter] = React.useState<ExtensionFilter>(ExtensionFilter.Browse);
+    const [search, setSearch] = React.useState('');
+
+    async function UpdateExtensions() {
+        setLoadingState(true);
+
+        await ApiExtensions.getExtensions().then(data => {
+            setExtensions(data);
+        });
+
+        setLoadingState(false);
+    }
+
+    function RenderExtensions() {
+        if (isLoading) {
+            return (
+                <div>
+                    <Space height="20px" />
+                    <LoadingAnimation size="70px" loadingCurveWidth="11px" isCenter={true} />
+                </div>
+            );
+        }
+
+        var result: Array<React.ReactNode> = [];
+        var sortedExtensions: Array<ExtensionData> = [...extensions];
+
+        sortedExtensions.sort((a, b) => {
+            if (a.name.toLowerCase() < b.name.toLowerCase()) {
+                return -1;
+            }
+            if (a.name.toLowerCase() > b.name.toLowerCase()) {
+                return 1;
+            }
+            return 0;
+        });
+
+        sortedExtensions.map((extension) => {
+            if (search !== '' &&
+                !extension.name.toLowerCase().includes(search.toLowerCase()) &&
+                !extension.author.toLowerCase().includes(search.toLowerCase()) &&
+                !extension.description?.toLowerCase().includes(search.toLowerCase())) {
+                return;
+            }
+
+            result.push(
+                <div key={extension.id}>
+                    <Space height="20px" />
+                    <div className={cl.extension_record}>
+                        <div className={cl.extension_info_part}>
+                            <div className={cl.extension_main_info_cont}>
+                                <img className={cl.extension_img} alt="" />
+                                <div className={cl.extension_name_and_author_cont}>
+                                    <h2
+                                        className={`${cl.extension_name} ${extension.url ? cl.active_text_link : ''}`}
+                                        onClick={() => {
+                                            if (extension.url) {
+                                                window.location.href = (extension.url ?? "");
+                                            }
+                                        }}>{extension.name}</h2>
+                                    <p
+                                        className={`${cl.extension_author} ${extension.authorUrl ? cl.active_text_link : ''}`}
+                                        onClick={() => {
+                                            if (extension.authorUrl) {
+                                                window.location.href = (extension.authorUrl ?? "");
+                                            }
+                                        }}>by <b>{extension.author}</b></p>
+                                </div>
+                            </div>
+                            <div className={cl.extension_description_cont}>
+                                <p className={cl.extension_description}>{extension.description}</p>
+                            </div>
+                            <div className={cl.tag_cont}>
+                                <div className={cl.tag}><span>logs</span></div>
+                                <div className={cl.tag}><span>logs</span></div>
+                                <div className={cl.tag}><span>logs</span></div>
+                                <div className={cl.tag}><span>logs</span></div>
+                                <div className={cl.tag}><span>logs</span></div>
+                                <div className={cl.tag}><span>logs</span></div>
+                                <div className={cl.tag}><span>logs</span></div>
+                                <div className={cl.tag}><span>logs</span></div>
+                            </div>
+                            <div className={cl.stat_cont}>
+                                <div className={cl.installed_count_cont}>
+                                    <span className={cl.installed_count_text}>659.4k</span>
+                                    <img className={cl.installed_count_img} />
+                                </div>
+                                <div className={cl.last_update_cont}>
+                                    <span className={cl.last_update_text}>Last update 2 days ago</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div className={cl.extension_version_control_part}>
+                            <div className={cl.extension_version_cont}>
+                                <p className={cl.extension_current_version}>{extension.version}</p>
+                                <p className={cl.extension_new_version}>1.0.1</p>
+                            </div>
+                            <div className={cl.extension_actions}>
+                                <div className={cl.extension_install_button_cont}>
+                                    <div className={cl.extension_install_button}>
+                                        <span className={cl.extension_install_button_text}>Install</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            );
+        });
+
+        return result;
+    }
+
+    React.useEffect(() => {
+        document.body.style.backgroundColor = 'whitesmoke';
+        UpdateExtensions();
+    }, []);
+
+    return (
+        <div>
+            <Space height="20px" />
+            <div className={cl.list_control_panel}>
+                <CustomTextarea font="robotic" placeholder="Search" contentSize="28px" height="33px" width="500px" onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setSearch(e.target.value)} />
+            </div>
+            <Space height="20px" />
+            <div style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+                <div style={{ width: '100%', paddingInline: '10px' }}>
+                    <div className={cl.search_type_panel}>
+                        <div className={`${cl.search_type_option_cont} ${cl.search_type_option_cont_browse}`}>
+                            <div className={`${cl.search_type_option} ${cl.search_type_option_browse} ${extensionFilter === ExtensionFilter.Browse ? cl.search_type_option_current : ''}`} onClick={() => setExtensionFilter(ExtensionFilter.Browse)}>
+                                <p className={`${cl.search_type_option_text} ${cl.search_type_option_text_browse}`}>Browse</p>
+                            </div>
+                        </div>
+                        <div className={`${cl.search_type_option_cont} ${cl.search_type_option_cont_installed}`}>
+                            <div className={`${cl.search_type_option} ${cl.search_type_option_installed} ${extensionFilter === ExtensionFilter.Installed ? cl.search_type_option_current : ''}`} onClick={() => setExtensionFilter(ExtensionFilter.Installed)}>
+                                <p className={`${cl.search_type_option_text} ${cl.search_type_option_text_installed}`}>Installed</p>
+                            </div>
+                        </div>
+                        <div className={`${cl.search_type_option_cont} ${cl.search_type_option_cont_updates}`}>
+                            <div className={`${cl.search_type_option} ${cl.search_type_option_updates} ${extensionFilter === ExtensionFilter.Updates ? cl.search_type_option_current : ''}`} onClick={() => setExtensionFilter(ExtensionFilter.Updates)}>
+                                <p className={`${cl.search_type_option_text} ${cl.search_type_option_text_updates}`}>Updates</p>
+                            </div>
+                        </div>
+                    </div>
+                    {RenderExtensions()}
+                    <Space height="20px" />
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default ExtensionListPage;
\ No newline at end of file
diff --git a/client-app/src/pages/ExtensionListPage/img/installed.png b/client-app/src/pages/ExtensionListPage/img/installed.png
new file mode 100644
index 0000000..e8b06ab
Binary files /dev/null and b/client-app/src/pages/ExtensionListPage/img/installed.png differ
diff --git a/client-app/src/pages/ScriptListPage/.module.css b/client-app/src/pages/ScriptListPage/.module.css
index f8b7a81..0ddd06c 100644
--- a/client-app/src/pages/ScriptListPage/.module.css
+++ b/client-app/src/pages/ScriptListPage/.module.css
@@ -106,7 +106,7 @@
 .list_control_panel {
     position: relative;
     display: flex;
-    padding-left: 2%;
+    padding-left: 10px;
 }
 
 .add_script_button {
@@ -128,7 +128,7 @@
 
 .script_record {
     border: 3px solid rgb(0, 0, 178);
-    width: 100%;
+    width: calc(100% - 6px);
     background-color: white;
     color: rgb(57, 75, 108);
     padding-block: 15px;
diff --git a/client-app/src/pages/ScriptListPage/ScriptListPage.tsx b/client-app/src/pages/ScriptListPage/ScriptListPage.tsx
index 9cbbd5a..913e69d 100644
--- a/client-app/src/pages/ScriptListPage/ScriptListPage.tsx
+++ b/client-app/src/pages/ScriptListPage/ScriptListPage.tsx
@@ -117,13 +117,14 @@ const ScriptListPage = () => {
     }
 
     function RenderScriptList() {
-        if (!isListLoaded)
+        if (!isListLoaded) {
             return (
                 <div>
                     <Space height="20px" />
                     <LoadingAnimation size="70px" loadingCurveWidth="11px" isCenter={true} />
                 </div>
             );
+        }
 
         var res = [];
         var fixedScripts: Array<ScriptData> = [...scripts];
@@ -217,7 +218,7 @@ const ScriptListPage = () => {
             </div>
             <Space height="20px" />
             <div style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                <div style={{ width: '96%' }}>
+                <div style={{ width: '100%', paddingInline: '10px' }}>
                     <TableHeader
                         components={[
                             { text: "name", val: "name" },
diff --git a/client-app/src/pages/UserListPage/.module.css b/client-app/src/pages/UserListPage/.module.css
index be5adc2..5d05c2c 100644
--- a/client-app/src/pages/UserListPage/.module.css
+++ b/client-app/src/pages/UserListPage/.module.css
@@ -60,7 +60,7 @@
 .list_control_panel {
     position: relative;
     display: flex;
-    padding-left: 2%;
+    padding-left: 10px;
 }
 
 .add_user_button {
@@ -82,7 +82,7 @@
 
 .user_record {
     border: 3px solid rgb(0, 0, 178);
-    width: 100%;
+    width: calc(100% - 6px);
     background-color: white;
     color: rgb(57, 75, 108);
     padding-block: 15px;
diff --git a/client-app/src/pages/UserListPage/UserListPage.tsx b/client-app/src/pages/UserListPage/UserListPage.tsx
index 8dc5caf..22712da 100644
--- a/client-app/src/pages/UserListPage/UserListPage.tsx
+++ b/client-app/src/pages/UserListPage/UserListPage.tsx
@@ -121,13 +121,14 @@ const UserListPage = () => {
     }
 
     function RenderUserList() {
-        if (!isListLoaded)
+        if (!isListLoaded) {
             return (
                 <div>
                     <Space height="20px" />
                     <LoadingAnimation size="70px" loadingCurveWidth="11px" isCenter={true} />
                 </div>
             );
+        }
 
         var res = [];
         var fixedUsers: Array<UserData> = [...users];
@@ -228,7 +229,7 @@ const UserListPage = () => {
             </div>
             <Space height="20px" />
             <div style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-                <div style={{ width: '96%' }}>
+                <div style={{ width: '100%', paddingInline: '10px' }}>
                     <TableHeader
                         components={[
                             { text: 'username', val: 'username' },