diff --git a/ui/package-lock.json b/ui/package-lock.json
index 50ae533bc..af88e46fc 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -13420,6 +13420,11 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-scrollable-feed": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-scrollable-feed/-/react-scrollable-feed-1.3.0.tgz",
+      "integrity": "sha512-ZoaWcrYlzNoGHNuYy//Wkz9jtFiy+pb8VvHzRVmthktU4cJAN4//aYzEIATyT+amAROL8qpZnoWUZJypDtmvfg=="
+    },
     "react-syntax-highlighter": {
       "version": "15.4.3",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.4.3.tgz",
diff --git a/ui/package.json b/ui/package.json
index b097d5a38..73debb27f 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -17,6 +17,7 @@
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "react-scrollable-feed": "^1.3.0",
     "react-syntax-highlighter": "^15.4.3",
     "react-use-websocket": "^2.6.1",
     "typescript": "^4.2.4",
diff --git a/ui/src/components/HarEntriesList.tsx b/ui/src/components/HarEntriesList.tsx
index 67d79df49..1cddeba50 100644
--- a/ui/src/components/HarEntriesList.tsx
+++ b/ui/src/components/HarEntriesList.tsx
@@ -1,6 +1,7 @@
 import {HarEntry} from "./HarEntry";
 import React, {useEffect, useRef} from "react";
 import styles from './style/HarEntriesList.module.sass';
+import ScrollableFeed from 'react-scrollable-feed'
 
 interface HarEntriesListProps {
     entries: any[];
@@ -9,24 +10,16 @@ interface HarEntriesListProps {
 }
 
 export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, focusedEntryId, setFocusedEntryId}) => {
-    const entriesDiv = useRef(null);
-    const totalCount = null; //todo
-
-    // Scroll to bottom in case results do not fit in screen
-    useEffect(() => {
-        if (entriesDiv.current && totalCount > 0) {
-            entriesDiv.current.scrollTop = entriesDiv.current.scrollHeight;
-        }
-    }, [entriesDiv, totalCount])
 
     return <>
-        <div ref={entriesDiv} className={styles.list}>
-            {entries?.map(entry => <HarEntry key={entry.id}
-                                             entry={entry}
-                                             setFocusedEntryId={setFocusedEntryId}
-                                             isSelected={focusedEntryId === entry.id}
-            />)}
-
-        </div>
+            <div className={styles.list}>
+                <ScrollableFeed>
+                    {entries?.map(entry => <HarEntry key={entry.id}
+                                                     entry={entry}
+                                                     setFocusedEntryId={setFocusedEntryId}
+                                                     isSelected={focusedEntryId === entry.id}
+                    />)}
+                </ScrollableFeed>
+            </div>
     </>;
 };
diff --git a/ui/src/components/HarEntryDetailed.tsx b/ui/src/components/HarEntryDetailed.tsx
index db4ae82a1..58d994a29 100644
--- a/ui/src/components/HarEntryDetailed.tsx
+++ b/ui/src/components/HarEntryDetailed.tsx
@@ -12,7 +12,9 @@ const useStyles = makeStyles(() => ({
         minHeight: 46,
         maxHeight: 46,
         alignItems: 'center',
-        marginBottom: 8
+        marginBottom: 8,
+        padding: 5,
+        paddingBottom: 0
     }
 }));
 
diff --git a/ui/src/components/HarPage.tsx b/ui/src/components/HarPage.tsx
index 3e75182f7..31c4d8e93 100644
--- a/ui/src/components/HarPage.tsx
+++ b/ui/src/components/HarPage.tsx
@@ -5,7 +5,6 @@ import {makeStyles} from "@material-ui/core";
 import "./style/HarPage.sass";
 import styles from './style/HarEntriesList.module.sass';
 import {HAREntryDetailed} from "./HarEntryDetailed";
-// import {HarPaging} from "./HarPaging";
 import useWebSocket from 'react-use-websocket';
 
 const useLayoutStyles = makeStyles(() => ({
@@ -20,6 +19,8 @@ const useLayoutStyles = makeStyles(() => ({
         display: 'flex',
         overflowY: 'auto',
         height: "calc(100% - 58px)",
+        padding: 5,
+        paddingBottom: 0
     }
 }));
 
@@ -31,27 +32,15 @@ export const HarPage: React.FC = () => {
     const [focusedEntryId, setFocusedEntryId] = useState(null);
     const [selectedHarEntry, setSelectedHarEntry] = useState(null);
 
-    const socketUrl = 'ws://localhost:8899/ws/1';
-    const {
-        sendMessage,
-        sendJsonMessage,
-        lastMessage,
-        lastJsonMessage,
-        readyState,
-        getWebSocket
-    } = useWebSocket(socketUrl, {
-        onOpen: () => console.log('opened'),
-        //Will attempt to reconnect on all close events, such as server shutting down
-        shouldReconnect: (closeEvent) => true,
-    });
-
-    console.log(lastMessage?.data);
+    const socketUrl = 'ws://localhost:8899/ws';
+    const {lastMessage} = useWebSocket(socketUrl, {shouldReconnect: (closeEvent) => true});
 
     useEffect(() => {
-        fetch("http://localhost:8899/api/entries")
-            .then(response => response.json())
-            .then(data => {setEntries(data); setFocusedEntryId(data[0]?.id)});
-    }, []);
+        if(!lastMessage?.data) return;
+        const entry = JSON.parse(lastMessage.data);
+        if(!focusedEntryId) setFocusedEntryId(entry.id)
+        setEntries([...entries, entry])
+    },[lastMessage?.data])
 
     useEffect(() => {
         if(!focusedEntryId) return;
@@ -67,16 +56,11 @@ export const HarPage: React.FC = () => {
                     {/*<HarFilters />*/}
                     <div className={styles.container}>
                         <HarEntriesList entries={entries} focusedEntryId={focusedEntryId} setFocusedEntryId={setFocusedEntryId}/>
-                        {/*<Box flexGrow={0} flexShrink={0}>*/}
-                        {/*    {!harStore.data.isFirstLoading &&*/}
-                        {/*    <HarPaging showPageNumber />*/}
-                        {/*    }*/}
-                        {/*</Box>*/}
                     </div>
                 </div>
-                <div className={classes.details}>
+                {selectedHarEntry && <div className={classes.details}>
                     <HAREntryDetailed harEntry={selectedHarEntry} classes={{root: classes.harViewer}}/>
-                </div>
+                </div>}
             </div>
         </div>
     )
diff --git a/ui/src/components/style/HarEntry.module.sass b/ui/src/components/style/HarEntry.module.sass
index 20c7094f6..96c949ee1 100644
--- a/ui/src/components/style/HarEntry.module.sass
+++ b/ui/src/components/style/HarEntry.module.sass
@@ -8,6 +8,7 @@
   border-radius: 4px
   cursor: pointer
   border: solid 1px transparent
+  margin-right: 5px
   &:not(:first-child)
     margin-top: 10px
 
diff --git a/ui/src/index.sass b/ui/src/index.sass
index d42fe8f89..bef187ff9 100644
--- a/ui/src/index.sass
+++ b/ui/src/index.sass
@@ -22,7 +22,7 @@ code
   width: 8px
 
 ::-webkit-scrollbar-thumb
-  background-color: rgba(0,0,0,0.5)
+  background-color: #272d44
   border-radius: 16px
 
 ::-webkit-scrollbar-button