diff --git a/public/img/login.jpg b/public/img/login.jpg
new file mode 100644
index 0000000..618f39c
Binary files /dev/null and b/public/img/login.jpg differ
diff --git a/public/img/signup.jpg b/public/img/signup.jpg
new file mode 100644
index 0000000..3e8bf21
Binary files /dev/null and b/public/img/signup.jpg differ
diff --git a/resources/views/auth/signup.blade.php b/resources/views/auth/signup.blade.php
index 834fd6b..8df96a3 100644
--- a/resources/views/auth/signup.blade.php
+++ b/resources/views/auth/signup.blade.php
@@ -3,4 +3,49 @@
 @section('title', 'Sign Up')
 
 @section('content')
+    <div class="md:flex md:justify-center md:gap-10 md:items-center">
+        <div class="md:w-6/12 p-5">
+            <img src="{{ asset('img/signup.jpg') }}" alt="Signup image">
+        </div>
+
+        <div class="md:w-4/12 bg-white p-6 rounded-lg shadow-xl">
+            <form action="#">
+
+                <div class="mb-5">
+                    <label for="name" class="mb-2 block uppercase text-gray-500 font-bold">Name</label>
+                    <input id="name" name="name" type="text" placeholder="Enter your name"
+                        class="border p-3 w-full rounded-lg">
+                </div>
+
+                <div class="mb-5">
+                    <label for="username" class="mb-2 block uppercase text-gray-500 font-bold">Username</label>
+                    <input id="username" name="username" type="text" placeholder="Enter your username"
+                        class="border p-3 w-full rounded-lg">
+                </div>
+
+                <div class="mb-5">
+                    <label for="email" class="mb-2 block uppercase text-gray-500 font-bold">E-Mail</label>
+                    <input id="email" name="email" type="email" placeholder="Enter your e-mail"
+                        class="border p-3 w-full rounded-lg">
+                </div>
+
+                <div class="mb-5">
+                    <label for="password" class="mb-2 block uppercase text-gray-500 font-bold">Password</label>
+                    <input id="password" name="password" type="password" placeholder="Enter your password"
+                        class="border p-3 w-full rounded-lg">
+                </div>
+
+                <div class="mb-5">
+                    <label for="password_confirmation" class="mb-2 block uppercase text-gray-500 font-bold">Confirm your
+                        password</label>
+                    <input id="password_confirmation" name="password_confirmation" type="password"
+                        placeholder="Confirm your password" class="border p-3 w-full rounded-lg">
+                </div>
+
+                <input type="submit" value="Create Account"
+                    class="bg-sky-600 hover:bg-sky-700 transition-colors cursor-pointer uppercase font-bold w-full p-3 text-white rounded-lg">
+
+            </form>
+        </div>
+    </div>
 @endsection
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 911ad71..cb0fd21 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -30,7 +30,7 @@
         @yield('content')
     </main>
 
-    <footer class="text-center p-5 text-gray-500 font-bold uppercase">
+    <footer class="text-center p-5 text-gray-500 font-bold uppercase mt-10">
         DevStagram - {{ date('Y') }} All rights reserved.
     </footer>