diff --git a/pagination.css b/pagination.css
new file mode 100644
index 0000000..456cf56
--- /dev/null
+++ b/pagination.css
@@ -0,0 +1,61 @@
+.paginationMain {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.paginationMainInside {
+  width: auto;
+  max-width: 500px;
+  height: 35px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  grid-gap: 10px;
+}
+
+.btnMain.paginationMainInsideBtn {
+  height: 100%;
+}
+
+.paginationMainInsideNumbers {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+  overflow-y: auto;
+}
+
+.paginationMainInsideNumbers::-webkit-scrollbar {
+  display: none;
+}
+
+.btnMain.paginationMainInsideNumbersBtn {
+  transition: ease 0.2s;
+  background: rgba(0,0,0,0);
+  color: #232323;
+}
+
+.btnMain.paginationMainInsideNumbersBtn:hover {
+  color: #ffffff;
+  background: rgb(68,117,146);
+}
+
+.btnMain.paginationMainInsideNumbersBtn:active {
+  background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), linear-gradient(#4c82a3, #4c82a3);
+}
+
+.btnMain.paginationMainInsideNumbersBtn.paginationMainInsideNumbersBtnActive {
+  color: white;
+  background: #4b81a2;
+}
+
+.paginationMainInsideSplitter {
+  height: 75%;
+  width: 2px;
+  background: rgba(0,0,0,0.1);
+}
+
diff --git a/popups.css b/popups.css
new file mode 100644
index 0000000..cfd4d4f
--- /dev/null
+++ b/popups.css
@@ -0,0 +1,93 @@
+.popupMain {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  background: rgba(0,0,0,0.5);
+  z-index: 20;
+  backdrop-filter: blur(10px);
+  align-items: center;
+  padding: 25px 10px;
+}
+
+.popupMainInside {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0px;
+  align-items: center;
+}
+
+.popupMainInsideWrapper {
+  width: 100%;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+}
+
+.popupMainInsideWrapperBox {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0px;
+  background: #ffffff;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow: 0 0 4px 0 rgb(0,0,0,0.1);
+}
+
+.popupMainInsideWrapperBoxTop {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  justify-content: space-between;
+  padding: 15px 25px;
+  border-bottom: solid 1px rgba(0,0,0,0.1);
+}
+
+.popupMainInsideWrapperBoxMid {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+  padding: 15px 25px;
+  flex-grow: 1;
+}
+
+.popupMainInsideWrapperBoxBottom {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+  padding: 15px;
+  border-top: solid 1px rgba(0,0,0,0.1);
+  color: rgba(0,0,0,0.5);
+  text-align: center;
+  font-weight: 400;
+  font-size: 16px;
+}
+
+.popupMainInsideWrapperBoxTopText {
+  font-size: 24px;
+  font-weight: bold;
+  flex-grow: 1;
+}
+
+.btnMain.popupMainInsideWrapperBoxTopBtn {
+  font-size: 18px;
+  background: rgba(76,130,163,0);
+  color: rgba(0,0,0,0.5);
+}
+
+.btnMain.tabsMainBottomPaneLoginBtn {
+  width: 100%;
+  max-width: 250px;
+  align-self: center;
+  background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), linear-gradient(#4c82a3, #4c82a3);
+}
+
+.btnMain.tabsMainBottomPaneLoginBtn:hover {
+  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), linear-gradient(#4c82a3, #4c82a3);
+}
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..4bf2676
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,322 @@
+.htmlMain {
+  Background: #EDEDED;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  scroll-behavior: smooth;
+  font-family: 'Roboto';
+}
+
+.bodyMain {
+  background: unset;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-grow: 1;
+  min-height: 100vh;
+  position: relative;
+  letter-spacing: 1px;
+  font-size: 18px;
+  line-height: 1.5;
+  word-break: break-word;
+  color: #434343;
+  text-shadow: 0 0 1px rgba(0,0,0,0.15);
+  font-weight: 500;
+}
+
+body::-webkit-scrollbar {
+  width: 12px;
+}
+
+body::-webkit-scrollbar-track {
+  background-color: rgba(0,0,0,0.15);
+}
+
+body::-webkit-scrollbar-thumb {
+  max-width: 10px;
+  border-radius: 2px;
+  background-color: #4c82a3;
+  cursor: grab;
+}
+
+.secMain {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.containerMain {
+  max-width: 1400px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: end;
+  padding: 0 10px 0 10px;
+  position: relative;
+}
+
+.containerMain.containerMainFullHeight {
+  flex-grow: 1;
+}
+
+.secMain.secMainBody {
+  flex-grow: 1;
+}
+
+p {
+  margin: 0;
+}
+
+.secMainFooterInsideTopSec.secMainFooterInsideTopSecLeft {
+  grid-gap: 25px;
+}
+
+@media (max-width: 768px) {
+  .secMainFooterInsideTopSec.secMainFooterInsideTopSecLeft {
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.secMainFooterInsideTopSec.secMainFooterInsideTopSecMid {
+}
+
+.secMainFooterInsideTopSec.secMainFooterInsideTopSecRight {
+}
+
+.btnMain {
+  transition: ease 0.2s;
+  width: auto;
+  border-radius: 4px;
+  outline: unset;
+  border: unset;
+  background: unset;
+  color: #ffffff;
+  background: #4c82a3;
+  font-weight: 500;
+  font-size: 14px;
+  padding: 8px 15px;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 12px;
+  justify-content: center;
+  align-items: center;
+  text-decoration: unset;
+  position: relative;
+  cursor: pointer;
+}
+
+.btnMain:hover {
+  transition: ease 0.2s;
+  background: #5e8eab;
+  color: white;
+}
+
+.btnMain:active {
+  transition: ease 0.2s;
+  background: #447592;
+  color: white;
+}
+
+.linkMain {
+  transition: ease 0.4s;
+  color: #4c82a3;
+  text-decoration: unset;
+}
+
+.linkMain:hover {
+  transition: ease 0.4s;
+  color: #4c82a3;
+  text-decoration: underline;
+}
+
+.btnMainImg {
+  border-radius: 100px;
+  width: 20px;
+  height: 20px;
+  background: rgb(255,255,255);
+}
+
+.btnMainIcon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+}
+
+.secMainBodySec {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 25px 0px;
+  align-items: center;
+}
+
+.secMainBodySecInside {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
+
+.searchMain {
+  overflow: hidden;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 0px;
+  outline: solid 1px #dddddd;
+  background: white;
+}
+
+.inputMain {
+  border-radius: 4px;
+  border: solid 1px rgba(0,0,0,0.15);
+  padding: 5px 10px;
+  font-size: 16px;
+  width: 100%;
+  background: linear-gradient(rgba(0,0,0,0.00), rgba(0,0,0,0.00) 100%), linear-gradient(white, white);
+}
+
+.inputMain:focus {
+  border: solid 1px rgba(0,0,0,0.15);
+  outline: none;
+  background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05) 100%), linear-gradient(white, white);
+}
+
+.inputMain.searchMainInput {
+  border: unset;
+  border-radius: 0px;
+}
+
+.btnMain.searchMainBtn {
+  border-radius: 0px;
+}
+
+.dropdownMain {
+}
+
+.btnMain.dropdownMainBtn {
+  width: 100%;
+  justify-content: space-between;
+}
+
+.dropdown-menu.dropdownMainMenu {
+  background: #ffffff;
+  border: unset;
+  border-radius: 4px;
+  padding: 5px 5px 0px 5px;
+  margin: 3px 0 0 0!important;
+  box-shadow: 0 0 4px 0 rgb(0,0,0,0.1);
+  width: 100%;
+}
+
+.dropdown-item.dropdownMainMenuItem {
+  transition: ease 0.2s;
+  border-radius: 4px;
+  color: #696969;
+  background: white;
+  font-weight: 500;
+  font-size: 14px;
+  margin: 0 0 5px 0;
+  padding: 5px 10px;
+}
+
+.dropdown-item.dropdownMainMenuItem:hover {
+  transition: ease 0.2s;
+  color: #ffffff;
+  background: #4c82a3;
+}
+
+.fieldWrapper {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 5px;
+}
+
+.labelMain {
+  font-size: 16px;
+  margin: 0;
+}
+
+.labelMain.labelMainWhite {
+}
+
+.inputMain.inputMainAlt {
+  background: rgba(255,255,255,0.1);
+  border: solid 1px rgba(255,255,255,0.15);
+  color: white;
+}
+
+.inputMain.inputMainAlt::placeholder {
+  color: rgba(255,255,255,0.2);
+}
+
+.checkboxWrapper {
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  align-items: center;
+}
+
+.labelMain.labelMainCheckbox {
+  font-size: 13px;
+  color: rgba(0,0,0,0.65);
+}
+
+.checkboxMain {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 15px;
+  height: 15px;
+  content: '';
+  border: solid 1px #4c82a3;
+  border-radius: 2px;
+  cursor: pointer;
+  position: relative;
+  background: rgba(0,0,0,0.1);
+}
+
+.checkboxMain:checked {
+}
+
+.checkboxMain:checked::before {
+  content: '\2714';
+  color: white;
+  font-size: 7px;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #4c82a3;
+}
+
+.filesPageSecSidesSecToolsItemIcon {
+  font-size: 15px;
+}
+
+.btnMainInputFile {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.btnMain.filesPageSecMidActionsBottomBtn {
+  width: 100%;
+  max-width: 300px;
+}
+
diff --git a/tabs.css b/tabs.css
new file mode 100644
index 0000000..3ac9ed5
--- /dev/null
+++ b/tabs.css
@@ -0,0 +1,125 @@
+.tabsMain {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+
+.tabsMainTop {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 5px;
+  border: unset;
+}
+
+.nav.nav-tabs.tabsMainBottom {
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-item.tabsMainTopTab {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-link.tabsMainTopTabLink {
+  transition: ease 0.4s;
+  background: rgba(76,130,163,0);
+  border-radius: 4px;
+  color: rgba(0,0,0,0.5);
+  text-align: center;
+  border-radius: 4px;
+  border: unset;
+  padding: 10px;
+  margin: 0;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 16px;
+}
+
+.nav-link.tabsMainTopTabLink:hover {
+  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), linear-gradient(#4c82a3, #4c82a3);
+  color: rgb(255,255,255);
+}
+
+.nav-link.active.tabsMainTopTabLink {
+  transition: ease 0.2s;
+  background: rgb(76,130,163);
+  border-radius: 4px;
+  color: rgb(255,255,255);
+  border: unset;
+}
+
+.tab-pane.tabsMainBottomPane {
+  width: 100%;
+  height: 100%;
+}
+
+.tabsMainTopTab.tabsMainTopTabNostr {
+  max-width: 75px;
+  padding: 0 0 0 10px;
+  border-left: solid 1px rgba(0,0,0,0.1);
+}
+
+.nav-link.tabsMainTopTabLink.tabsMainTopTabLinkAlt {
+  color: rgba(0,0,0,0.65);
+}
+
+.nav-link.tabsMainTopTabLink.tabsMainTopTabLinkAlt:hover {
+  transition: ease 0.4s;
+  color: rgba(255,255,255,0.65);
+  background: #5e8eab;
+}
+
+.nav-link.active.tabsMainTopTabLink.tabsMainTopTabLinkAlt {
+  background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), linear-gradient(#4c82a3, #4c82a3);
+  color: white;
+}
+
+.nav-link.active.tabsMainTopTabLink.tabsMainTopTabLinkAlt:hover {
+  background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), linear-gradient(#4c82a3, #4c82a3);
+  color: white;
+}
+
+.tabsMainBottomPaneLogin {
+  padding: 0 10px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 15px;
+}
+
+.tabsMainBottomPaneLoginSplitter {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 10px;
+  color: rgba(255,255,255,0.5);
+  font-size: 14px;
+  font-weight: 400;
+  text-align: center;
+  align-items: center;
+}
+
+.tabsMainBottomPaneLoginSplitterLine {
+  flex-grow: 1;
+  height: 2px;
+  background: rgba(255,255,255,0.1);
+}
+
+.btnMain.tabsMainBottomPaneLoginBtn.tabsMainBottomPaneLoginBtnAlt {
+  max-width: unset;
+}
+
+.tab-content.tabsMainBottom {
+  height: 100%;
+}
+
+.tabsMainTopTabLink.tabsMainTopTabLinkAlt.tabsMainTopTabLinkNostr {
+  background: #4c82a3;
+}
+
diff --git a/uploadBox.css b/uploadBox.css
new file mode 100644
index 0000000..9432ac9
--- /dev/null
+++ b/uploadBox.css
@@ -0,0 +1,49 @@
+.uploadBox {
+  transition: ease 0.2s;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  padding: 15px;
+  background: white;
+  height: 250px;
+}
+
+.uploadBox:hover {
+  transition: ease 0.2s;
+  padding: 10px;
+}
+
+.uploadBoxInside {
+  transition: ease 0.2s;
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0,0,0,0.1);
+  color: rgba(0,0,0,0.25);
+  padding: 25px;
+  height: 100%;
+  min-height: 200px;
+  border-radius: 2px;
+  border: dashed 3px rgba(0,0,0,0.1);
+  font-size: 16px;
+}
+
+.uploadBoxInside:hover {
+  transition: ease 0.2s;
+  background: rgba(0,0,0,0.15);
+}
+
+.uploadBoxInsideUpload {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  cursor: pointer;
+}
+