diff --git a/assets/package-lock.json b/assets/package-lock.json
new file mode 100644
index 0000000..48e341a
--- /dev/null
+++ b/assets/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
new file mode 100644
index 0000000..9c32fcd
--- /dev/null
+++ b/frontend/.prettierrc
@@ -0,0 +1,9 @@
+{
+    "printWidth": 80,
+    "bracketSpacing": true,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "useTabs": false
+  }
\ No newline at end of file
diff --git a/frontend/components/Navbar/MobileNav.tsx b/frontend/components/Navbar/MobileNav.tsx
new file mode 100644
index 0000000..f91b0c9
--- /dev/null
+++ b/frontend/components/Navbar/MobileNav.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  CogIcon,
+  GalleryIcon,
+  HomeIcon,
+  PlusCircleIcon,
+  UserIcon,
+} from '../icons';
+
+export default function MobileNav() {
+  return (
+    <div className="bg-figma-500 h-16 w-full fixed bottom-0 px-5 rounded-t-2xl">
+      <div className="flex justify-between self-center">
+        <HomeIcon className="w-7 h-7 self-center" />
+        <GalleryIcon className="w-7 h-7 self-center" />
+        <PlusCircleIcon className="w-14 h-14 fill-figma-100 text-figma-200" />
+        <UserIcon className="w-7 h-7 self-center" />
+        <CogIcon className="w-7 h-7 self-center" />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/SearchBar.tsx b/frontend/components/SearchBar.tsx
new file mode 100644
index 0000000..502f5c0
--- /dev/null
+++ b/frontend/components/SearchBar.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { SearchIcon } from './icons';
+
+export default function SearchBar() {
+  return (
+    <div className="flex justify-center w-full">
+      <div className="relative flex flex-wrap items-stretch w-full mb-4">
+        <input
+          type="search"
+          className=" h-11 rounded px-6 w-3/4 border-2 border-figma-300 text-figma-400 font-medium"
+          placeholder="Search artwork"
+        />
+        <button className="inline-block px-1 py-2 border-2 border-figma-100 text-figma-100 font-medium text-xs leading-tight uppercase rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out w-1/4">
+          Search
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/components/icons/CogIcon.tsx b/frontend/components/icons/CogIcon.tsx
new file mode 100644
index 0000000..e7f6497
--- /dev/null
+++ b/frontend/components/icons/CogIcon.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+export default function CogIcon({
+  className,
+  ...props
+}: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/components/icons/CopyIcon.tsx b/frontend/components/icons/CopyIcon.tsx
deleted file mode 100644
index 5b4a182..0000000
--- a/frontend/components/icons/CopyIcon.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-function CopyIcon({ className, ...props }: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      version="1.1"
-      viewBox="0 0 699.428 699.428"
-      xmlSpace="preserve"
-      className={className}
-      {...props}
-    >
-      <path d="M502.714 0H240.428C194.178 0 153 42.425 153 87.429l-25.267.59c-46.228 0-84.019 41.834-84.019 86.838V612c0 45.004 41.179 87.428 87.429 87.428H459c46.249 0 87.428-42.424 87.428-87.428h21.857c46.25 0 87.429-42.424 87.429-87.428v-349.19L502.714 0zM459 655.715H131.143c-22.95 0-43.714-21.441-43.714-43.715V174.857c0-22.272 18.688-42.993 41.638-42.993l23.933-.721v393.429C153 569.576 194.178 612 240.428 612h262.286c0 22.273-20.765 43.715-43.714 43.715zm153-131.143c0 22.271-20.765 43.713-43.715 43.713H240.428c-22.95 0-43.714-21.441-43.714-43.713V87.429c0-22.272 20.764-43.714 43.714-43.714H459c-.351 50.337 0 87.975 0 87.975 0 45.419 40.872 86.882 87.428 86.882H612v306zm-65.572-349.715c-23.277 0-43.714-42.293-43.714-64.981V44.348L612 174.857h-65.572zm-43.714 131.537H306c-12.065 0-21.857 9.77-21.857 21.835 0 12.065 9.792 21.835 21.857 21.835h196.714c12.065 0 21.857-9.771 21.857-21.835 0-12.065-9.792-21.835-21.857-21.835zm0 109.176H306c-12.065 0-21.857 9.77-21.857 21.834 0 12.066 9.792 21.836 21.857 21.836h196.714c12.065 0 21.857-9.77 21.857-21.836 0-12.064-9.792-21.834-21.857-21.834z" />
-    </svg>
-  );
-}
-
-export default CopyIcon;
diff --git a/frontend/components/icons/CashIcon.tsx b/frontend/components/icons/GalleryIcon.tsx
similarity index 62%
rename from frontend/components/icons/CashIcon.tsx
rename to frontend/components/icons/GalleryIcon.tsx
index 89ad4f7..6762175 100644
--- a/frontend/components/icons/CashIcon.tsx
+++ b/frontend/components/icons/GalleryIcon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function CashIcon({
+export default function GalleryIcon({
   className,
   ...props
 }: React.SVGProps<SVGSVGElement>) {
@@ -12,12 +12,12 @@ export default function CashIcon({
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
+      strokeWidth={2}
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth={2}
-        d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"
+        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
       />
     </svg>
   );
diff --git a/frontend/components/icons/CheckIcon.tsx b/frontend/components/icons/HomeIcon.tsx
similarity index 63%
rename from frontend/components/icons/CheckIcon.tsx
rename to frontend/components/icons/HomeIcon.tsx
index 606d727..99ddaaf 100644
--- a/frontend/components/icons/CheckIcon.tsx
+++ b/frontend/components/icons/HomeIcon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function CheckIcon({
+export default function HomeIcon({
   className,
   ...props
 }: React.SVGProps<SVGSVGElement>) {
@@ -12,12 +12,12 @@ export default function CheckIcon({
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
+      strokeWidth={2}
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth={2}
-        d="M5 13l4 4L19 7"
+        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
       />
     </svg>
   );
diff --git a/frontend/components/icons/BackIcon.tsx b/frontend/components/icons/PlusCircleIcon.tsx
similarity index 73%
rename from frontend/components/icons/BackIcon.tsx
rename to frontend/components/icons/PlusCircleIcon.tsx
index 1e94aa6..bf1449f 100644
--- a/frontend/components/icons/BackIcon.tsx
+++ b/frontend/components/icons/PlusCircleIcon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function BackIcon({
+export default function PlusCircleIcon({
   className,
   ...props
 }: React.SVGProps<SVGSVGElement>) {
@@ -12,12 +12,12 @@ export default function BackIcon({
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
+      strokeWidth={2}
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth={2}
-        d="M15 19l-7-7 7-7"
+        d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
       />
     </svg>
   );
diff --git a/frontend/components/icons/SearchIcon.tsx b/frontend/components/icons/SearchIcon.tsx
new file mode 100644
index 0000000..21c9a30
--- /dev/null
+++ b/frontend/components/icons/SearchIcon.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+function SearchIcon({ className, ...props }: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+      />
+    </svg>
+  );
+}
+
+export default SearchIcon;
diff --git a/frontend/components/icons/TruckIcon.tsx b/frontend/components/icons/TruckIcon.tsx
deleted file mode 100644
index f622142..0000000
--- a/frontend/components/icons/TruckIcon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-export default function TruckIcon({
-  className,
-  ...props
-}: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      {...props}
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-    >
-      <path d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={2}
-        d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"
-      />
-    </svg>
-  );
-}
diff --git a/frontend/components/icons/CheckCircleIcon.tsx b/frontend/components/icons/UserIcon.tsx
similarity index 73%
rename from frontend/components/icons/CheckCircleIcon.tsx
rename to frontend/components/icons/UserIcon.tsx
index 0e709e0..8af8e7b 100644
--- a/frontend/components/icons/CheckCircleIcon.tsx
+++ b/frontend/components/icons/UserIcon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function CheckCircleIcon({
+export default function UserIcon({
   className,
   ...props
 }: React.SVGProps<SVGSVGElement>) {
@@ -12,12 +12,12 @@ export default function CheckCircleIcon({
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
+      strokeWidth={2}
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
-        strokeWidth={2}
-        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
       />
     </svg>
   );
diff --git a/frontend/components/icons/index.tsx b/frontend/components/icons/index.tsx
index 9883fc1..6ccd271 100644
--- a/frontend/components/icons/index.tsx
+++ b/frontend/components/icons/index.tsx
@@ -1,31 +1,8 @@
-import EditIcon from './EditIcon';
-import BackIcon from './BackIcon';
-import CheckIcon from './CheckIcon';
-import TrashIcon from './TrashIcon';
-import UploadIcon from './UploadIcon';
-import CloseIcon from './CloseIcon';
-import PageIcon from './PageIcon';
-import CopyIcon from './CopyIcon';
-import StarIcon from './StarIcon';
-import LogOutIcon from './LogOutIcon';
-import LoginIcon from './LoginIcon';
-import TruckIcon from './TruckIcon';
-import TagIcon from './TagIcon';
-import HeartIcon from './HeartIcon';
+import HomeIcon from './HomeIcon';
+import GalleryIcon from './GalleryIcon';
+import PlusCircleIcon from './PlusCircleIcon';
+import UserIcon from './UserIcon';
+import CogIcon from './CogIcon';
+import SearchIcon from './SearchIcon';
 
-export {
-  EditIcon,
-  BackIcon,
-  CheckIcon,
-  TrashIcon,
-  UploadIcon,
-  CloseIcon,
-  PageIcon,
-  CopyIcon,
-  StarIcon,
-  LogOutIcon,
-  LoginIcon,
-  TruckIcon,
-  TagIcon,
-  HeartIcon,
-};
+export { HomeIcon, GalleryIcon, PlusCircleIcon, UserIcon, CogIcon, SearchIcon };
diff --git a/frontend/pages/app/index.tsx b/frontend/pages/app/index.tsx
new file mode 100644
index 0000000..9ddf01b
--- /dev/null
+++ b/frontend/pages/app/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import MobileNav from '../../components/Navbar/MobileNav';
+import SearchBar from '../../components/SearchBar';
+
+export default function Landing() {
+  return (
+    <div className="min-h-screen min-w-full p-4">
+      <div className="">
+        <h1 className="font-bold; text-xl ml-12">Welcome</h1>
+        <img src="/logo.png" alt="logo" className="w-36" />
+      </div>
+      <div className="mt-6">
+        <SearchBar />
+      </div>
+      <div>
+        <MobileNav />
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/public/logo.png b/frontend/public/logo.png
new file mode 100644
index 0000000..62016c9
Binary files /dev/null and b/frontend/public/logo.png differ
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 31433d3..6b29054 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   content: [
-    "./pages/**/*.{js,ts,jsx,tsx}",
-    "./components/**/*.{js,ts,jsx,tsx}",
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
     './context/**/*.{js,jsx,ts,tsx}',
   ],
   theme: {
@@ -14,7 +14,7 @@ module.exports = {
     extend: {
       colors: {
         primary: {
-           50: '#4C5564',
+          50: '#4C5564',
           100: '#787878',
           200: '#5E5E5E',
           300: '#454545',
@@ -29,12 +29,18 @@ module.exports = {
           500: '#15F974',
         },
         test: {
-          50: '#232f35'
-        }
+          50: '#232f35',
+        },
+        figma: {
+          100: '#473EA8',
+          200: '#F9F9F9',
+          300: '#F2F2F2',
+          400: '#333333',
+          500: '#FEFEFE',
+          600: '#828282',
+        },
       },
     },
   },
-  plugins: [
-    require('tailwind-scrollbar-hide')
-  ],
-}
\ No newline at end of file
+  plugins: [require('tailwind-scrollbar-hide')],
+};