diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/AvailablePluginsDrawer.component.tsx b/src/components/Map/Drawer/AvailablePluginsDrawer/AvailablePluginsDrawer.component.tsx
index 9022c5817c921769d43dc879d6de2b9d269de319..80af258edc647d357865948e2e52a9dc333dcaba 100644
--- a/src/components/Map/Drawer/AvailablePluginsDrawer/AvailablePluginsDrawer.component.tsx
+++ b/src/components/Map/Drawer/AvailablePluginsDrawer/AvailablePluginsDrawer.component.tsx
@@ -1,28 +1,16 @@
-import {
-  privateActivePluginsSelector,
-  publicPluginsListSelector,
-} from '@/redux/plugins/plugins.selectors';
 import { DrawerHeading } from '@/shared/DrawerHeading';
-import { useSelector } from 'react-redux';
-import { LoadPlugin } from './LoadPlugin';
 import { LoadPluginFromUrl } from './LoadPluginFromUrl';
+import { PublicPlugins } from './PublicPlugins';
+import { PrivateActivePlugins } from './PrivateActivePlugins';
 
 export const AvailablePluginsDrawer = (): JSX.Element => {
-  const publicPlugins = useSelector(publicPluginsListSelector);
-  const privateActivePlugins = useSelector(privateActivePluginsSelector);
-
   return (
     <div className="h-full max-h-full" data-testid="available-plugins-drawer">
       <DrawerHeading title="Available plugins" />
       <div className="flex flex-col gap-6 p-6">
         <LoadPluginFromUrl />
-        {privateActivePlugins.map(plugin => (
-          <LoadPlugin key={plugin.hash} plugin={plugin} />
-        ))}
-
-        {publicPlugins.map(plugin => (
-          <LoadPlugin key={plugin.hash} plugin={plugin} />
-        ))}
+        <PrivateActivePlugins />
+        <PublicPlugins />
       </div>
     </div>
   );
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx b/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx
index 64b713258dfc77c24156addbc51a768a59761708..f129d79d0797827601fbff4068bec1b27e5fca2e 100644
--- a/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx
+++ b/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPlugin/LoadPlugin.component.tsx
@@ -14,11 +14,11 @@ export const LoadPlugin = ({ plugin }: Props): JSX.Element => {
   });
 
   return (
-    <div className="flex w-full items-center justify-between">
+    <div className="flex w-full items-center justify-between text-sm">
       <span className="text-cetacean-blue">{plugin.name}</span>
       <Button
         variantStyles="secondary"
-        className="h-10 self-end rounded-e rounded-s"
+        className="h-10 self-end rounded-e rounded-s text-xs font-medium"
         onClick={togglePlugin}
         data-testid="toggle-plugin"
         disabled={isPluginLoading}
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPluginFromUrl/LoadPluginFromUrl.component.tsx b/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPluginFromUrl/LoadPluginFromUrl.component.tsx
index fac9bd0ddaf03c88b1e8f30f6baf2090081a398c..f57224d048c4af8fd407c8c38cff19f111e8dccf 100644
--- a/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPluginFromUrl/LoadPluginFromUrl.component.tsx
+++ b/src/components/Map/Drawer/AvailablePluginsDrawer/LoadPluginFromUrl/LoadPluginFromUrl.component.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@/shared/Button';
+import { Input } from '@/shared/Input';
 import { useLoadPluginFromUrl } from './hooks/useLoadPluginFromUrl';
 
 export const LoadPluginFromUrl = (): JSX.Element => {
@@ -8,8 +9,8 @@ export const LoadPluginFromUrl = (): JSX.Element => {
     <div className="flex w-full">
       <label className="flex w-full flex-col gap-2 text-sm text-cetacean-blue">
         <span>URL:</span>
-        <input
-          className="h-10 w-full bg-cultured p-3"
+        <Input
+          className="h-10 w-full flex-none bg-cultured p-3"
           type="url"
           value={pluginUrl}
           onChange={handleChangePluginUrl}
@@ -18,7 +19,7 @@ export const LoadPluginFromUrl = (): JSX.Element => {
       </label>
       <Button
         variantStyles="secondary"
-        className="h-10 self-end rounded-e rounded-s"
+        className="h-10 self-end rounded-e rounded-s text-xs font-medium"
         onClick={handleLoadPlugin}
         disabled={isPending}
         data-testid="load-plugin-button"
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/PrivateActivePlugins.component.tsx b/src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/PrivateActivePlugins.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..557b997413b41d2299194cfe1d08caa92907c45f
--- /dev/null
+++ b/src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/PrivateActivePlugins.component.tsx
@@ -0,0 +1,8 @@
+import { privateActivePluginsSelector } from '@/redux/plugins/plugins.selectors';
+import { useSelector } from 'react-redux';
+import { LoadPlugin } from '../LoadPlugin';
+
+export const PrivateActivePlugins = (): React.ReactNode => {
+  const privateActivePlugins = useSelector(privateActivePluginsSelector);
+  return privateActivePlugins.map(plugin => <LoadPlugin key={plugin.hash} plugin={plugin} />);
+};
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/index.ts b/src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4a8bc8b5fb91dbd12bfdff759888d4266870c8f5
--- /dev/null
+++ b/src/components/Map/Drawer/AvailablePluginsDrawer/PrivateActivePlugins/index.ts
@@ -0,0 +1 @@
+export { PrivateActivePlugins } from './PrivateActivePlugins.component';
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/PublicPlugins.component.tsx b/src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/PublicPlugins.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..674b88756126ae4460e8b81d5dfd06a1047b86cf
--- /dev/null
+++ b/src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/PublicPlugins.component.tsx
@@ -0,0 +1,9 @@
+import { publicPluginsListSelector } from '@/redux/plugins/plugins.selectors';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { LoadPlugin } from '../LoadPlugin';
+
+export const PublicPlugins = (): React.ReactNode => {
+  const publicPlugins = useSelector(publicPluginsListSelector);
+  return publicPlugins.map(plugin => <LoadPlugin key={plugin.hash} plugin={plugin} />);
+};
diff --git a/src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/index.ts b/src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7c1fd8a7776423954e1da451bdf1ba757e14a1db
--- /dev/null
+++ b/src/components/Map/Drawer/AvailablePluginsDrawer/PublicPlugins/index.ts
@@ -0,0 +1 @@
+export { PublicPlugins } from './PublicPlugins.component';