diff --git a/services/frontend/src/components/Modal/Network/Create.tsx b/services/frontend/src/components/Modal/Network/Create.tsx
index 455e673..df9aac3 100644
--- a/services/frontend/src/components/Modal/Network/Create.tsx
+++ b/services/frontend/src/components/Modal/Network/Create.tsx
@@ -79,31 +79,32 @@ const NetworkCreate = (props: INetworkCreateProps) => {
     >
       {(formik) => (
         <>
-          <div className="hidden sm:block">
-            <div className="border-b border-gray-200 px-8">
-              <nav className="-mb-px flex space-x-8" aria-label="Tabs">
-                {tabs.map((tab) => (
-                  <a
-                    key={tab.name}
-                    href={tab.href}
-                    className={classNames(
-                      tab.name === openTab
-                        ? "border-indigo-500 text-indigo-600"
-                        : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                      "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
-                      tab.hidden ? "hidden" : ""
-                    )}
-                    aria-current={tab.current ? "page" : undefined}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      setOpenTab(tab.name);
-                    }}
-                  >
-                    {tab.name}
-                  </a>
-                ))}
-              </nav>
-            </div>
+          <div className="border-b border-gray-200 px-4 md:px-8">
+            <nav
+              className="-mb-px flex space-x-4 md:space-x-8"
+              aria-label="Tabs"
+            >
+              {tabs.map((tab) => (
+                <a
+                  key={tab.name}
+                  href={tab.href}
+                  className={classNames(
+                    tab.name === openTab
+                      ? "border-indigo-500 text-indigo-600"
+                      : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                    "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
+                    tab.hidden ? "hidden" : ""
+                  )}
+                  aria-current={tab.current ? "page" : undefined}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setOpenTab(tab.name);
+                  }}
+                >
+                  {tab.name}
+                </a>
+              ))}
+            </nav>
           </div>
 
           <div className="relative px-4 py-3 flex-auto">
diff --git a/services/frontend/src/components/Modal/Network/Edit.tsx b/services/frontend/src/components/Modal/Network/Edit.tsx
index ede89a5..40cafa8 100644
--- a/services/frontend/src/components/Modal/Network/Edit.tsx
+++ b/services/frontend/src/components/Modal/Network/Edit.tsx
@@ -82,31 +82,32 @@ const NetworkEdit = (props: INetworkEditProps) => {
     >
       {(formik) => (
         <>
-          <div className="hidden sm:block">
-            <div className="border-b border-gray-200 px-8">
-              <nav className="-mb-px flex space-x-8" aria-label="Tabs">
-                {tabs.map((tab) => (
-                  <a
-                    key={tab.name}
-                    href={tab.href}
-                    className={classNames(
-                      tab.name === openTab
-                        ? "border-indigo-500 text-indigo-600"
-                        : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                      "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
-                      tab.hidden ? "hidden" : ""
-                    )}
-                    aria-current={tab.current ? "page" : undefined}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      setOpenTab(tab.name);
-                    }}
-                  >
-                    {tab.name}
-                  </a>
-                ))}
-              </nav>
-            </div>
+          <div className="border-b border-gray-200 px-4 md:px-8">
+            <nav
+              className="-mb-px flex space-x-4 md:space-x-8"
+              aria-label="Tabs"
+            >
+              {tabs.map((tab) => (
+                <a
+                  key={tab.name}
+                  href={tab.href}
+                  className={classNames(
+                    tab.name === openTab
+                      ? "border-indigo-500 text-indigo-600"
+                      : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                    "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
+                    tab.hidden ? "hidden" : ""
+                  )}
+                  aria-current={tab.current ? "page" : undefined}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setOpenTab(tab.name);
+                  }}
+                >
+                  {tab.name}
+                </a>
+              ))}
+            </nav>
           </div>
 
           <div className="relative px-4 py-3 flex-auto">
diff --git a/services/frontend/src/components/Modal/Service/Edit.tsx b/services/frontend/src/components/Modal/Service/Edit.tsx
index 06c765a..9869d61 100644
--- a/services/frontend/src/components/Modal/Service/Edit.tsx
+++ b/services/frontend/src/components/Modal/Service/Edit.tsx
@@ -100,34 +100,32 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
               >
                 {(formik) => (
                   <>
-                    <div className="hidden sm:block">
-                      <div className="border-b border-gray-200 px-8">
-                        <nav
-                          className="-mb-px flex space-x-8"
-                          aria-label="Tabs"
-                        >
-                          {tabs.map((tab) => (
-                            <a
-                              key={tab.name}
-                              href={tab.href}
-                              className={classNames(
-                                tab.name === openTab
-                                  ? "border-indigo-500 text-indigo-600"
-                                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                                "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
-                                tab.hidden ? "hidden" : ""
-                              )}
-                              aria-current={tab.current ? "page" : undefined}
-                              onClick={(e) => {
-                                e.preventDefault();
-                                setOpenTab(tab.name);
-                              }}
-                            >
-                              {tab.name}
-                            </a>
-                          ))}
-                        </nav>
-                      </div>
+                    <div className="border-b border-gray-200 px-4 md:px-8">
+                      <nav
+                        className="-mb-px flex space-x-4 md:space-x-8"
+                        aria-label="Tabs"
+                      >
+                        {tabs.map((tab) => (
+                          <a
+                            key={tab.name}
+                            href={tab.href}
+                            className={classNames(
+                              tab.name === openTab
+                                ? "border-indigo-500 text-indigo-600"
+                                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                              "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
+                              tab.hidden ? "hidden" : ""
+                            )}
+                            aria-current={tab.current ? "page" : undefined}
+                            onClick={(e) => {
+                              e.preventDefault();
+                              setOpenTab(tab.name);
+                            }}
+                          >
+                            {tab.name}
+                          </a>
+                        ))}
+                      </nav>
                     </div>
 
                     <div className="relative px-4 py-3 flex-auto">
diff --git a/services/frontend/src/components/Modal/Service/General.tsx b/services/frontend/src/components/Modal/Service/General.tsx
index 5469120..60b1df8 100644
--- a/services/frontend/src/components/Modal/Service/General.tsx
+++ b/services/frontend/src/components/Modal/Service/General.tsx
@@ -15,6 +15,9 @@ const Fields = styled("div")`
 const ImageNameGroup = styled("div")`
   display: flex;
   flex-direction: row;
+  @media (max-width: 640px) {
+    flex-direction: column;
+  }
   column-gap: ${({ theme }) => theme.spacing(1)};
   width: 100%;
 `;
@@ -31,6 +34,7 @@ const GroupTitle = styled("h5")`
   font-weight: 500;
   width: 100%;
   text-align: left;
+  margin-bottom: 0.25em;
 `;
 
 const Records = styled("div")`
@@ -80,12 +84,7 @@ const General = () => {
       <Fields>
         <TextField label="Service name" name="serviceName" required={true} />
         <ImageNameGroup>
-          <TextField
-            label="Image name"
-            name="imageName"
-            required={true}
-            style={{ minWidth: 400 }}
-          />
+          <TextField label="Image name" name="imageName" required={true} />
           <TextField label="Image tag" name="imageTag" />
         </ImageNameGroup>
         <TextField
diff --git a/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx b/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx
index 6c1aba4..c690f24 100644
--- a/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx
+++ b/services/frontend/src/components/Modal/volume/EditVolumeModal.tsx
@@ -71,34 +71,32 @@ const EditVolumeModal = (props: IEditVolumeModal) => {
               >
                 {(formik) => (
                   <>
-                    <div className="hidden sm:block">
-                      <div className="border-b border-gray-200 px-8">
-                        <nav
-                          className="-mb-px flex space-x-8"
-                          aria-label="Tabs"
-                        >
-                          {tabs.map((tab) => (
-                            <a
-                              key={tab.name}
-                              href={tab.href}
-                              className={classNames(
-                                tab.name === openTab
-                                  ? "border-indigo-500 text-indigo-600"
-                                  : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
-                                "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
-                                tab.hidden ? "hidden" : ""
-                              )}
-                              aria-current={tab.current ? "page" : undefined}
-                              onClick={(e) => {
-                                e.preventDefault();
-                                setOpenTab(tab.name);
-                              }}
-                            >
-                              {tab.name}
-                            </a>
-                          ))}
-                        </nav>
-                      </div>
+                    <div className="border-b border-gray-200 px-4 md:px-8">
+                      <nav
+                        className="-mb-px flex space-x-4 md:space-x-8"
+                        aria-label="Tabs"
+                      >
+                        {tabs.map((tab) => (
+                          <a
+                            key={tab.name}
+                            href={tab.href}
+                            className={classNames(
+                              tab.name === openTab
+                                ? "border-indigo-500 text-indigo-600"
+                                : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                              "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
+                              tab.hidden ? "hidden" : ""
+                            )}
+                            aria-current={tab.current ? "page" : undefined}
+                            onClick={(e) => {
+                              e.preventDefault();
+                              setOpenTab(tab.name);
+                            }}
+                          >
+                            {tab.name}
+                          </a>
+                        ))}
+                      </nav>
                     </div>
 
                     <div className="relative px-4 py-3 flex-auto">
diff --git a/services/frontend/src/components/Projects/index.tsx b/services/frontend/src/components/Projects/index.tsx
index bdf8551..7ebe1e1 100644
--- a/services/frontend/src/components/Projects/index.tsx
+++ b/services/frontend/src/components/Projects/index.tsx
@@ -5,6 +5,7 @@ import { IProject } from "../../types";
 import Spinner from "../../components/global/Spinner";
 import PreviewBlock from "./PreviewBlock";
 import { useProjects } from "../../hooks/useProjects";
+import { PlusIcon } from "@heroicons/react/outline";
 
 const Projects = () => {
   const [limit] = useState(PROJECTS_FETCH_LIMIT);
@@ -22,22 +23,24 @@ const Projects = () => {
                 Projects
               </h1>
 
-              <Link
-                className="btn-util text-white bg-blue-600 hover:bg-blue-700 sm:w-auto"
-                to="/projects/new"
-              >
-                <span>Create new project</span>
-              </Link>
+              {data && data.results.length > 0 && (
+                <Link
+                  className="btn-util text-white bg-blue-600 hover:bg-blue-700 sm:w-auto"
+                  to="/projects/new"
+                >
+                  <span>Create new project</span>
+                </Link>
+              )}
             </div>
 
             <div className="px-4 sm:px-6 md:px-8">
-              {isFetching && (
+              {(isFetching || isLoading) && (
                 <div className="flex justify-center items-center mx-auto mt-10">
                   <Spinner className="w-6 h-6 text-blue-600" />
                 </div>
               )}
 
-              {!isFetching && (
+              {!isFetching && !isLoading && (
                 <>
                   <div className="py-4">
                     {error && (
@@ -70,22 +73,23 @@ const Projects = () => {
                           minHeight: "calc(100vh - 120px)"
                         }}
                       >
-                        <img
-                          style={{
-                            width: 400,
-                            height: "auto"
-                          }}
-                          src="https://res.cloudinary.com/hypertool/image/upload/v1657816359/hypertool-assets/empty-projects_fdcxtk.svg"
-                        />
-                        <p className="mt-4 text-md text-gray-500 dark:text-gray-400">
-                          We tried our best, but could not find any projects.
+                        <h3 className="mt-2 text-sm font-medium text-gray-900">
+                          No projects
+                        </h3>
+                        <p className="mt-1 text-sm text-gray-500">
+                          Get started by creating a new project.
                         </p>
-                        <Link
-                          className="btn-util text-white bg-blue-600 hover:bg-blue-700 sm:w-auto mt-3"
-                          to="/projects/new"
-                        >
-                          <span>Create new project</span>
-                        </Link>
+                        <div className="mt-6">
+                          <Link to="/projects/new" className="btn-util">
+                            <span className="flex space-x-1 items-center">
+                              <PlusIcon
+                                className="h-3 w-3"
+                                aria-hidden="true"
+                              />
+                              <span>New Project</span>
+                            </span>
+                          </Link>
+                        </div>
                       </div>
                     )}
                   </div>
diff --git a/services/frontend/src/components/Record.tsx b/services/frontend/src/components/Record.tsx
index 4444a0c..b273fe7 100644
--- a/services/frontend/src/components/Record.tsx
+++ b/services/frontend/src/components/Record.tsx
@@ -28,6 +28,9 @@ const Root = styled("div")`
   justify-content: flex-start;
   align-items: flex-start;
   column-gap: ${({ theme }) => theme.spacing(2)};
+  @media (max-width: 768px) {
+    column-gap: ${({ theme }) => theme.spacing(1)};
+  }
 `;
 
 const RemoveButton = styled(IconButton)``;
diff --git a/services/frontend/src/components/global/FormElements/TextField.tsx b/services/frontend/src/components/global/FormElements/TextField.tsx
index 89ba3bc..c5cd5d5 100644
--- a/services/frontend/src/components/global/FormElements/TextField.tsx
+++ b/services/frontend/src/components/global/FormElements/TextField.tsx
@@ -12,6 +12,7 @@ export interface ITextFieldProps {
 const Root = styled("div")`
   display: flex;
   flex-direction: column;
+  width: 100%;
 `;
 
 const TextField: FunctionComponent<ITextFieldProps> = (
@@ -25,10 +26,7 @@ const TextField: FunctionComponent<ITextFieldProps> = (
   return (
     <Root>
       {label && (
-        <label
-          htmlFor={name}
-          className="block text-xs font-medium text-gray-700"
-        >
+        <label htmlFor={name} className="lbl-util">
           {label + (required ? "*" : "")}
         </label>
       )}
@@ -38,7 +36,7 @@ const TextField: FunctionComponent<ITextFieldProps> = (
         name={name}
         type="text"
         autoComplete="none"
-        className="input-util mt-1"
+        className="input-util"
         required={required}
         onBlur={formik.handleBlur}
         onChange={formik.handleChange}
diff --git a/services/frontend/src/components/global/SideBar.tsx b/services/frontend/src/components/global/SideBar.tsx
index e7c5478..16c08a9 100644
--- a/services/frontend/src/components/global/SideBar.tsx
+++ b/services/frontend/src/components/global/SideBar.tsx
@@ -29,15 +29,15 @@ export default function SideBar(props: ISideBarProps) {
   return (
     <>
       <div className="md:flex md:w-16 md:flex-col md:fixed md:inset-y-0">
-        <div className="flex flex-col flex-grow pt-5 bg-blue-700 overflow-y-auto">
-          <div className="flex items-center flex-shrink-0 mx-auto">
+        <div className="flex justify-between flex-col sm:flex-row md:flex-col md:flex-grow md:pt-5 bg-blue-700 overflow-y-auto">
+          <div className="flex items-center flex-shrink-0 mx-auto p-2 ">
             <Link to={isAuthenticated ? "/" : "projects/new"}>
               <Logo />
             </Link>
           </div>
 
-          <div className="mt-5 flex-1 flex flex-col">
-            <nav className="flex-1 px-2 pb-4 space-y-1">
+          <div className="md:mt-5 flex-1 flex flex-col items-center sm:flex-row md:flex-col justify-end">
+            <nav className="md:flex-1 space-y-1">
               {navigation.map((item) => (
                 <a
                   key={item.name}
@@ -46,23 +46,23 @@ export default function SideBar(props: ISideBarProps) {
                     item.current
                       ? "bg-blue-800 text-white"
                       : "text-blue-100 hover:bg-blue-600",
-                    "group flex items-center justify-center px-2 py-2 text-sm font-medium rounded-md"
+                    "group flex items-center justify-center p-2 text-sm font-medium rounded-md"
                   )}
                 >
                   <item.icon
-                    className="mr-3 md:mr-0 flex-shrink-0 h-5 w-5"
+                    className="mr-3 sm:mr-0 flex-shrink-0 h-5 w-5"
                     aria-hidden="true"
                   />
-                  <span className="md:hidden">{item.name}</span>
+                  <span className="sm:hidden">{item.name}</span>
                 </a>
               ))}
             </nav>
-          </div>
 
-          <UserMenu
-            username={userName}
-            current={pathname.includes("profile")}
-          />
+            <UserMenu
+              username={userName}
+              current={pathname.includes("profile")}
+            />
+          </div>
         </div>
       </div>
     </>
diff --git a/services/frontend/src/components/global/UserMenu.tsx b/services/frontend/src/components/global/UserMenu.tsx
index 8ad1654..5b7ec0a 100644
--- a/services/frontend/src/components/global/UserMenu.tsx
+++ b/services/frontend/src/components/global/UserMenu.tsx
@@ -19,18 +19,15 @@ export default function UserMenu(props: IUserMenuProps) {
         ${
           current ? "bg-blue-800 text-white" : "text-blue-100 hover:bg-blue-600"
         },
-        flex border-t border-blue-800 p-4 w-full hover:cursor-pointer hover:bg-blue-600
+        flex md:border-t md:border-blue-800 p-4 md:w-full hover:cursor-pointer hover:bg-blue-600
       `}
     >
       <div className="flex items-center mx-auto">
         <UserCircleIcon className="inline-block h-8 w-8 rounded-full text-white" />
-        <div className="ml-3 md:ml-0">
-          <p className="text-base font-medium text-white md:hidden">
+        <div className="ml-3 sm:ml-0">
+          <p className="text-sm font-medium text-white sm:hidden">
             {username ? <>{username}</> : <>Log in</>}
           </p>
-          <p className="text-sm font-medium text-indigo-200 group-hover:text-white md:hidden">
-            View profile
-          </p>
         </div>
       </div>
     </div>
diff --git a/services/frontend/src/index.css b/services/frontend/src/index.css
index dc397bd..77ce728 100644
--- a/services/frontend/src/index.css
+++ b/services/frontend/src/index.css
@@ -16,6 +16,7 @@ body {
 .canvas {
   position: relative;
   height: 100%;
+  width: 100%;
 }
 
 .jsplumb-box {
@@ -112,6 +113,9 @@ path,
   .btn-util {
     @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-indigo-500;
   }
+  .lbl-util {
+    @apply block text-xs font-medium text-gray-700 mb-1
+  }
   .btn-util-red {
     @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-red-500;
   }