diff --git a/components/dashboard/Sidebar/Sidebar.js b/components/dashboard/Sidebar/Sidebar.js
index fc1bf3c..d2b438a 100644
--- a/components/dashboard/Sidebar/Sidebar.js
+++ b/components/dashboard/Sidebar/Sidebar.js
@@ -1,7 +1,238 @@
+import { useState } from "react";
+import styled from "styled-components"
+import Image from 'next/image';
+import Head from 'next/head'
+import Link from 'next/link'
+
+
+
+
+const SidebarCont = styled.div`
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
+font-size: 1.25rem;
+font-family: Poppins;
+display:flex;
+justify-content:center;
+flex-direction:column;
+background: #F1F8FF;
+border-radius: 30px;
+
+`
+const Heading = styled.h1`
+color: #3C3C3C;
+font-weight: bold;
+display:flex;
+align-items:center;
+justify-content:flex-start;
+margin: 0 0 0 20%;
+
+`
+const FynCoin = styled.div`
+padding-right: 3.25% ;
+`
+
+
+const HeadingLabel = styled.span`
+ padding-top:0;
+
+ font-size: 1.5rem;
+
+`
+const HomeLogOutButton = styled.button`
+background: #4063FF;
+border-radius: 10px;
+border-style: none;
+color: #FFFFFF;
+cursor: pointer;
+margin: 7% 12%;
+padding: 2% 0;
+font-weight: 500;
+font-size: 1.25rem;
+
+
+`
+
+
+
+const ListItem = styled.div`
+display:flex;
+align-items:center;
+margin: 0 0 0 14%;
+`
+const SubLinkList = styled.ul`
+ padding-left:2.5%;
+
+`
+const SubLinkLabel = styled.span`
+line-height: 2.5rem;
+`
+const LinkLabel = styled.span`
+color: #899ABC;
+line-height: 4rem;
+cursor: pointer;
+
+`
+const styledLink = styled(Link)`
+
+`
+const LinkIcon = styled.img`
+width:11%;
+padding-right: 2.5%;
+`
+const SubLink = styled.li`
+ list-style: none;
+ display:flex;
+align-items:center;
+margin: 0 0 0 17%;
+`
+const SubLinkIcon = styled.img`
+ width: 10%;
+ padding-right: 2%;
+`
+
export default function Sidebar() {
- return (
-
- Sidebar
-
- )
+ var [dis, setdisplay] = useState("none");
+ var [rot, setrot] = useState("180deg")
+ var style1 = {
+ display: dis,
+ }
+ var style2 = {
+ width:"10%",
+ paddingLeft:"1.5%",
+ transform: `rotate(${rot})`,
+ }
+
+
+ function handleClick() {
+
+ if (dis === "none") {
+ setdisplay("block");
+ setrot("0deg");
+ }
+ else {
+ setdisplay("none");
+ setrot("180deg");
+ }
+ }
+
+
+ return (
+
+ Sidebar
+
+
+
+ <>
+
+ {/* */}
+
+
+
+
+
+ FynCoin
+
+
+
+
+
+
+
+ Dashboard
+
+
+
+
+
+
+ Crypto Coins
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ BitCoin
+
+
+
+
+
+
+
+
+
+
+ DogeCoin
+
+
+
+
+
+
+
+
+
+
+ FinCoin
+
+
+
+
+
+
+
+
+
+
+ Ethereum
+
+
+
+
+
+
+
+
+
+
+ Ethereum
+
+
+
+
+
+
+
+
+
+
+
+ Wallet
+
+
+
+
+ Profile
+
+
+
+ Settings
+
+ Log Out
+
+
+
+
+ )
}
diff --git a/public/images/sidebarImages/bitcoinIcon.png b/public/images/sidebarImages/bitcoinIcon.png
new file mode 100644
index 0000000..e85f929
Binary files /dev/null and b/public/images/sidebarImages/bitcoinIcon.png differ
diff --git a/public/images/sidebarImages/cryptoIcon.png b/public/images/sidebarImages/cryptoIcon.png
new file mode 100644
index 0000000..373c802
Binary files /dev/null and b/public/images/sidebarImages/cryptoIcon.png differ
diff --git a/public/images/sidebarImages/dogecoinIcon.png b/public/images/sidebarImages/dogecoinIcon.png
new file mode 100644
index 0000000..0a3cee3
Binary files /dev/null and b/public/images/sidebarImages/dogecoinIcon.png differ
diff --git a/public/images/sidebarImages/ethereumIcon.png b/public/images/sidebarImages/ethereumIcon.png
new file mode 100644
index 0000000..8fc4195
Binary files /dev/null and b/public/images/sidebarImages/ethereumIcon.png differ
diff --git a/public/images/sidebarImages/fincoinIcon.png b/public/images/sidebarImages/fincoinIcon.png
new file mode 100644
index 0000000..5f88720
Binary files /dev/null and b/public/images/sidebarImages/fincoinIcon.png differ
diff --git a/public/images/sidebarImages/fyncoinIcon.png b/public/images/sidebarImages/fyncoinIcon.png
new file mode 100644
index 0000000..6366a59
Binary files /dev/null and b/public/images/sidebarImages/fyncoinIcon.png differ
diff --git a/public/images/sidebarImages/homeIcon.png b/public/images/sidebarImages/homeIcon.png
new file mode 100644
index 0000000..1267062
Binary files /dev/null and b/public/images/sidebarImages/homeIcon.png differ
diff --git a/public/images/sidebarImages/methereumIcon.png b/public/images/sidebarImages/methereumIcon.png
new file mode 100644
index 0000000..ddac372
Binary files /dev/null and b/public/images/sidebarImages/methereumIcon.png differ
diff --git a/public/images/sidebarImages/triButton.png b/public/images/sidebarImages/triButton.png
new file mode 100644
index 0000000..7d1053c
Binary files /dev/null and b/public/images/sidebarImages/triButton.png differ
diff --git a/public/images/sidebarImages/walletIcon.png b/public/images/sidebarImages/walletIcon.png
new file mode 100644
index 0000000..35a91c8
Binary files /dev/null and b/public/images/sidebarImages/walletIcon.png differ