diff --git a/components/FolderTree.js b/components/FolderTree.js
index 6feff25..205a0a0 100644
--- a/components/FolderTree.js
+++ b/components/FolderTree.js
@@ -2,10 +2,10 @@ import * as React from 'react';
 import { TreeView, TreeItem } from '@mui/x-tree-view';
 import { useRouter } from 'next/router'
 import { styled } from '@mui/material/styles';
-import { Divider } from '@mui/material';
 
 const TCTreeItem = styled(TreeItem)(({ theme }) => ({
   '& .MuiTreeItem-content': {
+    borderRadius: '10px',
     '& .MuiTreeItem-label': {
       fontSize: '1rem',
       paddingLeft: '6px',
@@ -30,8 +30,8 @@ export default function FolderTree(props) {
   const expandedNodes = [props.tree.id]
   return (
     <>
-      <a href='http://localhost:3000'>{"<-"} Back To Portfolio</a>
-      <Divider />
+      <a href="http://localhost:3000" class="mb-5 flex-none rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500">{"<-"} Back To Portfolio</a>
+
       <TreeView
         aria-label="rich object"
         defaultCollapseIcon={<ChevronDownIcon />}
@@ -45,7 +45,7 @@ export default function FolderTree(props) {
             router.push(currentNode.routePath)
           }
         }}
-        sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
+        sx={{ flexGrow: 1, overflowY: 'auto' }}
       >
         {renderTree(props.tree)}
       </TreeView>