diff --git a/frontend-new/TODO.md b/frontend-new/TODO.md
index 6bcb5f046..9509978cd 100644
--- a/frontend-new/TODO.md
+++ b/frontend-new/TODO.md
@@ -57,7 +57,7 @@ once QA has passed, the checkboxes can be removed and the page can be ~~striked
 - index
   - [x] fetch
   - [x] layout
-  - [ ] functionality (search without reloading the page, sorting, licence and version filter)
+  - [ ] functionality (sorting, licence and version filter)
   - [x] design
   - [ ] qa
 - linkout
@@ -70,7 +70,7 @@ once QA has passed, the checkboxes can be removed and the page can be ~~striked
   - [x] fetch
   - [x] layout
   - [x] functionality
-  - [ ] design
+  - [x] design
   - [ ] qa
 - notifications
   - [x] fetch
diff --git a/frontend-new/src/components/Markdown.vue b/frontend-new/src/components/Markdown.vue
index 6e59971a7..633450226 100644
--- a/frontend-new/src/components/Markdown.vue
+++ b/frontend-new/src/components/Markdown.vue
@@ -16,9 +16,10 @@ const dum = computed(() => props);
 watch(dum, fetch, { deep: true });
 
 const renderedMarkdown = ref<string>("");
-const loading = ref<boolean>(true);
+const loading = ref<boolean>(false);
 async function fetch() {
   if (!props.raw) return;
+  loading.value = true;
   renderedMarkdown.value = await useInternalApi<string>("pages/render", false, "post", {
     content: props.raw,
   }).catch<any>((e) => handleRequestError(e, ctx, i18n));
diff --git a/frontend-new/src/components/design/Link.vue b/frontend-new/src/components/design/Link.vue
index 854b9b670..ba066293d 100644
--- a/frontend-new/src/components/design/Link.vue
+++ b/frontend-new/src/components/design/Link.vue
@@ -1,17 +1,21 @@
 <script lang="ts" setup>
+import { computed } from "vue";
+
 const props = withDefaults(
   defineProps<{
     to?: string | object;
     href?: string;
     activeUnderline?: boolean;
+    disabled?: boolean;
   }>(),
   {
     activeUnderline: false,
     to: undefined,
     href: undefined,
+    disabled: false,
   }
 );
-const classes = "color-primary font-bold hover:(underline)";
+const classes = computed<string>(() => "font-bold " + (props.disabled ? "color-gray-400 cursor-not-allowed" : "color-primary hover:(underline)"));
 </script>
 
 <template>
diff --git a/frontend-new/src/components/design/Steps.vue b/frontend-new/src/components/design/Steps.vue
index 4bd4a5fcd..12bd893f9 100644
--- a/frontend-new/src/components/design/Steps.vue
+++ b/frontend-new/src/components/design/Steps.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ComputedRef, Ref, ref } from "vue";
+import { computed, Ref } from "vue";
 import Link from "~/components/design/Link.vue";
 import Card from "~/components/design/Card.vue";
 import { useSettingsStore } from "~/store/settings";
@@ -101,12 +101,12 @@ export interface Step {
         <div v-for="step in steps" :key="step.value">
           <slot v-if="internalValue === step.value" :name="step.value" />
         </div>
-        <Button v-if="showBack" :disabled="disableBack" size="medium" class="mt-6 mr-2" @click="back">{{
-          i18n.t(buttonLangKey + activeStepIndex + ".back")
-        }}</Button>
-        <Button v-if="showNext" :disabled="disableNext" size="medium" class="mt-6" @click="next">{{
-          i18n.t(buttonLangKey + activeStepIndex + ".continue")
-        }}</Button>
+        <Button v-if="showBack" :disabled="disableBack" size="medium" class="mt-6 mr-2" @click="back">
+          {{ i18n.t(buttonLangKey + activeStepIndex + ".back") }}
+        </Button>
+        <Button v-if="showNext" :disabled="disableNext" size="medium" class="mt-6" @click="next">
+          {{ i18n.t(buttonLangKey + activeStepIndex + ".continue") }}
+        </Button>
       </Card>
     </div>
   </div>
diff --git a/frontend-new/src/components/design/Tabs.vue b/frontend-new/src/components/design/Tabs.vue
index 623d70566..4b687e8d5 100644
--- a/frontend-new/src/components/design/Tabs.vue
+++ b/frontend-new/src/components/design/Tabs.vue
@@ -13,20 +13,44 @@ const internalValue = computed({
 export interface Tab {
   value: string;
   header: string;
+  show?: () => boolean;
+  disable?: () => boolean;
 }
 
-const props = defineProps<{
-  modelValue: string;
-  tabs: Tab[];
-}>();
+const props = withDefaults(
+  defineProps<{
+    modelValue: string;
+    tabs: Tab[];
+    vertical: boolean;
+  }>(),
+  {
+    vertical: true,
+  }
+);
+
+function selectTab(tab: Tab) {
+  if (!tab.disable || !tab.disable()) {
+    internalValue.value = tab.value;
+  }
+}
 </script>
 
 <template>
-  <div class="flex flex-col <md:space-y-2 md:(flex-row space-x-2)">
-    <div class="min-w-12ch">
-      <ul class="flex flex-row <md:space-x-2 md:(flex-col space-y-2)">
-        <li v-for="tab in tabs" :key="tab.value">
-          <Link :class="internalValue == tab.value ? 'underline' : '!font-semibold'" :href="'#' + tab.value" @click.prevent="internalValue = tab.value">
+  <div :class="{ 'flex flex-col <md:space-y-2 md:(flex-row space-x-2)': vertical, 'flex flex-row flex-wrap': !vertical }">
+    <div :class="{ 'min-w-13ch': vertical, 'basis-full': !vertical }">
+      <ul :class="{ 'flex flex-row <md:space-x-2 md:(flex-col space-y-2)': vertical, 'flex flex-row gap-2 mb-2': !vertical }">
+        <li
+          v-for="tab in tabs"
+          :key="tab.value"
+          :class="'rounded p-2 ' + (internalValue === tab.value ? 'bg-gray-200 dark:(bg-black)' : 'bg-gray-300 dark:(bg-gray-600)')"
+        >
+          <Link
+            v-if="!tab.show || tab.show()"
+            :disabled="tab.disable && tab.disable()"
+            :class="internalValue === tab.value ? 'underline' : '!font-semibold'"
+            :href="'#' + tab.value"
+            @click.prevent="selectTab(tab)"
+          >
             {{ tab.header }}
           </Link>
         </li>
diff --git a/frontend-new/src/components/projects/ProjectNavItem.vue b/frontend-new/src/components/projects/ProjectNavItem.vue
index 651c66888..2d684e87c 100644
--- a/frontend-new/src/components/projects/ProjectNavItem.vue
+++ b/frontend-new/src/components/projects/ProjectNavItem.vue
@@ -15,7 +15,6 @@ const selected = computed(() => {
   return routerPath == props.to;
 });
 
-// TODO hover effect
 const clazz = computed(() => {
   return (
     "px-2 py-1 inline-flex items-center transition duration-300 border-b-2 border-transparent hover:border-[#004ee9] " +
diff --git a/frontend-new/src/i18n/locales/en.json b/frontend-new/src/i18n/locales/en.json
index d540855d8..d13c22190 100644
--- a/frontend-new/src/i18n/locales/en.json
+++ b/frontend-new/src/i18n/locales/en.json
@@ -189,6 +189,7 @@
       },
       "step2": {
         "title": "Basic Settings",
+        "description": "Please provide the basic settings for this project",
         "continue": "Continue",
         "back": "Back",
         "userSelect": "Create as...",
@@ -198,6 +199,7 @@
       },
       "step3": {
         "title": "Additional Settings",
+        "description": "You can provide these (optional) additional settings. You can change them in your project settings at any time.",
         "continue": "Continue",
         "back": "Back",
         "optional": "Optional",
@@ -215,6 +217,7 @@
       },
       "step4": {
         "title": "Import from Spigot",
+        "description": "You can optionally use this step to convert your existing description for your project from spigot. If you safely skip this and design your description from scratch once you got your project created.",
         "continue": "Create",
         "back": "Back",
         "optional": "Optional",
diff --git a/frontend-new/src/pages/new.vue b/frontend-new/src/pages/new.vue
index d72b73313..eced37977 100644
--- a/frontend-new/src/pages/new.vue
+++ b/frontend-new/src/pages/new.vue
@@ -68,19 +68,24 @@ const isCustomLicense = computed(() => form.value.settings.license.type === "(cu
 
 const selectedStep = ref("tos");
 const steps: Step[] = [
-  { value: "tos", header: i18n.t("project.new.step1.title") },
+  { value: "tos", header: i18n.t("project.new.step1.title"), showBack: () => false },
   { value: "basic", header: i18n.t("project.new.step2.title") },
   { value: "additional", header: i18n.t("project.new.step3.title") },
-  { value: "import", header: i18n.t("project.new.step4.title") },
-  // TODO buttons need to be disabled here
-  { value: "finishing", header: i18n.t("project.new.step5.title") },
+  {
+    value: "import",
+    header: i18n.t("project.new.step4.title"),
+    beforeNext: () => {
+      createProject();
+      return true;
+    },
+  },
+  { value: "finishing", header: i18n.t("project.new.step5.title"), showNext: () => false, showBack: () => false },
 ];
 
 const selectBBCodeTab = ref("convert");
 const bbCodeTabs: Tab[] = [
   { value: "convert", header: i18n.t("project.new.step4.convert") },
-  // TODO tab needs to be disabled if no markdown was entered
-  { value: "preview", header: i18n.t("project.new.step4.preview") },
+  { value: "preview", header: i18n.t("project.new.step4.preview"), disable: () => !converter.value.markdown },
   { value: "tutorial", header: i18n.t("project.new.step4.tutorial") },
 ];
 
@@ -126,7 +131,6 @@ function createProject() {
 }
 </script>
 
-<!-- todo: icon -->
 <template>
   <Steps v-model="selectedStep" :steps="steps" button-lang-key="project.new.step">
     <template #tos>
@@ -135,8 +139,7 @@ function createProject() {
     </template>
     <template #basic>
       <div class="flex flex-wrap">
-        <!-- todo i18n -->
-        <p class="basis-full mb-4">Please provide the basic settings for this project</p>
+        <p class="basis-full mb-4">{{ i18n.t("project.new.step2.description") }}</p>
         <div class="basis-full md:basis-6/12">
           <InputSelect
             v-model="form.ownerId"
@@ -173,9 +176,8 @@ function createProject() {
       </div>
     </template>
     <template #additional>
-      <!-- todo i18n -->
-      <p>You can provide these additional settings. You can change them in your project settings at any time.</p>
-      <div class="text-lg mt-4">
+      <p>{{ i18n.t("project.new.step3.description") }}</p>
+      <div class="text-lg mt-4 flex gap-2 items-center">
         <IconMdiLink />
         {{ i18n.t("project.new.step3.links") }}
         <hr />
@@ -186,7 +188,7 @@ function createProject() {
         <div class="basis-full mt-4"><InputText v-model.trim="form.settings.source" :label="i18n.t('project.new.step3.source')" :rules="[url()]" /></div>
         <div class="basis-full mt-4"><InputText v-model.trim="form.settings.support" :label="i18n.t('project.new.step3.support')" :rules="[url()]" /></div>
       </div>
-      <div class="text-lg mt-6">
+      <div class="text-lg mt-6 flex gap-2 items-center">
         <IconMdiLicense />
         {{ i18n.t("project.new.step3.license") }}
         <hr />
@@ -207,7 +209,7 @@ function createProject() {
           <InputText v-model.trim="form.settings.license.url" :label="i18n.t('project.new.step3.url')" :rules="[url()]" />
         </div>
       </div>
-      <div class="text-lg mt-6">
+      <div class="text-lg mt-6 flex gap-2 items-center">
         <IconMdiCloudSearch />
         {{ i18n.t("project.new.step3.seo") }}
         <hr />
@@ -224,12 +226,8 @@ function createProject() {
       </div>
     </template>
     <template #import>
-      <p class="mb-4">
-        You can optionally use this step to convert your existing description for your project form spigot. If you savely skip this and desing you rdescription
-        from scratch once you got your project created.
-      </p>
-      <!-- todo vertical tabs -->
-      <Tabs v-model="selectBBCodeTab" :tabs="bbCodeTabs">
+      <p class="mb-4">{{ i18n.t("project.new.step4.description") }}</p>
+      <Tabs v-model="selectBBCodeTab" :tabs="bbCodeTabs" :vertical="false">
         <template #convert>
           <div class="flex flex-wrap">
             <div class="basis-full"><InputTextarea v-model="converter.bbCode" :rows="6" :label="i18n.t('project.new.step4.convertLabels.bbCode')" /></div>
@@ -263,7 +261,6 @@ function createProject() {
     <template #finishing>
       <div class="flex flex-col">
         <div v-if="projectLoading" class="text-center my-8"><Spinner class="stroke-red-500" :diameter="90" :stroke="6" /></div>
-        <div v-if="projectLoading" class="text-center"><Button @click="createProject">button go brrrr</Button></div>
         <template v-else-if="projectCreationErrors && projectCreationErrors.length > 0">
           <div class="text-lg mt-2">
             {{ i18n.t("project.new.error.create") }}