diff --git a/src/commons/Colors.js b/src/commons/Colors.js
index 06ddd01..80a25e2 100644
--- a/src/commons/Colors.js
+++ b/src/commons/Colors.js
@@ -3,10 +3,13 @@ const Colors = {
   BASE_DARK2: '#191F28',
   BASE_DARK3: '#727272',
   BASE_DARK4: '#BFBFBF',
+  BASE_DARK5: '#545454',
+  BASE_DARK6: '#3E3E3E',
 
   HIGHLIGHT1: '#4A72D9',
   HIGHLIGHT2: '#474747',
   HIGHLIGHT3: '#35446A',
+  HIGHLIGHT4: '#BEBEBE',
 
   FONT1: '#C5C5C5',
 
diff --git a/src/components/AddTorrentModal/AddTorrentModal.component.js b/src/components/AddTorrentModal/AddTorrentModal.component.js
new file mode 100644
index 0000000..a8eaeb4
--- /dev/null
+++ b/src/components/AddTorrentModal/AddTorrentModal.component.js
@@ -0,0 +1,41 @@
+import PropTypes from "prop-types";
+import React from 'react';
+
+import { downloadTorrent } from '../../api/torrents';
+import { Dialog, Form} from './AddTorrentModal.styles';
+
+const AddTorrentModal = ({ setIsDialogOpen }) => {
+    const sendForm = (e) => {
+        e.preventDefault();
+        const torrentId = e.target[0].value;
+        downloadTorrent(torrentId);
+        setIsDialogOpen(false)
+    }
+
+    return(
+        <Dialog>
+            <Form onSubmit={sendForm}>
+                <input 
+                    type="text"
+                    id="torrent"
+                    placeholder="Enter torrent ID"
+                    autoComplete="off"
+                />
+                <input type="submit" value="Download" />
+            </Form>
+            <button
+                style={{ color: 'white', cursor: 'pointer' }}
+                type="button"
+                onClick={() => setIsDialogOpen(false)}
+            >
+                Cancel
+            </button>
+        </Dialog>
+    )
+}
+
+AddTorrentModal.propTypes = {
+  setIsDialogOpen: PropTypes.func.isRequired
+}
+
+export default AddTorrentModal;
\ No newline at end of file
diff --git a/src/containers/TopBar/TopBar.styles.js b/src/components/AddTorrentModal/AddTorrentModal.styles.js
similarity index 52%
rename from src/containers/TopBar/TopBar.styles.js
rename to src/components/AddTorrentModal/AddTorrentModal.styles.js
index 40f8a4b..6b80e17 100644
--- a/src/containers/TopBar/TopBar.styles.js
+++ b/src/components/AddTorrentModal/AddTorrentModal.styles.js
@@ -2,46 +2,6 @@ import styled from 'styled-components';
 
 import Colors from '../../commons/Colors';
 
-export const TopBarContainer = styled.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 4.3rem;
-  background-color: ${Colors.BASE_DARK2};
-`;
-
-export const TopBarContent = styled.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  justify-content: space-between;
-  padding: 0 1.125rem;
-`;
-
-export const ActionButtonsContainer = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export const ActionButton = styled.button`
-  display: flex;
-  align-items: center;
-  outline: 0;
-  background-color: transparent;
-  border: none;
-  border-radius: 3px;
-  color: ${Colors.NEUTRAL_WHITE};
-  font-weight: 600;
-  font-size: 15px;
-  padding: 0.55rem 1rem;
-  cursor: pointer;
-  transition: 0.3s;
-  margin-right: 1.2rem;
-  &:hover {
-    background-color: ${Colors.HIGHLIGHT2};;
-  }
-`;
-
 export const Dialog = styled.div`
   display: flex;
   flex-direction: column;
@@ -82,3 +42,11 @@ export const Form = styled.form`
     }
   }
 `;
+
+export const Input = styled.input`
+
+`;
+
+export const Button = styled.button`
+
+`;
\ No newline at end of file
diff --git a/src/components/speed-chart/SpeedChart.js b/src/components/SpeedChart/SpeedChart.js
similarity index 100%
rename from src/components/speed-chart/SpeedChart.js
rename to src/components/SpeedChart/SpeedChart.js
diff --git a/src/components/client-torrents-table/ClientTorrentsTable.js b/src/components/client-torrents-table/ClientTorrentsTable.js
deleted file mode 100644
index e33bbd7..0000000
--- a/src/components/client-torrents-table/ClientTorrentsTable.js
+++ /dev/null
@@ -1,188 +0,0 @@
-/* eslint-disable react/jsx-props-no-spreading */
-import React, {
-  useMemo,
-  useState,
-  useEffect,
-  forwardRef,
-  useRef,
-  useContext,
-} from 'react';
-import { ArrowDownward } from '@material-ui/icons';
-import { ThemeProvider, createMuiTheme, Paper } from '@material-ui/core';
-import { MTableBodyRow } from 'material-table';
-
-import Colors from '../../commons/Colors';
-
-import { TorrentsTable } from './ClientTorrentsTable.styles';
-import StormContext from '../../context/Storm.context';
-
-export const ClientTorrentsTable = () => {
-  const stormContext = useContext(StormContext);
-
-  const tableRef = useRef({});
-
-  const [hoveringOver, setHoveringOver] = useState(null);
-  const currentTorrentSearch = useMemo(
-    () => stormContext.data.torrentSearch,
-    [stormContext.data.torrentSearch]
-  );
-
-  useEffect(() => {
-    const currentRef = tableRef?.current;
-
-    currentRef?.dataManager.changeSearchText(currentTorrentSearch);
-    currentRef?.setState({
-      ...currentRef?.dataManager?.getRenderState(),
-      searchText: currentTorrentSearch,
-    });
-  }, [currentTorrentSearch]);
-
-  const theme = createMuiTheme({
-    overrides: {
-      MuiTableCell: {
-        root: {
-          borderBottom: 'none',
-        },
-        body: {
-          color: Colors.FONT1,
-        },
-      },
-    },
-  });
-
-  const handleRowHover = (propsData) => () => {
-    setHoveringOver(propsData.data.tableData.id);
-  };
-  const handleRowHoverLeave = () => setHoveringOver(null);
-
-  const tableData = [
-    {
-      name: 'Fight club(1999)',
-      progress: 20.4,
-      size: 1631,
-      seeds: 2345,
-      peers: 4954,
-      download_speed: 500,
-      upload_speed: 200,
-      eta: 20,
-      category: 'Movies',
-    },
-    {
-      name: 'The prestige(2006)',
-      progress: 60.8,
-      size: 2421,
-      seeds: 245,
-      peers: 954,
-      download_speed: 600,
-      upload_speed: 340,
-      eta: 10,
-      category: 'Movies',
-    },
-    {
-      name: 'Interstellar(2004)',
-      progress: 10.4,
-      size: 1891,
-      seeds: 7345,
-      peers: 2954,
-      download_speed: 800,
-      upload_speed: 430,
-      eta: 45,
-      category: 'Movies',
-    },
-    {
-      name: 'Breaking bad S03E04',
-      progress: 23,
-      size: 691,
-      seeds: 345,
-      peers: 154,
-      download_speed: 200,
-      upload_speed: 80,
-      eta: 20,
-      category: 'Tv Show',
-    },
-  ];
-
-  const tableColumns = [
-    { title: 'Name', field: 'name' },
-    { title: 'Progress', field: 'progress' },
-    { title: 'Size', field: 'size' },
-    { title: 'Seeds', field: 'seeds' },
-    { title: 'Peers', field: 'peers' },
-    { title: 'Download speed', field: 'download_speed' },
-    { title: 'Upload speed', field: 'upload_speed' },
-    { title: 'ETA', field: 'eta' },
-    { title: 'Category', field: 'category' },
-  ];
-
-  const tableOptions = useMemo(
-    () => ({
-      paging: false,
-      padding: 'dense',
-      tableLayout: 'auto',
-      addRowPosition: 'first',
-      toolbar: false,
-      header: true,
-      loadingType: 'linear',
-      headerStyle: {
-        fontSize: '14px',
-        fontWeight: 'bold',
-        color: Colors.NEUTRAL_WHITE,
-        backgroundColor: Colors.BASE_DARK1,
-        borderBottom: `1px solid ${Colors.FONT1}`,
-        height: '56px',
-      },
-      selection: false,
-      search: false,
-      draggable: false,
-      sorting: false,
-      thirdSortClick: false,
-      rowStyle: (rowData) => ({
-        color:
-          rowData.tableData.id === hoveringOver
-            ? Colors.NEUTRAL_WHITE
-            : Colors.FONT1,
-        backgroundColor:
-          rowData.tableData.id === hoveringOver
-            ? Colors.HOVER_DARK
-            : Colors.BASE_DARK1,
-        height: '48px',
-      }),
-    }),
-    [hoveringOver]
-  );
-
-  const tableComponents = useMemo(
-    () => ({
-      Row: (props) => (
-        <MTableBodyRow
-          {...props}
-          onMouseEnter={handleRowHover(props)}
-          onMouseLeave={handleRowHoverLeave}
-        />
-      ),
-      Container: (props) => <Paper {...props} elevation={0} />,
-    }),
-    []
-  );
-
-  const tableIcons = {
-    SortArrow: forwardRef((props, ref) => (
-      <ArrowDownward {...props} ref={ref} />
-    )),
-  };
-
-  return (
-    <ThemeProvider theme={theme}>
-      <TorrentsTable
-        data={tableData}
-        columns={tableColumns}
-        components={tableComponents}
-        options={tableOptions}
-        icons={tableIcons}
-        tableRef={tableRef}
-      />
-    </ThemeProvider>
-  );
-};
-
-export default ClientTorrentsTable;
diff --git a/src/components/client-torrents-table/ClientTorrentsTable.styles.js b/src/components/client-torrents-table/ClientTorrentsTable.styles.js
deleted file mode 100644
index f362b26..0000000
--- a/src/components/client-torrents-table/ClientTorrentsTable.styles.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-import MaterialTable from 'material-table';
-
-export const TorrentsTable = styled(MaterialTable)`
-  height: 100%;
-  width: 100%;
-`;
diff --git a/src/components/searchbox/SearchBox.styles.js b/src/components/searchbox/SearchBox.styles.js
index b38afe7..5cb056c 100644
--- a/src/components/searchbox/SearchBox.styles.js
+++ b/src/components/searchbox/SearchBox.styles.js
@@ -9,7 +9,7 @@ export const SearchBoxContainer = styled.div`
   align-items: center;
   height: 36px;
   width: 100%;
-  background-color: ${Colors.BASE_DARK4};
+  background-color: ${Colors.BASE_DARK6};
   padding: 0 0.6rem;
   border-radius: 4px;
 `;
@@ -22,7 +22,7 @@ export const SearchIcon = styled(Vectors.searchIcon)`
 `;
 
 export const ClearInputIcon = styled(Vectors.deleteIcon)`
-  stroke: ${Colors.BASE_DARK5};
+  stroke: ${Colors.HIGHLIGHT4};
   width: 32px;
   cursor: pointer;
 `;
diff --git a/src/containers/TopBar/TopBar.js b/src/containers/TopBar/TopBar.js
deleted file mode 100644
index c116606..0000000
--- a/src/containers/TopBar/TopBar.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/* eslint-disable react/jsx-fragments */
-import React, { useState, Fragment } from 'react';
-import { downloadTorrent } from '../../api/torrents';
-import {
-  TopBarContainer, TopBarContent, ActionButtonsContainer, ActionButton, Dialog, Form,
-} from './TopBar.styles';
-
-const TopBar = () => {
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const sendForm = (e) => {
-    e.preventDefault();
-    const torrentId = e.target[0].value;
-    downloadTorrent(torrentId);
-    setIsDialogOpen(false);
-  };
-  return (
-    <Fragment>
-      <TopBarContainer>
-        <TopBarContent>
-          <ActionButtonsContainer>
-            <ActionButton onClick={() => { setIsDialogOpen(true); }}>
-              + Add new torrent
-            </ActionButton>
-            <ActionButton>
-              Create torrent
-            </ActionButton>
-          </ActionButtonsContainer>
-        </TopBarContent>
-      </TopBarContainer>
-      {
-        isDialogOpen && (
-        <Dialog>
-          <Form onSubmit={sendForm}>
-            <input type="text" id="torrent" placeholder="Enter torrent ID" autoComplete="off" />
-            <input type="submit" value="Download" />
-          </Form>
-          <button
-            style={{ color: 'white', cursor: 'pointer' }}
-            type="button"
-            onClick={() => { setIsDialogOpen(false); }}
-          >
-            Cancel
-          </button>
-        </Dialog>
-        )
-      }
-    </Fragment>
-  );
-};
-
-export default TopBar;
diff --git a/src/containers/TopBar/index.js b/src/containers/TopBar/index.js
deleted file mode 100644
index 7f86c5f..0000000
--- a/src/containers/TopBar/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './TopBar';
diff --git a/src/containers/TorrentDetails/TorrentDetails.styles.js b/src/containers/TorrentDetails/TorrentDetails.styles.js
index e869746..62cdbc7 100644
--- a/src/containers/TorrentDetails/TorrentDetails.styles.js
+++ b/src/containers/TorrentDetails/TorrentDetails.styles.js
@@ -4,7 +4,7 @@ import Colors from '../../commons/Colors';
 
 import Vectors from '../../commons/Vectors';
 
-import { SpeedChart } from '../../components/speed-chart/SpeedChart';
+import { SpeedChart } from '../../components/SpeedChart/SpeedChart';
 
 export const TorrentDetailsContainer = styled.div`
   position: absolute;
@@ -56,8 +56,6 @@ export const ProgressText = styled.span`
   color: ${Colors.NEUTRAL_WHITE};
 `;
 
-
-
 export const TorrentSpeedChart = styled(SpeedChart)``;
 
 export const SpeedChartContainer = styled.div`
diff --git a/src/containers/TorrentDetails/index.js b/src/containers/TorrentDetails/index.js
new file mode 100644
index 0000000..81eada6
--- /dev/null
+++ b/src/containers/TorrentDetails/index.js
@@ -0,0 +1 @@
+export { default } from './TorrentDetails';
diff --git a/src/containers/index.js b/src/containers/index.js
index b3401eb..244b6c3 100644
--- a/src/containers/index.js
+++ b/src/containers/index.js
@@ -1,3 +1,4 @@
 export { default as Navbar } from './Navbar';
-export { default as Toolbar } from './toolbar/Toolbar.component';
+export { default as Toolbar } from './Toolbar';
 export { default as Table } from './Table';
+export { default as TorrentDetails } from './TorrentDetails';
diff --git a/src/containers/toolbar/Toolbar.component.js b/src/containers/toolbar/Toolbar.component.js
index da368d5..3ce5b45 100644
--- a/src/containers/toolbar/Toolbar.component.js
+++ b/src/containers/toolbar/Toolbar.component.js
@@ -1,6 +1,8 @@
-import React, { useContext, useMemo } from 'react';
+import React, {
+  useContext, useMemo, Fragment, useState,
+} from 'react';
 
-import { SearchBox } from '../../components/searchbox/SearchBox.component';
+import { SearchBox } from '../../components/SearchBox/SearchBox.component';
 
 import StormContext from '../../context/Storm.context';
 
@@ -19,15 +21,18 @@ import {
   TorrentActionsButton,
   TorrentActionsContainer,
 } from './Toolbar.styles';
+import AddTorrentModal from '../../components/AddTorrentModal/AddTorrentModal.component';
 
 export const Toolbar = () => {
   const stormContext = useContext(StormContext);
 
   const isTorrentSelected = useMemo(
     () => stormContext.data.isTorrentSelected,
-    [stormContext.data.isTorrentSelected]
+    [stormContext.data.isTorrentSelected],
   );
 
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
   return (
     <ToolbarContainer>
       {isTorrentSelected ? (
@@ -46,21 +51,27 @@ export const Toolbar = () => {
           <SettingsIcon />
         </MainContentContainer>
       ) : (
-        <MainContentContainer>
-          <ContentContainer>
-            <AddTorrentButtonContainer>
-              <AddTorrentIcon />
-              <ButtonLabel>Add new torrent</ButtonLabel>
-            </AddTorrentButtonContainer>
-            <CreateTorrentButton>
-              <ButtonLabel>Create torrent</ButtonLabel>
-            </CreateTorrentButton>
-          </ContentContainer>
-          <ContentContainer>
-            <SearchBox />
-            <SettingsIcon />
-          </ContentContainer>
-        </MainContentContainer>
+        <>
+          <MainContentContainer>
+            <ContentContainer>
+              <AddTorrentButtonContainer onClick={() => setIsDialogOpen(true)}>
+                <AddTorrentIcon />
+                <ButtonLabel>Add new torrent</ButtonLabel>
+              </AddTorrentButtonContainer>
+              <CreateTorrentButton>
+                <ButtonLabel>Create torrent</ButtonLabel>
+              </CreateTorrentButton>
+            </ContentContainer>
+            <ContentContainer>
+              <SearchBox />
+              <SettingsIcon />
+            </ContentContainer>
+          </MainContentContainer>
+          {
+            isDialogOpen
+              && <AddTorrentModal setIsDialogOpen={setIsDialogOpen} />
+          }
+        </>
       )}
     </ToolbarContainer>
   );
diff --git a/src/containers/toolbar/index.js b/src/containers/toolbar/index.js
new file mode 100644
index 0000000..74910b3
--- /dev/null
+++ b/src/containers/toolbar/index.js
@@ -0,0 +1 @@
+export { default } from './Toolbar.component';
diff --git a/src/containers/torrent-details/TorrentDetails.js b/src/containers/torrent-details/TorrentDetails.js
deleted file mode 100644
index cef345a..0000000
--- a/src/containers/torrent-details/TorrentDetails.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  TorrentDetailsContainer,
-  DownloadProgressContainer,
-  ProgressCircle,
-  ProgressText,
-  TorrentSpeedChart,
-  SpeedChartContainer,
-  DownloadDetailsContainer,
-  DetailContainer,
-  DetailContent,
-  DetailValue,
-} from './TorrentDetails.styles';
-
-export const TorrentDetails = () => {
-  const [downloadCircleProgress, setDownloadCircleProgress] = useState(630);
-  const [downloadNumberProgress, setDownloadNumberProgress] = useState(0);
-
-  const handleDownloadProgress = () => {
-    if (downloadNumberProgress < 100) {
-      setDownloadCircleProgress(downloadCircleProgress - 6.3);
-      setDownloadNumberProgress(downloadNumberProgress + 1);
-    }
-  };
-
-  return (
-    <TorrentDetailsContainer>
-      <SpeedChartContainer>
-        <TorrentSpeedChart />
-      </SpeedChartContainer>
-      <DownloadProgressContainer>
-        <ProgressCircle downloadProgress={downloadCircleProgress} />
-        <ProgressText>{`${downloadNumberProgress}%`}</ProgressText>
-      </DownloadProgressContainer>
-      <DownloadDetailsContainer>
-        <DetailContainer>
-          <DetailContent>Active</DetailContent>
-          <DetailValue>30min</DetailValue>
-        </DetailContainer>
-        <DetailContainer>
-          <DetailContent>ETA</DetailContent>
-          <DetailValue>30min</DetailValue>
-        </DetailContainer>
-        <DetailContainer>
-          <DetailContent>Seeds</DetailContent>
-          <DetailValue>2345</DetailValue>
-        </DetailContainer>
-        <DetailContainer>
-          <DetailContent>Peers</DetailContent>
-          <DetailValue>2345</DetailValue>
-        </DetailContainer>
-      </DownloadDetailsContainer>
-    </TorrentDetailsContainer>
-  );
-};
-
-export default TorrentDetails;
diff --git a/src/containers/torrent-details/TorrentDetails.styles.js b/src/containers/torrent-details/TorrentDetails.styles.js
deleted file mode 100644
index e869746..0000000
--- a/src/containers/torrent-details/TorrentDetails.styles.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import styled from 'styled-components';
-
-import Colors from '../../commons/Colors';
-
-import Vectors from '../../commons/Vectors';
-
-import { SpeedChart } from '../../components/speed-chart/SpeedChart';
-
-export const TorrentDetailsContainer = styled.div`
-  position: absolute;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  bottom: 0;
-  width: 100%;
-  height: 35vh;
-  background-color: ${Colors.BASE_DARK2};
-`;
-
-export const DownloadProgressContainer = styled.div`
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 210px;
-  height: 210px;
-`;
-
-export const ProgressCircle = styled(Vectors.progressCircle)`
-  position: relative;
-  transform: rotate(270deg);
-  width: 100%;
-  height: 100%;
-
-  & > circle {
-    width: 100%;
-    height: 100%;
-    fill: none;
-    stroke-width: 10;
-    stroke: ${Colors.HIGHLIGHT3};
-    transform: translate(5px, 5px);
-    stroke-linecap: round;
-  }
-
-  & > circle:nth-child(2) {
-    stroke: ${Colors.HIGHLIGHT1};
-    stroke-dasharray: 630px;
-    stroke-dashoffset: ${(props) => props.downloadProgress};
-  }
-`;
-
-export const ProgressText = styled.span`
-  position: absolute;
-  z-index: 999;
-  font-size: 36px;
-  color: ${Colors.NEUTRAL_WHITE};
-`;
-
-
-
-export const TorrentSpeedChart = styled(SpeedChart)``;
-
-export const SpeedChartContainer = styled.div`
-  height: 260px;
-  width: 50vw;
-`;
-
-export const DownloadDetailsContainer = styled.div`
-  width: 150px;
-  height: 80%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-`;
-
-export const DetailContainer = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-
-export const DetailContent = styled.span`
-  color: ${Colors.FONT_DARK1};
-  font-size: 18px;
-`;
-
-export const DetailValue = styled.span`
-  color: ${Colors.NEUTRAL_WHITE};
-  font-size: 18px;
-`;