diff --git a/pages/_app.tsx b/pages/_app.tsx
index ff77dc2..9d942da 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -3,8 +3,8 @@ import React from 'react';
 import {ApolloProvider} from '@apollo/client';
 import client from '../src/middleware/graphql/apollo-client';
 import type {AppProps /*, AppContext */, NextWebVitalsMetric} from 'next/app';
-import Navbar from '../src/ui/Navbar';
-import Footer from '../src/ui/Footer';
+import Navbar from '../src/components/ui/Navbar';
+import Footer from '../src/components/ui/Footer';
 import {Provider} from 'react-redux';
 // @ts-ignore
 import {store} from '../src/store';
diff --git a/pages/about/index.tsx b/pages/about/index.tsx
index a27b89c..cd95c75 100644
--- a/pages/about/index.tsx
+++ b/pages/about/index.tsx
@@ -1,7 +1,7 @@
 import React, {ReactNode} from 'react';
 import H from '../../src/components/common/H';
 //@ts-ignore
-import SEO from '@/src/components/SEO';
+import SEO from '@/src/components/common/SEO';
 export default function About(): ReactNode {
   return (
     <>
diff --git a/pages/auction-house/index.tsx b/pages/auction-house/index.tsx
index 3f5da05..f83e5f4 100644
--- a/pages/auction-house/index.tsx
+++ b/pages/auction-house/index.tsx
@@ -1,10 +1,10 @@
 import React, {Fragment, useEffect, useState} from 'react';
 //@ts-ignore
-import SEO from '../../src/components/SEO';
+import SEO from '../../src/components/common/SEO';
 
 const {DateTime} = require('luxon');
 
-import ANIM_Ellipsis from '../../src/components/ANIM-Ellipsis';
+import ANIM_Ellipsis from '../../src/components/blocks/ANIM-Ellipsis';
 import H from '../../src/components/common/H';
 import DABU from '../../dabu';
 import {runTime} from '../../dabu/helpers';
diff --git a/pages/index.tsx b/pages/index.tsx
index 203a374..40a9aac 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,12 +1,12 @@
 import React, {Fragment, useEffect, useState} from 'react';
 //@ts-ignore
-import SEO from '../src/components/SEO';
+import SEO from '../src/components/common/SEO';
 // @ts-ignore
-import NFTCARD from '../src/ui/NFTCard';
+import NFTCARD from '../src/components/ui/NFTCard';
 
 const {DateTime} = require('luxon');
 
-import ANIM_Ellipsis from '../src/components/ANIM-Ellipsis';
+import ANIM_Ellipsis from '../src/components/blocks/ANIM-Ellipsis';
 import H from '../src/components/common/H';
 import DABU from '../dabu';
 import {runTime} from '../dabu/helpers';
diff --git a/pages/profile.tsx b/pages/profile.tsx
index d16cd3e..f8aa7e0 100644
--- a/pages/profile.tsx
+++ b/pages/profile.tsx
@@ -6,11 +6,11 @@ import TAKO from '@/src/tako';
 import DABU from '../dabu';
 
 //@ts-ignore
-import SEO from '@/src/components/SEO';
+import SEO from '@/src/components/common/SEO';
 //@ts-ignore
 import Button from '@/src/components/common/Button';
 // @ts-ignore
-import ANIM_Ellipsis from '@/src/components/ANIM-Ellipsis';
+import ANIM_Ellipsis from '@/src/components/blocks/ANIM-Ellipsis';
 import {
   useAddress,
   MediaRenderer,
diff --git a/pages/trade/[network_id].tsx b/pages/trade/[network_id].tsx
index 330f098..43bab12 100644
--- a/pages/trade/[network_id].tsx
+++ b/pages/trade/[network_id].tsx
@@ -11,13 +11,13 @@ import {
   ChainId,
 } from '@thirdweb-dev/react';
 //@ts-ignore
-import SEO from '../../src/components/SEO';
+import SEO from '../../src/components/common/SEO';
 // @ts-ignore
 import Button from '../../src/components/common/Button';
 // @ts-ignore
 import getTrade from '../../src/hooks/getTrade';
 // @ts-ignore
-import ANIM_Ellipsis from '@/src/components/ANIM-Ellipsis';
+import ANIM_Ellipsis from '@/src/components/blocks/ANIM-Ellipsis';
 function truncateAddress(address) {
   try {
     return `${address.substring(0, 6).toLowerCase()}...${address
diff --git a/pages/trade/index.tsx b/pages/trade/index.tsx
index 19d121c..369fcf5 100644
--- a/pages/trade/index.tsx
+++ b/pages/trade/index.tsx
@@ -4,13 +4,13 @@ const {DateTime} = require('luxon');
 import DABU from '../../dabu';
 import {useAddress} from '@thirdweb-dev/react';
 //@ts-ignore
-import SEO from '@/src/components/SEO';
+import SEO from '@/src/components/common/SEO';
 // @ts-ignore
 import Button from '@/src/components/common/Button';
 // @ts-ignore
 import NFTCard from '../../src/ui/NFTCard';
 // @ts-ignore
-import ANIM_Ellipsis from '@/src/components/ANIM-Ellipsis';
+import ANIM_Ellipsis from '@/src/components/blocks/ANIM-Ellipsis';
 import Web3 from 'web3';
 import { runTime } from '../../dabu/helpers';
 var BN: any = Web3.utils.hexToNumberString;
diff --git a/src/components/NavButton.tsx b/src/components/NavButton.tsx
deleted file mode 100644
index 6449a19..0000000
--- a/src/components/NavButton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-
-export default function NavButton(props: any) {
-  function handleRoute(path) {
-    if (
-      typeof window !== 'undefined' &&
-       document.getElementById(path) !== null
-    ) {
-      document.getElementById(path).scrollIntoView({
-        behavior: 'smooth',
-      });
-    }
-    return;
-  }
-  return (
-    <button
-      disabled={props.disabled}
-      className={`${props.className ? props.className : ''} btn`}
-      onClick={() => {
-        handleRoute(props.path);
-      }}>
-      {props.children}
-    </button>
-  );
-}
diff --git a/src/components/ANIM-Ellipsis.tsx b/src/components/blocks/ANIM-Ellipsis.tsx
similarity index 100%
rename from src/components/ANIM-Ellipsis.tsx
rename to src/components/blocks/ANIM-Ellipsis.tsx
diff --git a/src/components/FormInputs.js b/src/components/blocks/FormInputs.js
similarity index 97%
rename from src/components/FormInputs.js
rename to src/components/blocks/FormInputs.js
index d918b4c..47f49cb 100644
--- a/src/components/FormInputs.js
+++ b/src/components/blocks/FormInputs.js
@@ -1,4 +1,4 @@
-import Input from './common/input.tsx';
+import Input from '../common/input.tsx';
 import NFTInput from './NFTInput';
 export default function FormInputs({
   id,
diff --git a/src/components/NavItem/index.stories.js b/src/components/blocks/NavItem/index.stories.js
similarity index 91%
rename from src/components/NavItem/index.stories.js
rename to src/components/blocks/NavItem/index.stories.js
index b56dcde..12b32c5 100644
--- a/src/components/NavItem/index.stories.js
+++ b/src/components/blocks/NavItem/index.stories.js
@@ -1,7 +1,7 @@
 // /stories/pages/Button.stories.jsx
 import _NavItem from '.';
 export default {
-  title: 'Components/NavItem',
+  title: 'Components/Blocks/NavItem',
   component: _NavItem,
 };
 
diff --git a/src/components/NavItem/index.tsx b/src/components/blocks/NavItem/index.tsx
similarity index 95%
rename from src/components/NavItem/index.tsx
rename to src/components/blocks/NavItem/index.tsx
index bddffa2..9a11066 100644
--- a/src/components/NavItem/index.tsx
+++ b/src/components/blocks/NavItem/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from '../common/Button';
+import Button from '../../common/Button';
 export default function NavButton({
   children,
   className,
diff --git a/src/components/WalletButton/index.js b/src/components/blocks/WalletButton/index.js
similarity index 87%
rename from src/components/WalletButton/index.js
rename to src/components/blocks/WalletButton/index.js
index d87af28..7cd8b91 100644
--- a/src/components/WalletButton/index.js
+++ b/src/components/blocks/WalletButton/index.js
@@ -1,5 +1,5 @@
-import Button from '../common/Button';
-import {truncateAddress} from '../../../dabu/helpers/truncateAddress';
+import Button from '../../common/Button';
+import {truncateAddress} from '../../../../dabu/helpers/truncateAddress';
 function WalletButton({address, onPress, onLogin}) {
   return (
     <div
diff --git a/src/components/WalletButton/index.stories.js b/src/components/blocks/WalletButton/index.stories.js
similarity index 94%
rename from src/components/WalletButton/index.stories.js
rename to src/components/blocks/WalletButton/index.stories.js
index d2bf929..8dd1459 100644
--- a/src/components/WalletButton/index.stories.js
+++ b/src/components/blocks/WalletButton/index.stories.js
@@ -1,7 +1,7 @@
 // /stories/pages/Button.stories.jsx
 import WalletButton from '.';
 export default {
-  title: 'Components/WalletButton',
+  title: 'Components/Blocks/WalletButton',
   component: WalletButton,
 };
 
diff --git a/src/components/walletbuttonitem.tsx b/src/components/blocks/walletbuttonitem.tsx
similarity index 100%
rename from src/components/walletbuttonitem.tsx
rename to src/components/blocks/walletbuttonitem.tsx
diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
new file mode 100644
index 0000000..15f3e92
--- /dev/null
+++ b/src/components/common/Input.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+export default function Input({
+  type,
+  value,
+}: {
+  type: string;
+  value: string;
+}): React.ReactElement {
+  return <input type={type} value={value} />;
+}
diff --git a/src/components/SEO.tsx b/src/components/common/SEO.tsx
similarity index 100%
rename from src/components/SEO.tsx
rename to src/components/common/SEO.tsx
diff --git a/src/ui/Footer/index.tsx b/src/components/ui/Footer/index.tsx
similarity index 89%
rename from src/ui/Footer/index.tsx
rename to src/components/ui/Footer/index.tsx
index 037b0aa..533433e 100644
--- a/src/ui/Footer/index.tsx
+++ b/src/components/ui/Footer/index.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {useRouter} from 'next/router';
-import WalletButton from '../../components/WalletButton';
-import Button from '../../components/common/Button';
+import WalletButton from '../../blocks/WalletButton';
+import Button from '../../common/Button';
 import Link from 'next/link';
 function Footer({wrapperCss = '', ...props}: any) {
   const router = useRouter();
diff --git a/src/ui/NFTCard/index.stories.jsx b/src/components/ui/NFTCard/index.stories.jsx
similarity index 94%
rename from src/ui/NFTCard/index.stories.jsx
rename to src/components/ui/NFTCard/index.stories.jsx
index 48f154a..3ae456f 100644
--- a/src/ui/NFTCard/index.stories.jsx
+++ b/src/components/ui/NFTCard/index.stories.jsx
@@ -2,7 +2,7 @@
 import _NFTCard from '.';
 
 export default {
-  title: 'UI/NFTCard',
+  title: 'Components/UI/NFTCard',
   component: _NFTCard,
 };
 
diff --git a/src/ui/NFTCard/index.tsx b/src/components/ui/NFTCard/index.tsx
similarity index 97%
rename from src/ui/NFTCard/index.tsx
rename to src/components/ui/NFTCard/index.tsx
index a6d3375..50c31e0 100644
--- a/src/ui/NFTCard/index.tsx
+++ b/src/components/ui/NFTCard/index.tsx
@@ -1,7 +1,7 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import mime from 'mime/lite.js';
 // @ts-ignore
-import ANIM_Ellipsis from '../../components/ANIM-Ellipsis';
+import ANIM_Ellipsis from '../../blocks/ANIM-Ellipsis';
 import {
   useQuery,
   QueryClient,
@@ -9,7 +9,7 @@ import {
 } from '@tanstack/react-query';
 const queryClient = new QueryClient();
 // @ts-ignore
-import Button from '../../components/common/Button';
+import Button from '../../common/Button';
 import {useRouter} from 'next/router';
 
 const NFTCard = ({
diff --git a/src/ui/Navbar/index.stories.jsx b/src/components/ui/Navbar/index.stories.jsx
similarity index 92%
rename from src/ui/Navbar/index.stories.jsx
rename to src/components/ui/Navbar/index.stories.jsx
index 8c29ca7..8254343 100644
--- a/src/ui/Navbar/index.stories.jsx
+++ b/src/components/ui/Navbar/index.stories.jsx
@@ -2,7 +2,7 @@
 import _Navbar from '.';
 
 export default {
-  title: 'UI/Navbar',
+  title: 'Components/UI/Navbar',
   component: _Navbar,
 };
 
diff --git a/src/ui/Navbar/index.tsx b/src/components/ui/Navbar/index.tsx
similarity index 92%
rename from src/ui/Navbar/index.tsx
rename to src/components/ui/Navbar/index.tsx
index d9a7a29..8bddbe0 100644
--- a/src/ui/Navbar/index.tsx
+++ b/src/components/ui/Navbar/index.tsx
@@ -1,9 +1,9 @@
 import React, {useEffect, useState} from 'react';
 import {useRouter} from 'next/router';
-import WalletButton from '../../components/WalletButton';
-import Button from '../../components/common/Button';
+import WalletButton from '../../blocks/WalletButton';
+import Button from '../../common/Button';
 import Link from 'next/link';
-import NavItem from '../../components/NavItem';
+import NavItem from '../../blocks/NavItem';
 function Navbar({wrapperCss = '', ...props}: any): React.ReactElement {
   const router = useRouter();
   const [show, setShow] = useState(false);