diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e1da2d3..1ef34cf 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
+        "@mui/icons-material": "^5.15.16",
         "@mui/material": "^5.15.15",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
@@ -23,6 +24,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.22.3",
         "react-scripts": "5.0.1",
+        "tailwindcss": "^3.4.3",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
       }
@@ -3472,6 +3474,31 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.15.16",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.16.tgz",
+      "integrity": "sha512-s8vYbyACzTNZRKv+20fCfVXJwJqNcVotns2EKnu1wmAga6wv2LAo5kB1d5yqQqZlMFtp34EJvRXf7cy8X0tJVA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.15.15",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7b387ec..741a97b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.16",
     "@mui/material": "^5.15.15",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -18,6 +19,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
+    "tailwindcss": "^3.4.3",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 6469775..4a9bb97 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,7 +1,5 @@
 * {
   text-align: center;
-  background-color: #382648;
-  color: white;
 }
 
 .App-header {
@@ -17,4 +15,4 @@
 
 .App-link {
   color: #61dafb;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4bc6f22..e4af7ea 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,30 +2,24 @@ import './App.css';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import {
   AboutComponent,
-  ChatComponent,
-  CoinectionsComponent,
-  HomeComponent,
   LoginComponent,
+  MainComponent,
   ProfileComponent,
   SettingsComponent,
-  YourCoinsComponent
 } from './components';
 
 function App() {
-  return (<div className="App">
+  return (<>
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<HomeComponent />} />
+        <Route path="/" element={<MainComponent />} />
         <Route path="profile" element={<ProfileComponent />} />
         <Route path="settings" element={<SettingsComponent />} />
-        <Route path="yourcoins" element={<YourCoinsComponent />} />
         <Route path="login" element={<LoginComponent />} />
-        <Route path="coinections" element={<CoinectionsComponent />} />
-        <Route path="chat" element={<ChatComponent />} />
         <Route path="about" element={<AboutComponent />} />
       </Routes>
     </BrowserRouter>
-  </div>
+    </>
   );
 }
 
diff --git a/frontend/src/assets/logo-circular.png b/frontend/src/assets/logo-circular.png
new file mode 100644
index 0000000..8ae5283
Binary files /dev/null and b/frontend/src/assets/logo-circular.png differ
diff --git a/frontend/src/assets/logo-vertical-menu.png b/frontend/src/assets/logo-vertical-menu.png
new file mode 100644
index 0000000..63d5f30
Binary files /dev/null and b/frontend/src/assets/logo-vertical-menu.png differ
diff --git a/frontend/src/components/chat_component/index.ts b/frontend/src/components/chat_component/index.ts
deleted file mode 100644
index badbf42..0000000
--- a/frontend/src/components/chat_component/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ChatComponent } from "./ChatComponent";
-
-export { ChatComponent }
\ No newline at end of file
diff --git a/frontend/src/components/coinections_component/index.ts b/frontend/src/components/coinections_component/index.ts
deleted file mode 100644
index d449952..0000000
--- a/frontend/src/components/coinections_component/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { CoinectionsComponent } from "./CoinectionsComponent";
-
-export { CoinectionsComponent }
\ No newline at end of file
diff --git a/frontend/src/components/home_component/index.ts b/frontend/src/components/home_component/index.ts
deleted file mode 100644
index 73e0bf9..0000000
--- a/frontend/src/components/home_component/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { HomeComponent } from "./HomeComponent";
-
-export { HomeComponent }
\ No newline at end of file
diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts
index f724ed4..3a01b06 100644
--- a/frontend/src/components/index.ts
+++ b/frontend/src/components/index.ts
@@ -1,20 +1,14 @@
 import { AboutComponent } from "./about_component";
-import { ChatComponent } from "./chat_component";
-import { CoinectionsComponent } from "./coinections_component";
-import { HomeComponent } from "./home_component";
 import { LoginComponent } from "./login_component";
+import { MainComponent } from "./main_component";
 import { ProfileComponent } from "./profile_component";
 import { SettingsComponent } from "./settings_component";
-import { YourCoinsComponent } from "./your_coins_component";
 
 
 export {
-    AboutComponent,
-    ChatComponent,
-    CoinectionsComponent,
-    HomeComponent,    
+    AboutComponent,  
     LoginComponent,
+    MainComponent,
     ProfileComponent,
-    SettingsComponent,
-    YourCoinsComponent
+    SettingsComponent
 }
\ No newline at end of file
diff --git a/frontend/src/components/main_component/MainComponent.tsx b/frontend/src/components/main_component/MainComponent.tsx
new file mode 100644
index 0000000..ac2b644
--- /dev/null
+++ b/frontend/src/components/main_component/MainComponent.tsx
@@ -0,0 +1,132 @@
+import React, { ReactElement } from "react";
+import logo from '../../assets/logo-vertical-menu.png';
+import {
+    AppBar,
+    Button,
+    Container,
+    Drawer,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemIcon,
+    Toolbar,
+    Typography
+} from "@mui/material";
+import LogoutIcon from '@mui/icons-material/Logout';
+import MenuIcon from '@mui/icons-material/Menu';
+import HomeOutlinedIcon from '@mui/icons-material/HomeOutlined';
+import CurrencyExchangeOutlinedIcon from '@mui/icons-material/CurrencyExchangeOutlined';
+import ChatBubbleOutlineOutlinedIcon from '@mui/icons-material/ChatBubbleOutlineOutlined';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { ChatComponent, CoinectionsComponent, HomeComponent, SettingsComponent } from "./components";
+// fazer um comportamento que troque o conteúdo priincipal (Home) pelos demais:
+// Coinections, Chat, Settings e o método de (Logout)
+
+const MainComponent = (): ReactElement => {
+    const [open, setOpen] = React.useState(false);
+
+    const toggleDrawer = (newOpen: boolean) => () => {
+        setOpen(newOpen);
+    };
+
+    const setComponent = (home: boolean, coinections: boolean, chat: boolean, settings: boolean) => {
+        if (home === false && coinections === false && chat === false && settings === false) {
+            return (<HomeComponent />)
+        }
+        else if (home === true) {
+            return (<HomeComponent />)
+        }
+        else if (coinections === true) {
+            return (<CoinectionsComponent />)
+        }
+        else if (chat === true) {
+            return (<ChatComponent />)
+        }
+        else if (settings === true) {
+            return (<SettingsComponent />)
+        }
+    }
+
+    const goToHome = (home: boolean, coinections: boolean, chat: boolean, settings: boolean) => {
+        return (
+            home = true,
+            coinections = false,
+            chat = false,
+            settings = false
+        )
+    }
+    const goToCoinections = (home: boolean, coinections: boolean, chat: boolean, settings: boolean) => {
+        return (
+            home = false,
+            coinections = true,
+            chat = false,
+            settings = false
+        )
+    }
+    const goToChat = (home: boolean, coinections: boolean, chat: boolean, settings: boolean) => {
+        return (
+            home = false,
+            coinections = false,
+            chat = true,
+            settings = false
+        )
+    }
+    const goToSettings = (home: boolean, coinections: boolean, chat: boolean, settings: boolean) => {
+        return (
+            home = false,
+            coinections = false,
+            chat = false,
+            settings = true
+        )
+    }
+
+    let home: boolean
+    let coinections: boolean
+    let chat: boolean
+    let settings: boolean
+
+    return (<>
+        <AppBar position="relative" style={{ backgroundColor: '#382648' }}>
+            <Toolbar>
+                <Typography variant="h3">
+                    <Button aria-label="delete" color='inherit' size='large' onClick={toggleDrawer(true)}><MenuIcon /></Button>
+                </Typography>
+            </Toolbar>
+        </AppBar>
+        <Drawer
+            open={open}
+            onClose={toggleDrawer(false)}
+            anchor="left"
+            disableScrollLock
+        >
+            <List style={{ width: '100%', height: '100%', backgroundColor: '#382648' }}>
+                <ListItem style={{ marginTop: '15%' }}>
+                    <img src={logo} alt="Cryptonomics Inc. logo" width="90%" />
+                </ListItem>
+                <ListItem style={{ marginTop: '15%' }}>
+                    <ListItemButton onClick={() => goToHome(home, coinections, chat, settings)}><HomeOutlinedIcon /></ListItemButton>
+                </ListItem>
+                <ListItem style={{ marginTop: '15%' }}>
+                    <ListItemButton onClick={() => goToCoinections(home, coinections, chat, settings)}><CurrencyExchangeOutlinedIcon /></ListItemButton>
+                </ListItem>
+                <ListItem style={{ marginTop: '15%' }}>
+                    <ListItemButton onClick={() => goToChat(home, coinections, chat, settings)}><ChatBubbleOutlineOutlinedIcon /></ListItemButton>
+                </ListItem>
+                <ListItem style={{ marginTop: '15%' }}>
+                    <ListItemButton onClick={() => goToSettings(home, coinections, chat, settings)}><SettingsIcon /></ListItemButton>
+                </ListItem>
+                <ListItem alignItems="center" style={{ marginTop: '100%', verticalAlign: 'bottom', width: '100%' }}>
+                    <ListItemIcon>
+                        <LogoutIcon style={{ cursor: 'pointer' }} onClick={() => (window.location.reload())} />
+                    </ListItemIcon>
+                </ListItem>
+            </List>
+        </Drawer>
+        <Container style={{backgroundColor: '#382648', height: '100vh'}} maxWidth="xl" >
+            Renderizar o componente aqui
+        </Container>
+    </>
+    )
+}
+
+export { MainComponent }
\ No newline at end of file
diff --git a/frontend/src/components/chat_component/ChatComponent.tsx b/frontend/src/components/main_component/components/ChatComponent/ChatComponent.tsx
similarity index 99%
rename from frontend/src/components/chat_component/ChatComponent.tsx
rename to frontend/src/components/main_component/components/ChatComponent/ChatComponent.tsx
index c61af2c..5131334 100644
--- a/frontend/src/components/chat_component/ChatComponent.tsx
+++ b/frontend/src/components/main_component/components/ChatComponent/ChatComponent.tsx
@@ -1,6 +1,5 @@
 import { ReactElement } from "react";
 
-
 const ChatComponent = (): ReactElement => {
     return (<>
         Chat
diff --git a/frontend/src/components/main_component/components/ChatComponent/index.ts b/frontend/src/components/main_component/components/ChatComponent/index.ts
new file mode 100644
index 0000000..e9bd70b
--- /dev/null
+++ b/frontend/src/components/main_component/components/ChatComponent/index.ts
@@ -0,0 +1,3 @@
+import { ChatComponent } from './ChatComponent'
+
+export { ChatComponent }
\ No newline at end of file
diff --git a/frontend/src/components/coinections_component/CoinectionsComponent.tsx b/frontend/src/components/main_component/components/CoinectionsComponent/CoinectionsComponent.tsx
similarity index 99%
rename from frontend/src/components/coinections_component/CoinectionsComponent.tsx
rename to frontend/src/components/main_component/components/CoinectionsComponent/CoinectionsComponent.tsx
index 145a640..f386b54 100644
--- a/frontend/src/components/coinections_component/CoinectionsComponent.tsx
+++ b/frontend/src/components/main_component/components/CoinectionsComponent/CoinectionsComponent.tsx
@@ -1,6 +1,5 @@
 import { ReactElement } from "react";
 
-
 const CoinectionsComponent = (): ReactElement => {
     return (<>
         Coinections
diff --git a/frontend/src/components/main_component/components/CoinectionsComponent/index.ts b/frontend/src/components/main_component/components/CoinectionsComponent/index.ts
new file mode 100644
index 0000000..1e8adae
--- /dev/null
+++ b/frontend/src/components/main_component/components/CoinectionsComponent/index.ts
@@ -0,0 +1,3 @@
+import { CoinectionsComponent } from './CoinectionsComponent'
+
+export { CoinectionsComponent }
\ No newline at end of file
diff --git a/frontend/src/components/main_component/components/FooterComponent/FooterComponent.tsx b/frontend/src/components/main_component/components/FooterComponent/FooterComponent.tsx
new file mode 100644
index 0000000..8dd398b
--- /dev/null
+++ b/frontend/src/components/main_component/components/FooterComponent/FooterComponent.tsx
@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+import { Box } from "@mui/material";
+import { Typography } from '@mui/material'
+
+const FooterComponent = (): ReactElement => {
+    return (<>
+        <Box sx={{ bgcolor: 'background.paper', p: 2 }}>
+            <Typography variant="body1" align="center">
+                Meu Footer
+            </Typography>
+        </Box>
+
+    </>
+    )
+}
+
+export { FooterComponent }
\ No newline at end of file
diff --git a/frontend/src/components/main_component/components/FooterComponent/index.ts b/frontend/src/components/main_component/components/FooterComponent/index.ts
new file mode 100644
index 0000000..09cf990
--- /dev/null
+++ b/frontend/src/components/main_component/components/FooterComponent/index.ts
@@ -0,0 +1,3 @@
+import { FooterComponent } from "./FooterComponent";
+
+export { FooterComponent}
\ No newline at end of file
diff --git a/frontend/src/components/home_component/HomeComponent.tsx b/frontend/src/components/main_component/components/HomeComponent/HomeComponent.tsx
similarity index 99%
rename from frontend/src/components/home_component/HomeComponent.tsx
rename to frontend/src/components/main_component/components/HomeComponent/HomeComponent.tsx
index b7db944..68c59b2 100644
--- a/frontend/src/components/home_component/HomeComponent.tsx
+++ b/frontend/src/components/main_component/components/HomeComponent/HomeComponent.tsx
@@ -1,6 +1,5 @@
 import { ReactElement } from "react";
 
-
 const HomeComponent = (): ReactElement => {
     return (<>
         Home
diff --git a/frontend/src/components/main_component/components/HomeComponent/index.ts b/frontend/src/components/main_component/components/HomeComponent/index.ts
new file mode 100644
index 0000000..dd32739
--- /dev/null
+++ b/frontend/src/components/main_component/components/HomeComponent/index.ts
@@ -0,0 +1,3 @@
+import { HomeComponent } from './HomeComponent'
+
+export { HomeComponent }
\ No newline at end of file
diff --git a/frontend/src/components/your_coins_component/YourCoinsComponent.tsx b/frontend/src/components/main_component/components/SettingsComponent/SettingsComponent.tsx
similarity index 52%
rename from frontend/src/components/your_coins_component/YourCoinsComponent.tsx
rename to frontend/src/components/main_component/components/SettingsComponent/SettingsComponent.tsx
index daa3c76..0222cd3 100644
--- a/frontend/src/components/your_coins_component/YourCoinsComponent.tsx
+++ b/frontend/src/components/main_component/components/SettingsComponent/SettingsComponent.tsx
@@ -1,11 +1,10 @@
 import { ReactElement } from "react";
 
-
-const YourCoinsComponent = (): ReactElement => {
+const SettingsComponent = (): ReactElement => {
     return (<>
         Settings
     </>
     )
 }
 
-export { YourCoinsComponent }
\ No newline at end of file
+export { SettingsComponent }
\ No newline at end of file
diff --git a/frontend/src/components/main_component/components/SettingsComponent/index.ts b/frontend/src/components/main_component/components/SettingsComponent/index.ts
new file mode 100644
index 0000000..0448e8d
--- /dev/null
+++ b/frontend/src/components/main_component/components/SettingsComponent/index.ts
@@ -0,0 +1,3 @@
+import { SettingsComponent } from './SettingsComponent'
+
+export { SettingsComponent }
\ No newline at end of file
diff --git a/frontend/src/components/main_component/components/index.ts b/frontend/src/components/main_component/components/index.ts
new file mode 100644
index 0000000..b18d0ba
--- /dev/null
+++ b/frontend/src/components/main_component/components/index.ts
@@ -0,0 +1,13 @@
+import { ChatComponent } from './ChatComponent'
+import { CoinectionsComponent } from './CoinectionsComponent'
+import { FooterComponent } from './FooterComponent'
+import { HomeComponent } from './HomeComponent'
+import { SettingsComponent } from './SettingsComponent'
+
+export {
+    ChatComponent,
+    CoinectionsComponent,
+    FooterComponent,
+    HomeComponent,
+    SettingsComponent
+}
\ No newline at end of file
diff --git a/frontend/src/components/main_component/index.ts b/frontend/src/components/main_component/index.ts
new file mode 100644
index 0000000..5080307
--- /dev/null
+++ b/frontend/src/components/main_component/index.ts
@@ -0,0 +1,3 @@
+import { MainComponent } from "./MainComponent"
+
+export { MainComponent }
\ No newline at end of file
diff --git a/frontend/src/components/your_coins_component/index.ts b/frontend/src/components/your_coins_component/index.ts
deleted file mode 100644
index 0db75b2..0000000
--- a/frontend/src/components/your_coins_component/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { YourCoinsComponent } from "./YourCoinsComponent";
-
-export { YourCoinsComponent }
\ No newline at end of file
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ec2585e..17df0e7 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',