diff --git a/frontend/app/components/Session_/Fetch/Fetch.js b/frontend/app/components/Session_/Fetch/Fetch.js
index cf05f944d..5b8e49911 100644
--- a/frontend/app/components/Session_/Fetch/Fetch.js
+++ b/frontend/app/components/Session_/Fetch/Fetch.js
@@ -160,7 +160,7 @@ export default class Fetch extends React.PureComponent {
                     width: 60,
                   }, {
                     label: "Name",
-                    width: 180,
+                    width: 240,
                     render: renderName,
                   },
                   {
diff --git a/frontend/app/components/Session_/Network/Network.js b/frontend/app/components/Session_/Network/Network.js
index 2834cc501..26396e5bd 100644
--- a/frontend/app/components/Session_/Network/Network.js
+++ b/frontend/app/components/Session_/Network/Network.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import cn from 'classnames';
 import { connectPlayer, jump, pause } from 'Player';
-import { Popup } from 'UI';
+import { Popup, Button, TextEllipsis } from 'UI';
 import { getRE } from 'App/utils';
 import { TYPES } from 'Types/session/resource';
 import stl from './network.module.css';
@@ -18,138 +18,142 @@ const MEDIA = 'media';
 const OTHER = 'other';
 
 const TAB_TO_TYPE_MAP = {
-  [ XHR ]: TYPES.XHR,
-  [ JS ]: TYPES.JS,
-  [ CSS ]: TYPES.CSS,
-  [ IMG ]: TYPES.IMG,
-  [ MEDIA ]: TYPES.MEDIA,
-  [ OTHER ]: TYPES.OTHER
-}
+    [XHR]: TYPES.XHR,
+    [JS]: TYPES.JS,
+    [CSS]: TYPES.CSS,
+    [IMG]: TYPES.IMG,
+    [MEDIA]: TYPES.MEDIA,
+    [OTHER]: TYPES.OTHER,
+};
 
-export function renderName(r) { 
-  return (
-    <div className="flex w-full relative items-center">
-      <Popup content={ <div className={ stl.popupNameContent }>{ r.url }</div> } >
-        <div className={ stl.popupNameTrigger }>{ r.name }</div>
-      </Popup>
-      <div
-        className="absolute right-0 text-xs uppercase p-2 color-gray-500 hover:color-black"
-        onClick={ (e) => {
-          e.stopPropagation();
-          jump(r.time)
-        }}
-      >Jump</div>
-    </div>
-  );
+export function renderName(r) {
+    return (
+        <div className="flex justify-between items-center grow-0 w-full">
+            <Popup style={{ maxWidth: '75%' }} content={<div className={stl.popupNameContent}>{r.url}</div>}>
+                <TextEllipsis>{r.name}</TextEllipsis>
+            </Popup>
+            <Button
+                variant="text"
+                className="right-0 text-xs uppercase p-2 color-gray-500 hover:color-teal"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    jump(r.time);
+                }}
+            >
+                Jump
+            </Button>
+        </div>
+    );
 }
 
 export function renderDuration(r) {
-  if (!r.success) return 'x';
+    if (!r.success) return 'x';
 
-  const text = `${ Math.round(r.duration) }ms`;
-  if (!r.isRed() && !r.isYellow()) return text;
+    const text = `${Math.round(r.duration)}ms`;
+    if (!r.isRed() && !r.isYellow()) return text;
 
-  let tooltipText;
-  let className = "w-full h-full flex items-center ";
-  if (r.isYellow()) {
-    tooltipText = "Slower than average";
-    className += "warn color-orange";
-  } else {
-    tooltipText = "Much slower than average";
-    className += "error color-red";
-  }
-
-  return (
-    <Popup content={ tooltipText } >
-      <div className={ cn(className, stl.duration) } > { text } </div>
-    </Popup>
-  );
-}
-
-@connectPlayer(state => ({
-  location: state.location,
-  resources: state.resourceList,
-  domContentLoadedTime: state.domContentLoadedTime,
-  loadTime: state.loadTime,
-  // time: state.time,
-  playing: state.playing,
-  domBuildingTime: state.domBuildingTime,
-  fetchPresented: state.fetchList.length > 0,
-}))
-@connect(state => ({
-  timelinePointer: state.getIn(['sessions', 'timelinePointer']),
-}), { setTimelinePointer })
-export default class Network extends React.PureComponent {
-  state = {
-    filter: '',
-    filteredList: this.props.resources,
-    activeTab: ALL,
-    currentIndex: 0
-  }
-
-  onRowClick = (e, index) => {
-    pause();
-    jump(e.time);
-    this.setState({ currentIndex: index })
-    this.props.setTimelinePointer(null);
-  }
-
-  onTabClick = activeTab => this.setState({ activeTab })
-
-  onFilterChange = (e, { value }) => {
-    const { resources } = this.props;
-    const filterRE = getRE(value, 'i');
-    const filtered = resources.filter(({ type, name }) =>
-      filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[ activeTab ]));
-
-    this.setState({ filter: value, filteredList: value ? filtered : resources, currentIndex: 0 });
-  }
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    const { filteredList } = prevState;
-    if (nextProps.timelinePointer) {
-      const activeItem = filteredList.find((r) => r.time >= nextProps.timelinePointer.time);
-      return {
-        currentIndex: activeItem ? filteredList.indexOf(activeItem) : filteredList.length - 1,
-      };
-    }    
-  }
-
-  render() {
-    const {
-      location,
-      resources,
-      domContentLoadedTime,
-      loadTime,
-      domBuildingTime,
-      fetchPresented,
-      // time,
-      playing
-    } = this.props;
-    const { filter, activeTab, currentIndex, filteredList } = this.state;
-    // const filterRE = getRE(filter, 'i');
-    // let filtered = resources.filter(({ type, name }) =>
-    //   filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[ activeTab ]));
-    const resourcesSize = filteredList.reduce((sum, { decodedBodySize }) => sum + (decodedBodySize || 0), 0);
-    const transferredSize = filteredList
-      .reduce((sum, { headerSize, encodedBodySize }) => sum + (headerSize || 0) + (encodedBodySize || 0), 0);
+    let tooltipText;
+    let className = 'w-full h-full flex items-center ';
+    if (r.isYellow()) {
+        tooltipText = 'Slower than average';
+        className += 'warn color-orange';
+    } else {
+        tooltipText = 'Much slower than average';
+        className += 'error color-red';
+    }
 
     return (
-      <React.Fragment>
-        <NetworkContent
-          // time = { time }
-          location = { location }
-          resources = { filteredList }
-          domContentLoadedTime = { domContentLoadedTime }
-          loadTime = { loadTime }
-          domBuildingTime = { domBuildingTime }
-          fetchPresented = { fetchPresented }
-          resourcesSize={resourcesSize}
-          transferredSize={transferredSize}
-          onRowClick={ this.onRowClick }
-          currentIndex={currentIndex}
-        />
-      </React.Fragment>
+        <Popup content={tooltipText}>
+            <div className={cn(className, stl.duration)}> {text} </div>
+        </Popup>
     );
-  }
+}
+
+@connectPlayer((state) => ({
+    location: state.location,
+    resources: state.resourceList,
+    domContentLoadedTime: state.domContentLoadedTime,
+    loadTime: state.loadTime,
+    // time: state.time,
+    playing: state.playing,
+    domBuildingTime: state.domBuildingTime,
+    fetchPresented: state.fetchList.length > 0,
+}))
+@connect(
+    (state) => ({
+        timelinePointer: state.getIn(['sessions', 'timelinePointer']),
+    }),
+    { setTimelinePointer }
+)
+export default class Network extends React.PureComponent {
+    state = {
+        filter: '',
+        filteredList: this.props.resources,
+        activeTab: ALL,
+        currentIndex: 0,
+    };
+
+    onRowClick = (e, index) => {
+        pause();
+        jump(e.time);
+        this.setState({ currentIndex: index });
+        this.props.setTimelinePointer(null);
+    };
+
+    onTabClick = (activeTab) => this.setState({ activeTab });
+
+    onFilterChange = (e, { value }) => {
+        const { resources } = this.props;
+        const filterRE = getRE(value, 'i');
+        const filtered = resources.filter(({ type, name }) => filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[activeTab]));
+
+        this.setState({ filter: value, filteredList: value ? filtered : resources, currentIndex: 0 });
+    };
+
+    static getDerivedStateFromProps(nextProps, prevState) {
+        const { filteredList } = prevState;
+        if (nextProps.timelinePointer) {
+            const activeItem = filteredList.find((r) => r.time >= nextProps.timelinePointer.time);
+            return {
+                currentIndex: activeItem ? filteredList.indexOf(activeItem) : filteredList.length - 1,
+            };
+        }
+    }
+
+    render() {
+        const {
+            location,
+            resources,
+            domContentLoadedTime,
+            loadTime,
+            domBuildingTime,
+            fetchPresented,
+            // time,
+            playing,
+        } = this.props;
+        const { filter, activeTab, currentIndex, filteredList } = this.state;
+        // const filterRE = getRE(filter, 'i');
+        // let filtered = resources.filter(({ type, name }) =>
+        //   filterRE.test(name) && (activeTab === ALL || type === TAB_TO_TYPE_MAP[ activeTab ]));
+        const resourcesSize = filteredList.reduce((sum, { decodedBodySize }) => sum + (decodedBodySize || 0), 0);
+        const transferredSize = filteredList.reduce((sum, { headerSize, encodedBodySize }) => sum + (headerSize || 0) + (encodedBodySize || 0), 0);
+
+        return (
+            <React.Fragment>
+                <NetworkContent
+                    // time = { time }
+                    location={location}
+                    resources={filteredList}
+                    domContentLoadedTime={domContentLoadedTime}
+                    loadTime={loadTime}
+                    domBuildingTime={domBuildingTime}
+                    fetchPresented={fetchPresented}
+                    resourcesSize={resourcesSize}
+                    transferredSize={transferredSize}
+                    onRowClick={this.onRowClick}
+                    currentIndex={currentIndex}
+                />
+            </React.Fragment>
+        );
+    }
 }
diff --git a/frontend/app/components/ui/Button/Button.tsx b/frontend/app/components/ui/Button/Button.tsx
index d324d4f4a..043491ed2 100644
--- a/frontend/app/components/ui/Button/Button.tsx
+++ b/frontend/app/components/ui/Button/Button.tsx
@@ -16,7 +16,7 @@ export default (props: Props) => {
     const {
         icon = '',
         className = '',
-        variant = 'default',
+        variant = 'default', // 'default|primary|text|text-primary|text-red|outline',
         type = 'button',
         size = '',
         disabled = false,
diff --git a/frontend/app/components/ui/Popup/Popup.tsx b/frontend/app/components/ui/Popup/Popup.tsx
index 129b9a8a4..d44976b28 100644
--- a/frontend/app/components/ui/Popup/Popup.tsx
+++ b/frontend/app/components/ui/Popup/Popup.tsx
@@ -11,6 +11,7 @@ interface Props {
   disabled?: boolean
   arrow?: boolean
   open?: boolean
+  style?: any
   [x:string]: any;
 }
 export default ({
@@ -22,6 +23,7 @@ export default ({
   disabled = false,
   arrow = true,
   theme = 'dark',
+  style = {},
   ...props
 }: Props) => (
   <Tooltip
@@ -35,6 +37,7 @@ export default ({
     hideOnClick={true}
     hideOnScroll={true}
     theme={theme}
+    style={style}
   >
     { props.children }
   </Tooltip>